forked from sparanoid/almace-scaffolding
-
Notifications
You must be signed in to change notification settings - Fork 7
/
big-typography-dynasty.html
9 lines (8 loc) · 12.1 KB
/
big-typography-dynasty.html
1
2
3
4
5
6
7
8
9
<!doctype html> <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui"> <meta name="description" content="I make things that don’t suck."> <title>Almace Scaffolding - Big Typography Dynasty</title> <link rel="alternate" href="/feed/" type="application/atom+xml"> <style>.cf:after,.cf:before{display:table;content:''}.cf:after{clear:both}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:2vw;line-height:1.42857143;margin:0 auto;padding:0 16%;color:#000;background:#fff;text-rendering:optimizelegibility;image-rendering:optimizequality}body:before{position:absolute;z-index:-9999;top:0;left:0;width:100%;height:1vmax;content:'';pointer-events:none;opacity:.2;background:#ff4700}.heading{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-weight:700;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}.sub-heading{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:72%;font-weight:400;letter-spacing:.08em;opacity:.5}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button,input,select[multiple],textarea{background-image:none}a,button{-webkit-transition:color .5s ease,border-color .5s ease,background .5s ease,opacity 1.5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease,opacity 1.5s ease;text-decoration:none;color:#000}a:focus,a:hover,button:focus,button:hover{-webkit-transition:color .1s ease,border-color .1s ease,background .1s ease,opacity .1s ease;transition:color .1s ease,border-color .1s ease,background .1s ease,opacity .1s ease;border-bottom:.1em solid}hr,img{border:0}del{text-decoration:line-through}::-moz-selection{color:#ff4700;background:rgba(0,0,0,.02)}::selection{color:#ff4700;background:rgba(0,0,0,.02)}.logo{display:block;width:100%;height:1vmax;margin:0 0 1.4vmax;opacity:0;background:#ff4700}.logo:focus,.logo:hover{border-bottom:none!important;background:#000}.logo h1{height:0;text-indent:-99999em}body:hover .logo{opacity:1!important}.navigation{font-size:50%;font-weight:700;margin:0 0 16vmin;margin-right:-1.1em;margin-left:-1.1em;letter-spacing:.45em;text-transform:uppercase}.navigation li{line-height:2;display:inline-block;list-style:none}.navigation li a{padding:.5em 1.2em}.navigation li a:focus,.navigation li a:hover{color:#ff4700;border:none}.current a{color:#ff4700}body:hover .latest{color:#ff4700!important}.content .status{font-size:75%;font-weight:700;margin:1vmin 0 0}.content .status:before{display:inline-block;width:.8em;height:.8em;margin-right:.8vw;content:'';border-radius:50%;background:rgba(0,0,0,.2)}.content .status.available:before{background:#0cf}.content .status.available a{color:#0cf}.content .status.unavailable:before{background:#f30}.content .status.unavailable a{color:#f30}.content{margin-bottom:16vmin;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;-ms-hyphens:auto}.content:after,.content:before{display:table;content:''}.content:after{clear:both}.content article>:last-child,.content article>:last-child>:last-child,.content article>:last-child>:last-child>:last-child{margin-bottom:0!important}.content a{font-weight:700}.content p{line-height:1.71428571;margin:0 0 1.1em}.content header{padding-bottom:16vmin}.content header h1{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-weight:700;line-height:1.1;margin:0 0 .1em;letter-spacing:-.06em;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;-webkit-font-smoothing:antialiased;-ms-hyphens:auto}.content header h1 svg{display:block;max-width:100%}.content header h1 img,.content header h1 svg{margin-bottom:.3em}.content header .latest-post{font-size:80%;font-weight:400;line-height:1.2;margin-top:16vmin}.content header .latest-post a{font-weight:700}.content header small{display:block;margin:2vmin 0 0;letter-spacing:.1em}.content header+*{margin-top:0!important}.content h3{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:72%;font-weight:400;margin:10vmin 0 1em;letter-spacing:.08em;opacity:.5}.content ol,.content ul{margin:0 0 1em 1.5em}.content ol li,.content ul li{line-height:1.71428571}.content ol{margin-left:1.75em}.content iframe,.content img,.content video{display:block;max-width:100%;margin:0 0 4vmin}.content blockquote{position:relative;margin-bottom:2em}.content blockquote>p{padding-left:.8em;border-left:2px solid}.content blockquote footer:after,.content blockquote footer:before{display:table;content:''}.content blockquote footer:after{clear:both}.content blockquote cite{font-size:90%;font-style:normal;float:right;color:rgba(0,0,0,.8)}.content blockquote cite:before{content:'\2500\2500\00a0'}.content sup{font-size:75%}.content abbr:after{content:' (' attr(title) ')'}.content code,.content pre{font-family:Menlo,monospace;color:#68a}.content pre{font-size:90%;line-height:1.71428571;overflow-x:scroll;margin:0 0 1em;padding:1em;background:rgba(0,136,255,.04)}.content form input{display:block;width:100%;margin:0 0 1vmin;padding:1vmin 0;-webkit-transition:padding .2s ease;transition:padding .2s ease;border:none;border-bottom:1px solid rgba(0,0,0,.2);border-radius:0;outline:0;-webkit-appearance:none}.content form input:focus{padding:1vmin;border-color:#000;background:rgba(0,0,0,.02)}.content input:focus:required:invalid:focus,.content select:focus:required:invalid:focus,.content textarea:focus:required:invalid:focus{border-color:#ff4700;background:rgba(255,71,0,.05);-webkit-box-shadow:none;box-shadow:none}.content table{font-size:90%;width:100%;border-spacing:0;border-collapse:collapse}.content table td,.content table th{padding:.6em}.content table th{text-align:left;border-bottom:2px solid rgba(0,0,0,.06)}.content table td{border-top:1px solid rgba(0,0,0,.04)}[lang=ja],[lang=zh]{text-align:justify}.margin-fix:first-letter{margin-left:-.6em}.tweet{margin-top:10vmin}.largetype{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-size:200%;font-weight:700;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}.browser{position:relative;margin:0 0 4vmin!important;padding-top:20px;border-radius:5px 5px 0 0;background:rgba(0,0,0,.05)}.browser:before{position:absolute;top:6px;left:8px;display:block;width:8px;height:8px;content:'';border-radius:50%;background:rgba(0,0,0,.15)}.browser img{margin:0;-webkit-box-shadow:rgba(0,0,0,.05)0 -1px 0 0;box-shadow:rgba(0,0,0,.05)0 -1px 0 0}.download,.note,.store{padding-left:.8em;border-left:2px solid #ff4700}.footnotes{font-size:90%;font-style:italic}:target [rel=footnote],:target [rev=footnote]{color:#ff4700}article .list{margin:0;list-style:none}article .list li{margin:0 0 1.4vmin}article .list li h2{font-family:'Helvetica Neue',Arial,'Hiragino Sans GB',sans-serif;font-size:330%;font-size:200%;font-weight:700;line-height:1.2;letter-spacing:-.06em;-webkit-font-smoothing:antialiased}article .list li h2 time{font-size:50%;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:0;color:#b3b3b3}article .list .external:focus,article .list .external:hover{border:none}.external{line-height:1}.external span{display:inline-block;width:.2em;height:.2em;margin:0 .1em;-webkit-transition:-webkit-transform .4s ease;transition:transform .4s ease;vertical-align:middle;border-radius:50%;background:#000}.external:focus span,.external:hover span{-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.footer{font-size:72%;padding:0 0 16vmin;text-transform:lowercase}.footer ul li{display:inline}.footer ul li:after{padding:0 .6vw;content:' / ';opacity:.3}.footer ul li:last-child:after{content:none}@media (max-width:1000px){body{font-size:2.8vw;padding-right:8%;padding-left:8%}}@media (max-width:640px){body{font-size:4vw;padding-right:4%;padding-left:4%}article h1 img,article h1 svg{width:100%!important;height:100%!important}.list li h2 .external{display:none}}@media (max-width:400px){body{font-size:5.6vw}}@media (max-device-width:480px),(max-device-width:1024px){body{-webkit-text-size-adjust:none}}.highlight pre{background:rgba(255,211,194,.1)}.highlight .c{font-style:italic;color:#ad9077}.highlight .err{color:#b8281d;background-color:#e3d2d2}.highlight .k,.highlight .o{font-weight:700}.highlight .cm{font-style:italic;color:#ad9077}.highlight .cp{font-weight:700;color:#ad9085}.highlight .c1{font-style:italic;color:#ad9077}.highlight .cs{font-weight:700;font-style:italic;color:#ad9085}.highlight .gd{color:#33160a;background-color:#fdd}.highlight .gd .x{color:#33160a;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#bb160a}.highlight .gh{color:#ad9085}.highlight .gi{color:#33160a;background-color:#dfd}.highlight .gi .x{color:#33160a;background-color:#afa}.highlight .go{color:#a08277}.highlight .gp{color:#775a4e}.highlight .gs{font-weight:700}.highlight .gu{color:#bb9e92}.highlight .gt{color:#bb160a}.highlight .kc,.highlight .kd,.highlight .kp,.highlight .kr{font-weight:700}.highlight .kt{font-weight:700;color:#695a77}.highlight .m{color:#339085}.highlight .s{color:#e42341}.highlight .na{color:#337c71}.highlight .nb{color:#338199}.highlight .nc{font-weight:700;color:#695a77}.highlight .no{color:#337c71}.highlight .ni{color:#991671}.highlight .ne,.highlight .nf{font-weight:700;color:#ad160a}.highlight .nn{color:#775a4e}.highlight .nt{color:#331671}.highlight .nv{color:#337c71}.highlight .ow{font-weight:700}.highlight .w{color:#c9aba0}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#339085}.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#e42341}.highlight .sr{color:#339029}.highlight .s1{color:#e42341}.highlight .ss{color:#ad1666}.highlight .bp{color:#ad9085}.highlight .vc,.highlight .vg,.highlight .vi{color:#337c71}.highlight .il{color:#339085}ul.list.has-content>li{margin-bottom:14vmin}ul.list.has-content>li h2{margin-bottom:2vmin}.flexslider ul{margin:0;list-style:none}.flexslider li{display:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flexslider li:first-child{display:block}.flexslider li .flex-caption{font-weight:700;margin:-3vmin 0 3vmin}.no-js .flexslider ul li:first-child{display:block}</style> <meta name="description" content="My site is now more responsive with big typography. I know most of the designers are still making their webpages with font size from 12px to 14px. But it’s time..."> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@sparanoid"> <meta name="twitter:creator" content="@tunghsiao"> <meta name="twitter:url" content="http://amsf.github.io/big-typography-dynasty.html"> <meta name="twitter:title" content="Big Typography Dynasty"> <meta name="twitter:description" content="
My site is now more responsive with big typography. I know most of the designers are still making their webpages with font size from 12px to 14px. But it’s time to use bigger typography now. The Big Typography Dynasty has come.…
"> <header> <a href="/" class="logo" accesskey="x"> <h1>Almace Scaffolding</h1> </a> </header> <nav class="navigation"> <ul> <li> <a href="/"> Home </a> </li> <li> <a href="/about/"> About </a> </li> </ul> </nav> <main class="content"> <article> <header> <h1> Big Typography Dynasty </h1> <small>By <span rel="author">Tunghsiao Liu</span> on <time datetime="2012-07-14T00:00:00+08:00">Jul 14, 2012</time></small> </header> <p>My site is now more responsive with big typography. I know most of the designers are still making their webpages with font size from 12px to 14px. But it’s time to use bigger typography now. The Big Typography Dynasty has come.</p> </article> </main> <footer class="footer"> <ul> <li><a href="/">Almace Scaffolding</a></li> <li><a href="https://github.com/sparanoid/almace-scaffolding/" title="Almace Scaffolding">amsf</a></li> <li><a href="/feed/" title="Feed - Atom (The Atom Syndication Format)">Atom Feed</a></li> </ul> <p style="display:none"> <a href="https://plus.google.com/+tunghsiaoliu?rel=author" rel="author">Google+</a> </p> </footer>
<!--
© Tunghsiao Liu.
almace-scaffolding - v0.0.11 (06-09-2014)
MIT - http://github.com/sparanoid/almace-scaffolding/blob/master/LICENSE
-->