Created
May 17, 2014 03:59
-
-
Save fmtarif/9379adf3f2c5aa6a19e4 to your computer and use it in GitHub Desktop.
#css good example of responsive typography site
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family:'PTSerifCustom'; | |
| src:url('../font/PTF55F_W.eot'); | |
| src:url('../font/PTF55F_W.eot?#iefix') format('embedded-opentype'), url('../font/PTF55F_W.woff') format('woff'), url('../font/PTF55F_W.ttf') format('truetype'); | |
| font-weight:normal; | |
| font-style:normal | |
| } | |
| @font-face { | |
| font-family:'PTSerifCustom'; | |
| src:url('../font/PTF56F_W.eot'); | |
| src:url('../font/PTF56F_W.eot?#iefix') format('embedded-opentype'), url('../font/PTF56F_W.woff') format('woff'), url('../font/PTF56F_W.ttf') format('truetype'); | |
| font-style:italic; | |
| font-weight:normal | |
| } | |
| @font-face { | |
| font-family:'PTSerifCustom'; | |
| src:url('../font/PTF75F_W.eot'); | |
| src:url('../font/PTF75F_W.eot?#iefix') format('embedded-opentype'), url('../font/PTF75F_W.woff') format('woff'), url('../font/PTF75F_W.ttf') format('truetype'); | |
| font-style:normal; | |
| font-weight:bold | |
| } | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { | |
| margin:0; | |
| padding:0; | |
| border:0; | |
| font-size:100%; | |
| font:inherit; | |
| vertical-align:baseline | |
| } | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
| display:block | |
| } | |
| strong, b { | |
| font-weight:bold | |
| } | |
| i, em, blockquote { | |
| font-style:italic | |
| } | |
| html, body { | |
| min-height:100% | |
| } | |
| html { | |
| border-top:6px solid #000; | |
| -webkit-text-size-adjust:100%; | |
| -ms-text-size-adjust:100%; | |
| background:#fff; | |
| overflow-y:scroll | |
| } | |
| img { | |
| -ms-interpolation-mode:bicubic; | |
| background:transparent; | |
| border:0 | |
| } | |
| img, embed, object, video { | |
| max-width:100%; | |
| height:inherit; | |
| _width:100% | |
| } | |
| ::-moz-selection { | |
| background:#646464; | |
| color:#fff; | |
| text-shadow:none | |
| } | |
| ::selection { | |
| background:#646464; | |
| color:#fff; | |
| text-shadow:none | |
| } | |
| ::selection:window-inactive { | |
| background:#dcdcdc; | |
| color:#323232 | |
| } | |
| img::selection { | |
| background:transparent | |
| } | |
| img::-moz-selection { | |
| background:transparent | |
| } | |
| body { | |
| font:75%/1.5em"PTSerifCustom", Georgia, serif; | |
| max-width:40.49984em; | |
| color:#000; | |
| margin:0 auto; | |
| padding:1em | |
| } | |
| .ie body { | |
| max-width:32.90612em; | |
| _width:32.90612em; | |
| font-size:100% | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| -moz-font-feature-settings:"liga=1, kern=1"; | |
| -ms-font-feature-settings:"liga" 1, "kern" 1; | |
| text-rendering:optimizeLegibility; | |
| margin-bottom:1.42382em; | |
| font-weight:normal | |
| } | |
| p, ul, ol, dl, blockquote, .content img { | |
| margin-bottom:1.5em; | |
| -webkit-hyphens:auto; | |
| -moz-hyphens:auto; | |
| hyphens:auto | |
| } | |
| abbr { | |
| text-transform:lowercase; | |
| font-variant:small-caps; | |
| letter-spacing:.1em; | |
| cursor:help | |
| } | |
| sub, sup { | |
| vertical-align:baseline; | |
| position:relative; | |
| font-size:65%; | |
| line-height:0 | |
| } | |
| sub { | |
| bottom:-0.25em | |
| } | |
| sup { | |
| top:-0.5em | |
| } | |
| blockquote { | |
| margin:1.5em 0 1.5em 1.80203em; | |
| color:#5a5a5a; | |
| position:relative | |
| } | |
| blockquote:before { | |
| -webkit-font-smoothing:antialiased; | |
| color:#8c8c8c; | |
| font-size:3.60406em; | |
| position:absolute; | |
| font-style:italic; | |
| content:"\201C"; | |
| line-height:1em; | |
| left:-0.60180em; | |
| top:0 | |
| } | |
| ul, ol { | |
| margin-left:1.5em | |
| } | |
| ul { | |
| list-style-type:circle | |
| } | |
| ol { | |
| list-style-type:lower-roman | |
| } | |
| h1 { | |
| margin:1em 0 .46981em; | |
| font:italic 2em/1.125em"Hoefler Text", Baskerville, "PTSerifCustom", Times, "Times New Roman", serif | |
| } | |
| .ie h1 { | |
| font-size:4em | |
| } | |
| h2 { | |
| line-height:1.77777em; | |
| margin-bottom:1em; | |
| font-size:1.2em | |
| } | |
| h3 { | |
| margin:1.7em 0 .85em; | |
| line-height:1.5em; | |
| font-size:1.3em | |
| } | |
| h4 { | |
| line-height:1.12382em; | |
| margin:0 0 1.3em; | |
| font-size:1.2em | |
| } | |
| h5 { | |
| text-transform:uppercase; | |
| letter-spacing:2px; | |
| line-height:1.5em; | |
| margin:0 0 1.5em; | |
| font-size:1em | |
| } | |
| h6 { | |
| font-weight:bold; | |
| margin:0 0 1.5em | |
| } | |
| pre, code { | |
| font:.9375em/1.26562em monospace, monospace; | |
| -webkit-font-smoothing:subpixel-antialiased; | |
| overflow:auto | |
| } | |
| pre { | |
| color:#5a5a5a; | |
| margin-bottom:1.5em; | |
| line-height:1em; | |
| white-space:pre | |
| } | |
| img { | |
| margin:.5em auto 1.5em auto; | |
| display:block | |
| } | |
| .highlight { | |
| border-color:#000; | |
| background:#fffccf; | |
| color:#000; | |
| margin-top:3em; | |
| padding:0 .2em | |
| } | |
| a { | |
| border-bottom:1px solid #c8c8c8; | |
| text-decoration:none; | |
| color:#505050 | |
| } | |
| a:hover { | |
| border-bottom:1px solid #000; | |
| background:rgba(0, 0, 0, .05); | |
| color:#000 | |
| } | |
| a:active { | |
| outline:0 | |
| } | |
| sup a { | |
| text-decoration:none | |
| } | |
| @media print { | |
| html { | |
| border:0 | |
| } | |
| a[href]:after { | |
| content:" (" attr(href)")" | |
| } | |
| a[href^="javascript:"]:after, a[href^="#"]:after { | |
| content:"" | |
| } | |
| } | |
| @media screen and (min-width:15.652em) { | |
| body { | |
| font-size:87.5% | |
| } | |
| h2 { | |
| font-size:1.26562em | |
| } | |
| h3 { | |
| font-size:1.5em | |
| } | |
| h4 { | |
| font-size:1.26562em | |
| } | |
| } | |
| @media screen and (min-width:19.9375em) { | |
| body { | |
| font-size:100%; | |
| padding:1.5em | |
| } | |
| h1 { | |
| font-size:3em | |
| } | |
| .dropcap:first-letter { | |
| font:3.32956em/0.7em Georgia, serif; | |
| -webkit-font-smoothing:antialiased; | |
| margin:.2em .15em .1em 0; | |
| float:left | |
| } | |
| .ie9 .dropcap:first-letter { | |
| margin:.2em .45em 0 0; | |
| line-height:.9em | |
| } | |
| } | |
| @media screen and (min-width:29.9375em) { | |
| body { | |
| padding:1.5em 3em; | |
| max-width:34.3em | |
| } | |
| ul, ol { | |
| margin-left:0 | |
| } | |
| sup.indent { | |
| margin-left:-1.5em | |
| } | |
| } | |
| @media screen and (min-width:38em) { | |
| body { | |
| padding:4.5em 3em 7.59372em | |
| } | |
| h1 { | |
| margin:.97em 0 .8em; | |
| font-size:4em | |
| } | |
| } | |
| @media screen and (min-width:99.9375em) { | |
| body { | |
| max-width:34.43736em; | |
| line-height:1.75em; | |
| font-size:112.5% | |
| } | |
| } | |
| .date { | |
| color:#999 | |
| } | |
| pre code { | |
| display:block; | |
| padding:.5em; | |
| background:#002b36; | |
| color:#839496 | |
| } | |
| pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { | |
| color:#586e75; | |
| font-style:italic | |
| } | |
| pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { | |
| color:#859900 | |
| } | |
| pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { | |
| color:#2aa198 | |
| } | |
| pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id { | |
| color:#268bd2 | |
| } | |
| pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { | |
| color:#b58900 | |
| } | |
| pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title { | |
| color:#cb4b16 | |
| } | |
| pre .deletion { | |
| color:#dc322f | |
| } | |
| pre .tex .formula { | |
| background:#073642 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment