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

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

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

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

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

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

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