m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 10:08:50 +02: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 color: $kbd-color
background-color: $kbd-bg background-color: $kbd-bg
border-radius: $border-radius-small 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 pre
display: block display: block

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

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

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

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

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

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

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

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

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

@ -15,6 +15,12 @@ body
line-height: $line-height-base line-height: $line-height-base
color: $font-color-base color: $font-color-base
word-wrap: break-word 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 @media $breakpoint3
font-size: $font-size-large font-size: $font-size-large
@ -102,9 +108,7 @@ a
&:active &:active
transition: none transition: none
background: $link-color color: darken($link-color, 20%)
color: #fff
text-shadow: none
h1 &, h1 &,
h2 &, 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-h3-small = ceil(($font-size-small * 1.75))
$font-size-h4-small = ceil(($font-size-small * 1.25)) $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-computed = floor($font-size-base * $line-height-base)
$line-height-large = 1.5 // 36px/24px $line-height-large = 1.5 // 36px/24px
$line-height-small = 1.1428571429 $line-height-small = 1.1428571429

56
_src/_includes/head.html
View File

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