fipamo/src/styles/main/_structure.styl

132 lines
2.2 KiB
Stylus

html, body
background-color $primary - 60%
font 400 1em $baseType
height 100%
a
font 300 1em $baseType
color $secondary
text-decoration underline
object-transitions(0.1s)
&:hover
color $secondary + 10%
svg.icons
width 25px
fill $secondary
#notifications
position fixed
z-index 2000
height 10%
width 100%
display none
align-items center
justify-content center
padding 0
margin 0
#notifyMessage
background-color: $highlight
margin-top: -125px;
padding-top 0
height 50px;
width 500px
display: flex;
align-items center
justify-content center
opacity: 0
p
color $white
.blog-container
width 100%
.main-container
margin 0 auto
z-index 10
position relative
section
header
width 100%
max-width 900px
margin 0 auto
#wrapper
padding 0.75rem
#left, #right
width 50%
display inline-block
vertical-align top
#the-logo
width 40px
#right
text-align right
color $white
a
text-decoration-color $highlight
label#the-title
font-size 1.2em
font-weight 400
color $tertiary
text-decoration none
display block
line-height 0.8
// word-break: break-all;
#dash-menu
text-align right
/* Mozilla based browsers */
::-moz-selection
background-color $highlight
color $white
/* Works in Safari */
::selection
background-color $highlight
color $white
/* Works in Opera */
::-o-selection
background-color $highlight
color $white
::-ms-selection
background-color $highlight
color $white
/* Works in Internet Explorer */
::-webkit-selection
background-color $highlight
color $white
/**
-------------------------------
-- Responsive
-------------------------------
* */
@media only screen and (max-width: 800px)
.main-container
section
header
#wrapper
#left, #right
display inline-block
@media only screen and (max-width: 480px)
.main-container
section
header
#wrapper
#left
width 30%
#right
width 70%