m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-11 23:55:16 +01:00
Code

kinda responsive typography

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-06-10 22:53:29 +02:00
parent fb990a193a
commit 238131ada7
4 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,20 +82,18 @@
.byline, .byline,
.time .time
font-style: italic font-style: italic
color: $text-color-dimmed
.byline .byline
margin-bottom: 0 margin-bottom: 0
color: $text-color-light
.by .by
display: block display: block
.time
color: $text-color-dimmed
//
// Categories & Tags // Categories & Tags
// /////////////////////////////////////
.categories .categories
margin-bottom: 0 margin-bottom: 0
@ -103,7 +101,7 @@
text-transform: capitalize text-transform: capitalize
.tag .tag
color: $text-color-dimmed color: $text-color
margin-right: 5px margin-right: 5px
&:before &:before
@ -111,7 +109,6 @@
color: darken($page-bg, 15%) color: darken($page-bg, 15%)
margin-right: 2px margin-right: 2px
.avatar .avatar
width: 80px width: 80px
height: 80px height: 80px

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

@ -49,22 +49,30 @@ h6, .h6
margin-bottom: $line-height-computed margin-bottom: $line-height-computed
h1, .h1 h1, .h1
font-size: $font-size-h1 font-size: $font-size-h1-small
@media $breakpoint1
font-size: $font-size-h1
@media $breakpoint3 @media $breakpoint3
font-size: $font-size-h1-large font-size: $font-size-h1-large
h2, .h2 h2, .h2
font-size: $font-size-h2 font-size: $font-size-h2-small
@media $breakpoint1
font-size: $font-size-h2
@media $breakpoint3 @media $breakpoint3
font-size: $font-size-h2-large font-size: $font-size-h2-large
h3, .h3 h3, .h3
font-size: $font-size-h3 font-size: $font-size-h3-small
@media $breakpoint1
font-size: $font-size-h3
@media $breakpoint3 @media $breakpoint3
font-size: $font-size-h3-large font-size: $font-size-h3-large
h4, .h4 h4, .h4
font-size: $font-size-h4 font-size: $font-size-h4-small
@media $breakpoint1
font-size: $font-size-h4
@media $breakpoint3 @media $breakpoint3
font-size: $font-size-h4-large font-size: $font-size-h4-large

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

@ -16,7 +16,7 @@ support-for-ie = false // Nib IE 8 support
// Asset Paths // Asset Paths
///////////////////////////////////// /////////////////////////////////////
$img-path = '/assets/images/' $img-path = '/assets/img/'
$font-path = '/assets/fonts/' $font-path = '/assets/fonts/'
@ -27,7 +27,15 @@ $brand-dark = #015565
$brand-light = #e7eef4 $brand-light = #e7eef4
$brand-cyan = #3a9085 $brand-cyan = #3a9085
$brand-grey = #56666e $brand-grey = #56666e
$brand-grey-light = #96a6ad $brand-grey-light = lighten($brand-grey, 10%)
// Text Colors
/////////////////////////////////////
$text-color = $brand-grey-light
$text-color-light = lighten($brand-grey-light, 30%)
$text-color-dimmed = lighten($brand-grey-light, 40%)
// Typography // Typography
@ -52,6 +60,11 @@ $font-size-h4-large = ceil(($font-size-large * 1.25))
$font-size-h5-large = $font-size-large $font-size-h5-large = $font-size-large
$font-size-h6-large = $font-size-base $font-size-h6-large = $font-size-base
$font-size-h1-small = floor(($font-size-small * 2.75))
$font-size-h2-small = floor(($font-size-small * 2))
$font-size-h3-small = ceil(($font-size-small * 1.75))
$font-size-h4-small = ceil(($font-size-small * 1.25))
$line-height-base = 1.4444444444 // 26px/18px $line-height-base = 1.4444444444 // 26px/18px
$line-height-computed = floor($font-size-base * $line-height-base) $line-height-computed = floor($font-size-base * $line-height-base)
$line-height-large = 1.5 // 36px/24px $line-height-large = 1.5 // 36px/24px
@ -59,7 +72,7 @@ $line-height-small = 1.1428571429
$font-family-base = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif $font-family-base = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif
$font-weight-base = 400 $font-weight-base = 400
$font-color-base = $brand-grey $font-color-base = $text-color
$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace $font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
@ -69,14 +82,6 @@ $headings-line-height = 1.1
$headings-color = $brand-dark $headings-color = $brand-dark
// Text Colors
/////////////////////////////////////
$text-color = lighten($brand-grey, 5%)
$text-color-light = darken($brand-grey-light, 5%)
$text-color-dimmed = lighten($brand-grey-light, 5%)
// Scaffolding // Scaffolding
///////////////////////////////////// /////////////////////////////////////
@ -150,4 +155,4 @@ $breakpoint3 = 'only screen and (min-width: 87.500em)'
///////////////////////////////////// /////////////////////////////////////
$highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) ' $highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
$highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) ' $highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '

1
_src/_includes/comments.html
View File

@ -1,7 +1,6 @@
<aside class="comments"> <aside class="comments">
<p>You should tweet this post</p>
<p class="btn-wrap"> <p class="btn-wrap">
<a class="btn twitter-share" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom"> <a class="btn twitter-share" target="_blank" href="https://twitter.com/intent/tweet?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&text={{ page.title | cgi_escape }}&via=kremalicious&related=kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter"> <svg class="icon icon-entypo icon-entypo-twitter">