From bf1dd0e9d445e9dbb0ae354107241ea0e4257d2d Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Tue, 27 Aug 2013 19:35:23 +0200 Subject: [PATCH] THE NEXT ONE * Introducing icon fonts * New post footer * Many responsive refinements and enhancements * Few new helpers --- assets/css/screen.css | 239 +++++++++++++++++++++++++++++-------- assets/fonts/icons.dev.svg | 41 +++++++ assets/fonts/icons.eot | Bin 0 -> 2212 bytes assets/fonts/icons.svg | 41 +++++++ assets/fonts/icons.ttf | Bin 0 -> 2056 bytes assets/fonts/icons.woff | Bin 0 -> 2648 bytes post.hbs | 21 ++-- 7 files changed, 285 insertions(+), 57 deletions(-) create mode 100644 assets/fonts/icons.dev.svg create mode 100644 assets/fonts/icons.eot create mode 100644 assets/fonts/icons.svg create mode 100644 assets/fonts/icons.ttf create mode 100644 assets/fonts/icons.woff diff --git a/assets/css/screen.css b/assets/css/screen.css index df3c140..888dc8f 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -30,7 +30,7 @@ body { font-family: 'Open Sans', sans-serif; font-size: 2.0rem; line-height: 1.6em; - color: #50585D; + color: #3A4145; } ::-moz-selection { @@ -82,6 +82,7 @@ h6 { a { color: #4a4a4a; + transition: color ease 0.3s; } a:hover { @@ -262,6 +263,25 @@ table.plain { } } + +/* ========================================================================== + 1. Utility + ========================================================================== */ + +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +.inner { + position: relative; + width: 80%; + max-width: 700px; + margin: 0 auto; +} + + /* ========================================================================== 1. General ========================================================================== */ @@ -283,14 +303,14 @@ table.plain { height: 18px; padding: 4px; position: absolute; - top: 40px; - right: 40px; + top: 43px; + right: 43px; z-index: 950; opacity: 0.4; color: #fff; text-indent: -9999px; text-decoration: none; - background: rgba(0,0,0,0.2) url(../img/ghost.png) 4px 4px no-repeat; + background: rgba(0,0,0,0.15) url(../img/ghost.png) 4px 4px no-repeat; border-radius: 2px; transition: opacity ease 0.5s; } @@ -334,14 +354,16 @@ table.plain { /* Create home icon for blog icon overlay */ #blog-icon:after { display: block; - content: ""; position: absolute; - top: 0; + top: 50%; left: 0; bottom: 0; right: 0; z-index: 950; - background: url(../img/home.png) center center no-repeat; + margin-top: -10px; + content: "\e004"; + color: #fff; + text-align: center; opacity:0; transition: opacity ease 0.5s; } @@ -399,9 +421,9 @@ table.plain { position: relative; width:80%; max-width: 700px; - border-bottom: #DDE6EB 1px solid; - margin: 3rem auto; - padding-bottom: 3rem; + border-bottom: #EBF2F6 1px solid; + margin: 4rem auto; + padding-bottom: 4rem; word-break: break-word; hyphens: auto; } @@ -411,7 +433,7 @@ table.plain { content: ""; width: 7px; height: 7px; - border: #DDE6EB 1px solid; + border: #EBF2F6 1px solid; position: absolute; bottom: -5px; left: 50%; @@ -433,6 +455,8 @@ table.plain { .post-excerpt p { margin: 0; + font-size: 0.9em; + line-height: 1.6em; } .post-content { @@ -440,7 +464,9 @@ table.plain { } .post-meta { - font-size: 1.4rem; + display: inline-block; + margin: 0.8rem 0; + font-size: 1.5rem; color: #9EABB3; } @@ -505,14 +531,6 @@ table.plain { line-height: 1.5em; } -.related-footer { - position: relative; - margin: 6rem 0 0 0; - padding: 6rem 0; - border-top: #DDE6EB 1px solid; - background: #F2F5F7; -} - .subscribe { width: 28px; height: 28px; @@ -528,37 +546,119 @@ table.plain { transition: box-shadow 0.5s; } +.subscribe:before { + color: #BBC7CC; + font-size: 10px; + position: absolute; + top: 9px; + left: 9px; + font-weight: bold; +} + .subscribe:hover { box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; transition: box-shadow 0.25s; } -.related-post { - max-width: 700px; - margin: 0 auto; +.post-footer { + position: relative; + margin: 6rem 0 0 0; + padding: 6rem 0; + border-top: #DDE6EB 1px solid; } -.related-title { - font-size: 2.2rem; - opacity: 0.9; -} - -.related-meta { - font-size: 1.4rem; - color: #9EABB3; -} - -.related-content { +.post-footer h4 { font-size: 1.8rem; - opacity: 0.9; -} - -.related-content p { margin: 0; } +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; +} + +.post-footer .author { + margin-right: 200px; +} + +.post-footer .share { + position: absolute; + top: 0; + right: 0; + width: 160px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #BBC7CC; +} + +.post-footer .share a:hover { + color: #222; +} + +.pagination { + position: relative; + width: 80%; + max-width: 700px; + margin: 1.6em auto; + font-size: 1.4rem; +} + + +/* --- */ + +@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-weight: normal; + font-style: normal; +} + +#blog-icon, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + text-decoration: none; + vertical-align: middle; +} +.icon-feed:before { + content: "\e000"; +} +.icon-twitter:before { + content: "\e001"; + font-size: 1.1em; +} +.icon-google-plus:before { + content: "\e002"; +} +.icon-facebook:before { + content: "\e003"; +} +.icon-home:before { + content: "\e004"; +} + + + @media only screen and (max-width: 900px) { + #ghost { + top: 16px; + right: 16px; + } + #site-head { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -597,6 +697,10 @@ table.plain { line-height: 1.6em; } + .post-template .post { + padding-bottom: 1rem; + } + h1 { font-size: 4.8rem; } @@ -605,28 +709,33 @@ table.plain { font-size: 3.8rem; } + h3 { + font-size: 3.3rem; + } + + h4 { + font-size: 2.8rem; + } + }/* max 900 */ @media only screen and (max-width: 500px) { + .inner, .pagination { + width: auto; + margin-left: 16px; + margin-right: 16px; + } + .post { width:auto; - margin-left: 1.6rem; - margin-right: 1.6rem; + margin-left: 16px; + margin-right: 16px; font-size: 0.8em; line-height: 1.6em; } - #ghost { - top: 16px; - right: 16px; - } - - #blog-icon { - - } - #site-head .wrap { margin: 0 16px -40px 16px; width: auto; @@ -648,5 +757,37 @@ table.plain { letter-spacing: 0; } + h3 { + font-size: 2.8rem; + } + + h4 { + font-size: 2.3rem; + } + + .post-template .post { + padding-bottom: 0; + } + + .post-footer { + padding: 4rem 0; + text-align: center; + } + + .post-footer .author { + margin: 0 0 2rem 0; + padding: 0 0 1.6rem 0; + border-bottom: #DDE6EB 1px dashed; + } + + .post-footer .share { + position: static; + width: auto; + } + + .post-footer .share a { + margin: 1.4rem 0.8rem 0 0.8rem; + } + }/* max 500 */ diff --git a/assets/fonts/icons.dev.svg b/assets/fonts/icons.dev.svg new file mode 100644 index 0000000..2555a3f --- /dev/null +++ b/assets/fonts/icons.dev.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/icons.eot b/assets/fonts/icons.eot new file mode 100644 index 0000000000000000000000000000000000000000..86dfad69a9745fc3c709840ecda7e5fdf0d90924 GIT binary patch literal 2212 zcmds2&2Jl35TDsy@A@lt6M5GOO`Nqiwv(FpW7q4X?gvpIE`_3|X_O{GYHTIWhm_bM zNl`e_1BX`hkP}ptazG$e#Gw)j5(jMNt=CNe^&jAA z-_HDI-h1;-v8l^%8l8`3NKWCDF*>59TJd76#lP@g#uDk;v z{YKL6Q_qYQAO|AhuL-MX&!_a%y$2dinkGCozgAkWb^iVXVb&*>N}KDA2CW3rF6o_1 ztFJ76G57ji0RA|6eRsKBTKMbJ*#Xi$pq^VMfe@t`fC0jN%WGTP-uuJ>e#G!c!2;=r39FUTTDdKM^=AObLy}e2tD9Tj{(0{X*)NiQ!Sap#EAP&1 z&-st7ac1$^IRdQxv7#kSN8ph$shwNsKcRi3j9>5)`#aJcI@# zilLw6%&eK?pr<$D?d|JLCQkArFU9?-E+rN9`P^=gspU_%d7ryb*gD=4^_59Xv;TnQ${cub3l zQV5S>&di=48}J^bj=$bEtWY)sMr@cCjgnHidX*6%7}jd|BnHK0~Ioi?&({q6KD(#az` z>;-dE%pq#H(2!a53==vo994+h|Tj5 zrqa^9*8+`s+vXi);hxQlB>$ehDgt{8-L!6#=cpWY*gOxTaKz>X8na{b4k}RZ+Pp~e zFAtWpmHBFgs@lIw+C+Kj(rSrnTfr)5TNd4*qE`kLbgQ_jkSBh>FgCFcLoi5Zagau( zsSFylM76S2sBSEkRXv$j^QvW$s6I3}JgBELG-Q7ju=n$rf;v^+*j%Yr)J&4D;D2XX z`Jvc6zR^*k_;JV~j{-VSL`k|-St+E`X-3EPX~xF7O%0o7*$VU$&_h6+k9sF{W*I5Q VPWlTLVlpeIUtO(c7&ur5{|5ZDJwyNi literal 0 HcmV?d00001 diff --git a/assets/fonts/icons.svg b/assets/fonts/icons.svg new file mode 100644 index 0000000..6e330ac --- /dev/null +++ b/assets/fonts/icons.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/icons.ttf b/assets/fonts/icons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..7c0ae6582843968e9ea1bf995686d6d2b155dc5a GIT binary patch literal 2056 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 Xc-0&zb;c+O?DEgQGQcG=4uJg!5H`9E literal 0 HcmV?d00001 diff --git a/post.hbs b/post.hbs index 5450429..66d804d 100644 --- a/post.hbs +++ b/post.hbs @@ -20,15 +20,20 @@ {{/post}} - \ No newline at end of file