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

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

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

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

@ -16,7 +16,7 @@ support-for-ie = false // Nib IE 8 support
// Asset Paths
/////////////////////////////////////
$img-path = '/assets/images/'
$img-path = '/assets/img/'
$font-path = '/assets/fonts/'
@ -27,7 +27,15 @@ $brand-dark = #015565
$brand-light = #e7eef4
$brand-cyan = #3a9085
$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
@ -52,6 +60,11 @@ $font-size-h4-large = ceil(($font-size-large * 1.25))
$font-size-h5-large = $font-size-large
$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-computed = floor($font-size-base * $line-height-base)
$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-weight-base = 400
$font-color-base = $brand-grey
$font-color-base = $text-color
$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
@ -69,14 +82,6 @@ $headings-line-height = 1.1
$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
/////////////////////////////////////

1
_src/_includes/comments.html
View File

@ -1,7 +1,6 @@
<aside class="comments">
<p>You should tweet this post</p>
<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">
<svg class="icon icon-entypo icon-entypo-twitter">