m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00
Code

typography tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-20 00:19:58 +02:00
parent 13517bbfce
commit 4285ca87dc
4 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_src/_assets/styl/content.styl
View File

@ -11,7 +11,7 @@
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: ($line-height-computed/2)
margin-top: ($line-height-computed*2)
margin-bottom: ($line-height-computed/2)
@media $breakpoint2
@ -38,6 +38,10 @@
.page-index &:first-child
padding-top: ($line-height-computed*3)
.page-title + &,
.paginator-title + &
padding-top: ($line-height-computed*2)
.page-single &
border: none
padding-top: ($line-height-computed*2)
@ -128,7 +132,6 @@
&:focus
color: $link-color
border-color: $link-color
background: rgba(255,255,255,.3)
&:active
background: $link-color
@ -141,8 +144,8 @@
&:before
content: '#'
color: darken($page-bg, 15%)
margin-right: 2px
color: $text-color-dimmed
margin-right: 1px
.avatar
width: 80px

13
_src/_assets/styl/navigation.styl
View File

@ -19,6 +19,7 @@
outline: 0
.icon
filter: drop-shadow( 0 1px 0 rgba(#fff, .5) )
&.icon-entypo-menu
width: 24px
height: 24px
@ -27,8 +28,12 @@
&:focus .icon
fill: $link-color
&:active .icon
fill: #fff
&:active
background: transparent
transition: none
.icon
fill: darken($link-color, 30%)
.menu-btn
margin-right: -.5em
@ -91,6 +96,4 @@
padding: 0 2px
.paginator-title
@extend .h3, .heading-band
color: $brand-grey-light
margin-bottom: 0
@extend .page-title

19
_src/_assets/styl/typography.styl
View File

@ -108,7 +108,7 @@ a
&:active
transition: none
color: darken($link-color, 20%)
color: darken($link-color, 30%)
h1 &,
h2 &,
@ -222,25 +222,28 @@ blockquote
padding-left: 25px
margin: 0 0 $line-height-computed
position: relative
padding-left: 20px
@media $breakpoint2
@media $breakpoint1
padding-left: 40px
@media $breakpoint3
padding: 0 ($line-height-computed*1.75)
padding-left: 60px
// quotation marks
&:before
content: "“"
font-size: 250%
font-family: "Hoefler Text", "Times New Roman", serif
color: $text-color-dimmed
font-size: 300%
color: lighten($text-color, 40%)
position: absolute
left: 0
left: -10px
top: -20px
@media $breakpoint1
left: 0
@media $breakpoint3
top: -($line-height-computed/1.35)
top: -30px
p:last-child
margin-bottom: 0

4
_src/_assets/styl/variables.styl
View File

@ -90,8 +90,8 @@ $page-bg = $brand-light
// Links
/////////////////////////////////////
$link-color = lighten($brand-cyan, 5%)
$link-color-hover = lighten($link-color, 10%)
$link-color = lighten($brand-cyan, 10%)
$link-color-hover = lighten($link-color, 15%)
// Grid