172 lines
3 KiB
Stylus
172 lines
3 KiB
Stylus
|
html, body
|
||
|
|
background-color $primary
|
||
|
|
font 400 1em $baseType
|
||
|
|
height 100%
|
||
|
|
|
||
|
|
a
|
||
|
|
font 300 1em $titleType
|
||
|
|
color $secondary
|
||
|
|
text-decoration underline
|
||
|
|
object-transitions(0.1s)
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
color $secondary + 10%
|
||
|
|
|
||
|
|
svg.icons
|
||
|
|
width 20px
|
||
|
|
fill $secondary
|
||
|
|
|
||
|
|
#loader
|
||
|
|
position fixed
|
||
|
|
z-index 2000
|
||
|
|
height 100%
|
||
|
|
width 100%
|
||
|
|
display flex
|
||
|
|
align-items center
|
||
|
|
justify-content center
|
||
|
|
|
||
|
|
i
|
||
|
|
color $tertiary
|
||
|
|
|
||
|
|
.blog-container
|
||
|
|
width 100%
|
||
|
|
|
||
|
|
.main-container
|
||
|
|
margin 0 auto
|
||
|
|
z-index 10
|
||
|
|
position relative
|
||
|
|
|
||
|
|
section
|
||
|
|
header
|
||
|
|
width 100%
|
||
|
|
height 100px
|
||
|
|
background-color $primary - 30%
|
||
|
|
margin 0
|
||
|
|
padding 0
|
||
|
|
|
||
|
|
#header-wrapper
|
||
|
|
width 100%
|
||
|
|
max-width 900px
|
||
|
|
margin 0 auto
|
||
|
|
|
||
|
|
#header-one, #header-two
|
||
|
|
z-index 10
|
||
|
|
position relative
|
||
|
|
|
||
|
|
label#the-title
|
||
|
|
font-family 'Apercu-Mono'
|
||
|
|
font-size 2em
|
||
|
|
color $primary
|
||
|
|
text-decoration none
|
||
|
|
display block
|
||
|
|
// word-break: break-all;
|
||
|
|
|
||
|
|
/* 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: 640px)
|
||
|
|
.main-container
|
||
|
|
.content
|
||
|
|
#the-intro
|
||
|
|
font-size 31px
|
||
|
|
line-height 35px
|
||
|
|
|
||
|
|
@media only screen and (max-width: 480px)
|
||
|
|
.main-container
|
||
|
|
.content
|
||
|
|
#the-intro
|
||
|
|
font-size 25px
|
||
|
|
line-height 33px
|
||
|
|
|
||
|
|
#index-display
|
||
|
|
span, a
|
||
|
|
font 400 1.2em $bodyType
|
||
|
|
|
||
|
|
@media only screen and (max-width: 375px)
|
||
|
|
.main-container
|
||
|
|
.header
|
||
|
|
width 90%
|
||
|
|
|
||
|
|
.header-desc
|
||
|
|
h1
|
||
|
|
line-height 1rem
|
||
|
|
font-size 3.3rem
|
||
|
|
|
||
|
|
span a
|
||
|
|
color $white
|
||
|
|
width 250px
|
||
|
|
font-weight 300
|
||
|
|
display inline-block
|
||
|
|
word-break break-all
|
||
|
|
font 300 7em / 1em $titleType
|
||
|
|
text-decoration none
|
||
|
|
margin 0 0 50px 0
|
||
|
|
|
||
|
|
#the-intro
|
||
|
|
color $secondary
|
||
|
|
opacity 0
|
||
|
|
font 400 1.8em $titleType
|
||
|
|
display inline-block
|
||
|
|
width 95%
|
||
|
|
|
||
|
|
#item-intro
|
||
|
|
width 95%
|
||
|
|
|
||
|
|
label
|
||
|
|
font-size 2em
|
||
|
|
|
||
|
|
.content
|
||
|
|
#the-intro
|
||
|
|
font-size 24px
|
||
|
|
line-height 33px
|
||
|
|
|
||
|
|
#index-display
|
||
|
|
label
|
||
|
|
font-size 7em
|
||
|
|
|
||
|
|
#recent-work, #recent-blog
|
||
|
|
float none
|
||
|
|
display block
|
||
|
|
margin 0 auto
|
||
|
|
text-align left
|
||
|
|
padding-bottom 30px
|
||
|
|
|
||
|
|
@media only screen and (max-width: 320px)
|
||
|
|
.main-container
|
||
|
|
.header
|
||
|
|
.header-desc
|
||
|
|
h1
|
||
|
|
line-height 1rem
|
||
|
|
font-size 2.9rem
|
||
|
|
|
||
|
|
.content
|
||
|
|
#the-intro
|
||
|
|
font-size 19px
|
||
|
|
line-height 28px
|