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

typography

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-02 21:15:22 +02:00
parent 35d9de9e69
commit 413f86856d
8 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_src/_assets/styl/code.styl
View File

@ -29,7 +29,8 @@ kbd
color: $kbd-color
background-color: $kbd-bg
border-radius: $border-radius-small
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
border: 1px solid $kbd-bg
box-shadow: inset 0 1px 0 rgba(#fff, .4)
pre
display: block

5
_src/_assets/styl/content-featured.styl
View File

@ -28,6 +28,5 @@
.featured-image
display: block
img
margin-bottom: 0
margin-bottom: 0
box-shadow: 0 1px 3px rgba(0,0,0,.2)

1
_src/_assets/styl/content-photo.styl
View File

@ -19,6 +19,7 @@
img
max-height: 540px
width: auto
box-shadow: 0 1px 3px rgba(0,0,0,.2)
figcaption
@extend .transition

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

@ -66,6 +66,9 @@
h1
font-size: ceil($font-size-base * 2.5)
.teaser
box-shadow: 0 1px 3px rgba(0,0,0,.2)
p:last-child
margin-bottom: 0

1
_src/_assets/styl/media.styl
View File

@ -20,7 +20,6 @@ figure, img, svg, video, audio, embed, canvas
img
vertical-align: middle
box-shadow: 0 1px 3px rgba(0,0,0,.2)
.teaser,
.teaser img

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

@ -15,6 +15,12 @@ body
line-height: $line-height-base
color: $font-color-base
word-wrap: break-word
text-rendering: optimizeLegibility;
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: 'liga', 'kern';
@media $breakpoint3
font-size: $font-size-large
@ -102,9 +108,7 @@ a
&:active
transition: none
background: $link-color
color: #fff
text-shadow: none
color: darken($link-color, 20%)
h1 &,
h2 &,

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

@ -65,7 +65,7 @@ $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.5555555556 // 28px/18px
$line-height-base = 1.4444444444 // 26px/18px
$line-height-computed = floor($font-size-base * $line-height-base)
$line-height-large = 1.5 // 36px/24px
$line-height-small = 1.1428571429

56
_src/_includes/head.html
View File

@ -1,28 +1,28 @@
<!DOCTYPE html>
<!--
___ ___
/__/\ /__/|
| |::\ | |:|
| |:|:\ | |:|
__|__|:|\:\ __| |:|
/__/::::| \:\ /__/\_|:|____
\ \:\~~\__\/ \ \:\/:::::/
\ \:\ \ \::/~~~~
\ \:\ \ \:\
\ \:\ \ \:\
\__\/ \__\/
___ ___
/__/\ /__/|
| |::\ | |:|
| |:|:\ | |:|
__|__|:|\:\ __| |:|
/__/::::| \:\ /__/\_|:|____
\ \:\~~\__\/ \ \:\/:::::/
\ \:\ \ \::/~~~~
\ \:\ \ \:\
\ \:\ \ \:\
\__\/ \__\/
YOU EARNED THE GEEK ACHIEVEMENT
FOR LOOKING AT MY SOURCE
YOU EARNED THE GEEK ACHIEVEMENT
FOR LOOKING AT MY SOURCE
But because of all the minimizing and caching
going on you better check out the code on
github
_____________________________________________
But because of all the minimizing and caching
going on you better check out the code on
github
_____________________________________________
https://github.com/kremalicious/kremalicious3
https://github.com/kremalicious/kremalicious3
_____________________________________________
_____________________________________________
-->
<html lang="en">
<head>
@ -48,8 +48,8 @@
<meta name="author" content="{% if page.author %}{{ page.author }}{% else %}{{ site.author.name }}{% endif %}">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
@ -58,7 +58,7 @@
<link rel="stylesheet" href="/assets/css/{{ page.style }}">
{% endif %}
<!--
<!--
TypeKit
Improved snippet from https://blog.5apps.com/2014/02/21/using-typekit-the-right-way-with-an-improved-loading-script.html
-->
@ -74,14 +74,14 @@
})(document);
</script>
<!-- Picturefill -->
<script src="/assets/js/picturefill.min.js" async></script>
<!-- Picturefill -->
<script src="/assets/js/picturefill.min.js" async></script>
<!-- Canonical URL -->
<!-- Canonical URL -->
<link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
<!-- Atom feed -->
<link href="{{ site.url }}/feed/" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
<link href="{{ site.url }}/feed/" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
<!-- Apple -->
<meta name="apple-mobile-web-app-title" content="kremalicious">
@ -94,8 +94,8 @@
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/assets/img/favicon-16x16.png" sizes="16x16">
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>
<!-- OpenGraph -->
{% include opengraph.html %}