From 9a860f2b3f42c1966fc812cbe4c2aee5ad313370 Mon Sep 17 00:00:00 2001 From: Jake Giltsoff Date: Sat, 12 Jul 2014 18:56:26 +0100 Subject: [PATCH] Typography updates --- assets/css/screen.css | 334 +++++++++++++++++++++++++++--------------- 1 file changed, 219 insertions(+), 115 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index 8b211cb..7e68a8c 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -14,11 +14,12 @@ 7. Third Party Elements 8. Pagination 9. Footer - 10. Media Queries (Tablet) - 11. Media Queries (Mobile) - 12. Animations + 10. Media Queries (Medium Desktop) + 11. Media Queries (Tablet) + 12. Media Queries (Mobile) + 13. Animations - */ +*/ /* ========================================================================== 0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified) @@ -43,14 +44,14 @@ a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } -b, strong { font-weight: bold; } +b, strong { font-weight: 700; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } -mark { background: #ff0; color: #000; } +mark { background: #FF0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre-wrap; } @@ -105,12 +106,12 @@ table { border-collapse: collapse; border-spacing: 0; } /* Import the font file with the icons in it */ @font-face { - font-family: 'icons'; - src:url('../fonts/icons.eot'); - src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), - url('../fonts/icons.woff') format('woff'), - url('../fonts/icons.ttf') format('truetype'), - url('../fonts/icons.svg#icons') format('svg'); + font-family: "icons"; + src:url("../fonts/icons.eot"); + src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"), + url("../fonts/icons.woff") format("woff"), + url("../fonts/icons.ttf") format("truetype"), + url("../fonts/icons.svg#icons") format("svg"); font-weight: normal; font-style: normal; } @@ -121,7 +122,7 @@ table { border-collapse: collapse; border-spacing: 0; } .icon-twitter:before, .icon-google-plus:before, .icon-facebook:before { - font-family: 'icons'; + font-family: "icons"; speak: none; font-style: normal; font-weight: normal; @@ -164,66 +165,70 @@ html { } body { + -webkit-font-feature-settings: 'kern' 1; + -moz-font-feature-settings: 'kern' 1; + -ms-font-feature-settings: 'kern' 1; + -o-font-feature-settings: 'kern' 1; + font-feature-settings: 'kern' 1; height: 100%; max-height: 100%; - font-family: 'Noto Serif', serif; - font-size: 2.0rem; - line-height: 1.6em; + font-family: "Noto Serif", serif; + font-size: 2.2rem; + line-height: 1.7em; color: #3A4145; } ::-moz-selection { - color: #222; background: #D6EDFF; - text-shadow: none; } ::selection { - color: #222; background: #D6EDFF; - text-shadow: none; } h1, h2, h3, h4, h5, h6 { - text-rendering: optimizeLegibility; - line-height: 1; - margin-top: 0; - font-family: 'Open Sans', sans-serif; + -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; + -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; + -ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; + -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; + font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; + color: #2E2E2E; + line-height: 1.3em; + margin: 0 0 0.5em 0; + font-family: "Open Sans", sans-serif; } h1 { - font-size: 5rem; - line-height: 1.2em; + font-size: 5.6rem; letter-spacing: -2px; text-indent: -3px; } h2 { - font-size: 4rem; - line-height: 1.2em; + font-size: 4.4rem; letter-spacing: -1px; text-indent: -2px; } h3 { - font-size: 3.5rem; + font-size: 3.9rem; } h4 { - font-size: 3rem; + font-size: 3.1rem; } h5 { - font-size: 2.5rem; + font-size: 2.8rem; } h6 { - font-size: 2rem; + font-size: 2.2rem; } a { - color: #4a4a4a; + color: #4A4A4A; transition: color ease 0.3s; } @@ -236,14 +241,23 @@ h4 a, h5 a, h6 a { color: #50585D; } - p, ul, ol, dl { - margin: 1.6em 0; + -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; + -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; + -ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; + -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; + font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; + margin: 0 0 1.7em 0; +} + +ol, ul { + padding-left: 0; } ol ol, ul ul, ul ol, ol ul { - margin: 0.4em 0; + margin: 0 0 0.4em 0; + padding-left: 2em; } dl dt { @@ -254,8 +268,8 @@ dl dt { text-align: right; text-overflow: ellipsis; white-space: nowrap; - font-weight: bold; - margin-bottom: 1em + font-weight: 700; + margin-bottom: 1em; } dl dd { @@ -267,7 +281,7 @@ hr { display: block; height: 1px; border: 0; - border-top: 1px solid #efefef; + border-top: #EFEFEF 1px solid; margin: 3.2em 0; padding: 0; } @@ -275,9 +289,9 @@ hr { blockquote { -moz-box-sizing: border-box; box-sizing: border-box; - margin: 1.6em 0 1.6em -2.2em; + margin: 1.7em 0 1.7em -2.2em; padding: 0 0 0 1.6em; - border-left: #4a4a4a 0.4em solid; + border-left: #4A4A4A 0.4em solid; } blockquote p { @@ -288,20 +302,20 @@ blockquote p { blockquote small { display: inline-block; margin: 0.8em 0 0.8em 1.5em; - font-size:0.9em; - color: #ccc; + font-size: 0.9em; + color: #CCC; } -blockquote small:before { content: '\2014 \00A0'; } +blockquote small:before { content: "\2014 \00A0"; } blockquote cite { - font-weight:bold; + font-weight: 700; } blockquote cite a { font-weight: normal; } mark { - background-color: #ffc336; + background-color: #FFC336; } code, tt { @@ -309,7 +323,7 @@ code, tt { font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; white-space: pre-wrap; - border: 1px solid #E3EDF3; + border: #E3EDF3 1px solid; background: #F7FAFB; border-radius: 2px; } @@ -317,8 +331,8 @@ code, tt { pre { -moz-box-sizing: border-box; box-sizing: border-box; - margin: 1.6em 0; - border: 1px solid #E3EDF3; + margin: 0 0 1.7em 0; + border: #E3EDF3 1px solid; width: 100%; padding: 10px; font-family: Inconsolata, monospace, sans-serif; @@ -342,12 +356,12 @@ kbd { display: inline-block; margin-bottom: 0.4em; padding: 1px 8px; - border: #ccc 1px solid; + border: #CCC 1px solid; color: #666; - text-shadow: #fff 0 1px 0; + text-shadow: #FFF 0 1px 0; font-size: 0.9em; - font-weight: bold; - background: #f4f4f4; + font-weight: 700; + background: #F4F4F4; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), @@ -357,8 +371,8 @@ kbd { table { -moz-box-sizing: border-box; box-sizing: border-box; - margin: 1.6em 0; - width:100%; + margin: 1.7em 0; + width: 100%; max-width: 100%; background-color: transparent; } @@ -369,7 +383,7 @@ table td { line-height: 20px; text-align: left; vertical-align: top; - border-top: 1px solid #efefef; + border-top: #EFEFEF 1px solid; } table th { color: #000; } @@ -383,13 +397,13 @@ table thead:first-child tr:first-child td { border-top: 0; } -table tbody + tbody { border-top: 2px solid #efefef; } +table tbody + tbody { border-top: #EFEFEF 2px solid; } -table table table { background-color: #fff; } +table table table { background-color: #FFF; } table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { - background-color: #f6f6f6; + background-color: #F6F6F6; } table.plain tbody > tr:nth-child(odd) > td, @@ -433,7 +447,7 @@ margin on the iframe, cause it breaks stuff. */ .inner { position: relative; width: 80%; - max-width: 700px; + max-width: 780px; margin: 0 auto; } @@ -456,11 +470,15 @@ margin on the iframe, cause it breaks stuff. */ height: 60%; margin-bottom: 5rem; text-align: center; - color: #fff; background: #303538 no-repeat center center; background-size: cover; } +.site-head h1, +.site-head h2 { + color: #FFF; +} + .blog-logo { text-decoration: none; } @@ -477,19 +495,19 @@ margin on the iframe, cause it breaks stuff. */ /* The details of your blog. Defined in ghost/settings/ */ .blog-title { margin: 10px 0 10px 0; - font-size: 5rem; + font-size: 5.6rem; letter-spacing: -1px; - font-weight: bold; - font-family: 'Open Sans', sans-serif; + font-weight: 700; + font-family: "Open Sans", sans-serif; text-shadow: 0 1px 6px rgba(0,0,0,0.1); } .blog-description { margin: 0; font-size: 1.8rem; - line-height: 1.5em; - font-weight: 300; - font-family: 'Noto Serif', serif; + line-height: 1.6em; + font-weight: 400; + font-family: "Noto Serif", serif; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.15); } @@ -525,8 +543,8 @@ margin on the iframe, cause it breaks stuff. */ /* Every post, on every page, gets this style on its
tag */ .post { position: relative; - width:80%; - max-width: 700px; + width: 80%; + max-width: 780px; margin: 4rem auto; padding-bottom: 4rem; border-bottom: #EBF2F6 1px solid; @@ -546,27 +564,19 @@ margin on the iframe, cause it breaks stuff. */ bottom: -5px; left: 50%; margin-left: -5px; - background: #fff; + background: #FFF; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; - box-shadow: #fff 0 0 0 5px; -} - -.post-title { - margin:0; - color: #222; + box-shadow: #FFF 0 0 0 5px; } .post-title a { text-decoration: none; - color: #222; } .post-excerpt p { - margin: 1.6rem 0 0 0; - font-size: 0.9em; - line-height: 1.6em; + margin: 0; } .read-more { @@ -576,7 +586,7 @@ margin on the iframe, cause it breaks stuff. */ .post-meta { display: inline-block; margin: 0 0 5px 0; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 1.5rem; color: #9EABB3; } @@ -604,7 +614,7 @@ margin on the iframe, cause it breaks stuff. */ .user-name { display: block; - font-weight: bold; + font-weight: 700; } .user-bio { @@ -624,7 +634,7 @@ margin on the iframe, cause it breaks stuff. */ .publish-heading { display: block; - font-weight: bold; + font-weight: 700; } .publish-date { @@ -790,11 +800,11 @@ margin on the iframe, cause it breaks stuff. */ bottom: -5px; left: 50%; margin-left: -5px; - background: #fff; + background: #FFF; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; - box-shadow: #fff 0 0 0 5px; + box-shadow: #FFF 0 0 0 5px; } @@ -823,9 +833,9 @@ margin on the iframe, cause it breaks stuff. */ .pagination { position: relative; width: 80%; - max-width: 700px; + max-width: 780px; margin: 4rem auto; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 1.3rem; color: #9EABB3; text-align: center; @@ -854,6 +864,7 @@ margin on the iframe, cause it breaks stuff. */ .page-number { display: inline-block; padding: 2px 0; + min-width: 100px; } .newer-posts { @@ -875,7 +886,7 @@ margin on the iframe, cause it breaks stuff. */ margin: 8rem 0 0 0; padding: 4rem 0; border-top: #EBF2F6 1px solid; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 1.3rem; line-height: 1.7em; color: #BBC7CC; @@ -918,7 +929,7 @@ margin on the iframe, cause it breaks stuff. */ text-align: center; line-height: 2.4rem; border-radius: 50px; - background: #fff; + background: #FFF; transition: box-shadow 0.5s; } @@ -929,7 +940,7 @@ margin on the iframe, cause it breaks stuff. */ position: absolute; top: 9px; left: 9px; - font-weight: bold; + font-weight: 700; transition: color 0.5s ease; } @@ -945,7 +956,7 @@ margin on the iframe, cause it breaks stuff. */ /* CSS tooltip saying "Subscribe!" - initially hidden */ .tooltip { - opacity:0; + opacity: 0; display: inline-block; padding: 4px 8px 5px 8px; position:absolute; @@ -956,24 +967,24 @@ margin on the iframe, cause it breaks stuff. */ line-height: 1em; text-align: center; background: #50585D; - border-radius:20px; + border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: opacity 0.3s ease, top 0.3s ease; } /* The little chiclet arrow under the tooltip, pointing down */ .tooltip:after { - content:""; - border-width:5px 5px 0 5px; - border-style:solid; + content: " "; + border-width: 5px 5px 0 5px; + border-style: solid; border-color: #50585D transparent; - display:block; - position:absolute; - bottom:-4px; - left:50%; - margin-left:-5px; + display: block; + position: absolute; + bottom: -4px; + left: 50%; + margin-left: -5px; z-index: 220; - width:0; + width: 0; } /* On hover, show the tooltip! */ @@ -984,7 +995,69 @@ margin on the iframe, cause it breaks stuff. */ /* ========================================================================== - 10. Media Queries - Smaller than 900px + 10. Media Queries - Smaller than 1600px + ========================================================================== */ + +@media only screen and (max-width: 1600px) { + + .blog-title { + font-size: 5rem; + } + + .blog-description { + font-size: 1.7rem; + line-height: 1.5em; + } + + .post { + font-size: 0.9em; + line-height: 1.65em; + } + + p, ul, ol, dl { + margin: 0 0 1.65em 0; + } + + .post, + .inner, + .tag-archive-header { + max-width: 710px; + } + + h1, h2, h3, + h4, h5, h6 { + margin: 0 0 0.4em 0; + } + + h1 { + font-size: 5rem; + } + + h2 { + font-size: 4rem; + } + + h3 { + font-size: 3.5rem; + } + + h4 { + font-size: 2.8rem; + } + + h5 { + font-size: 2.5rem; + } + + h6 { + font-size: 2rem; + } + +} + + +/* ========================================================================== + 11. Media Queries - Smaller than 900px ========================================================================== */ @media only screen and (max-width: 900px) { @@ -1013,8 +1086,7 @@ margin on the iframe, cause it breaks stuff. */ } .post { - font-size: 0.9em; - line-height: 1.6em; + font-size: 0.8em } .post-template .post { @@ -1025,28 +1097,40 @@ margin on the iframe, cause it breaks stuff. */ padding: 40px 0; } + ol, ul { + padding-left: 2em; + } + h1 { - font-size: 4.8rem; + font-size: 4.5rem; text-indent: -2px; } h2 { - font-size: 3.8rem; + font-size: 3.6rem; } h3 { - font-size: 3.3rem; + font-size: 3.1rem; } h4 { - font-size: 2.8rem; + font-size: 2.5rem; + } + + h5 { + font-size: 2.2rem; + } + + h6 { + font-size: 1.8rem; } } /* ========================================================================== - 11. Media Queries - Smaller than 500px + 12. Media Queries - Smaller than 500px ========================================================================== */ @media only screen and (max-width: 500px) { @@ -1063,13 +1147,17 @@ margin on the iframe, cause it breaks stuff. */ } .post { - width:auto; + width: auto; margin-left: 16px; margin-right: 16px; font-size: 0.8em; line-height: 1.6em; } + p, ul, ol, dl { + margin: 0 0 1.6em 0; + } + .site-head { padding: 10% 0; } @@ -1082,19 +1170,35 @@ margin on the iframe, cause it breaks stuff. */ font-size: 1.5rem; } + h1, h2, h3, + h4, h5, h6 { + margin: 0 0 0.3em 0; + } - h1, h2 { + h1 { font-size: 3rem; - line-height: 1.1em; letter-spacing: -1px; } + h2 { + font-size: 2.6rem; + letter-spacing: 0; + } + h3 { - font-size: 2.8rem; + font-size: 2.4rem; } h4 { - font-size: 2.3rem; + font-size: 2.1rem; + } + + h5 { + font-size: 1.9rem; + } + + h6 { + font-size: 1.7rem; } .post-template .post { @@ -1175,7 +1279,7 @@ margin on the iframe, cause it breaks stuff. */ /* ========================================================================== - 12. Animations + 13. Animations ========================================================================== */ @-webkit-keyframes fade-in-down {