Created
October 6, 2015 00:13
-
-
Save robjwells/9026d9da9c19c5f24ad7 to your computer and use it in GitHub Desktop.
The 2013-era CSS file for robjwells.com
This file contains 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
/* robjwells.com | |
By Rob Wells, 2013 | |
Contents | |
> Reset | |
> Font import | |
> Grids | |
> Wrapper | |
> FOUT hide | |
> Type | |
> Symbol basics | |
> Links | |
> Basic elements | |
> Tables | |
> Navigation | |
> Main site nav and social | |
> Pagination | |
> Flag styles | |
> "Pull" classes | |
> Site header and footer | |
> Post basics | |
> Tag list | |
> Photo post | |
> Link post | |
> Webfont weight override | |
> Syntax highlighting | |
*/ | |
/*! Reset */ | |
/* Based on Eric Meyer's | |
http://meyerweb.com/eric/tools/css/reset/ | |
*/ | |
html, body, div, span, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, address, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strong, sub, sup, var, | |
b, u, i, | |
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, header, | |
menu, nav, output, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/*! Font import */ | |
@font-face { | |
font-family: "SSSocial"; | |
src: url('fonts/ss-social-circle.eot'); | |
src: url('fonts/ss-social-circle.eot?#iefix') format('embedded-opentype'), | |
url('fonts/ss-social-circle.woff') format('woff'), | |
url('fonts/ss-social-circle.ttf') format('truetype'), | |
url('fonts/ss-social-circle.svg#SSSocialCircle') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: "SSStandard"; | |
src: url('fonts/ss-standard.eot'); | |
src: url('fonts/ss-standard.eot?#iefix') format('embedded-opentype'), | |
url('fonts/ss-standard.woff') format('woff'), | |
url('fonts/ss-standard.ttf') format('truetype'), | |
url('fonts/ss-standard.svg#SSStandard') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/*! FOUT hide */ | |
.wf-loading { | |
visibility: hidden; | |
/* | |
This class is replaced by .wf-active or .wf-inactive, | |
so no need to reverse the visibility rule in CSS | |
*/ | |
} | |
/*! Grids */ | |
.line{overflow:hidden;} | |
/* Base: < 560px */ | |
.g-unit{float:left;} | |
.g-unitRight{float:right;} | |
.g-lastUnit{float:none;width:auto;overflow:hidden;} | |
.g-20{width:20%;} | |
.g-40{width:40%;} | |
.g-60{width:60%;} | |
.g-80{width:80%;} | |
.g-25{width:25%;} | |
.g-50{width:50%;} | |
.g-75{width:75%;} | |
.g-33{width:33%;} | |
.g-66{width:66%;} | |
.g-100{float:none;} | |
/* Mid-sized screens: 560px <= x <= 799px */ | |
@media screen and (min-width: 35em) and (max-width: 49.9375em) { | |
.g1-unit{float:left;} | |
.g1-unitRight{float:right;} | |
.g1-lastUnit{float:none;width:auto;overflow:hidden;} | |
.g1-20{width:20%;} | |
.g1-40{width:40%;} | |
.g1-60{width:60%;} | |
.g1-80{width:80%;} | |
.g1-25{width:25%;} | |
.g1-50{width:50%;} | |
.g1-75{width:75%;} | |
.g1-33{width:33%;} | |
.g1-66{width:66%;} | |
.g1-100{width:100%;float:none;} | |
} | |
/* Large screens: 800px <= x */ | |
@media screen and (min-width: 50em) { | |
.g2-unit{float:left;} | |
.g2-unitRight{float:right;} | |
.g2-lastUnit{float:none;width:auto;overflow:hidden;} | |
.g2-20{width:20%;} | |
.g2-40{width:40%;} | |
.g2-60{width:60%;} | |
.g2-80{width:80%;} | |
.g2-25{width:25%;} | |
.g2-50{width:50%;} | |
.g2-75{width:75%;} | |
.g2-33{width:33%;} | |
.g2-66{width:66%;} | |
.g2-100{width:100%;float:none;} | |
} | |
/*! Wrapper */ | |
html, body { height: 100%; } | |
.wrapper { | |
max-width: 65em; | |
min-height: 100%; | |
margin: 0 auto; | |
padding: 1.375em 1em 0; | |
background-color: #FAFAFA; | |
} | |
@media screen and (min-width: 35em) { | |
.wrapper { | |
padding: 1.375em 2.5em 0; | |
} | |
} | |
/*! Type */ | |
body { | |
font-family: Georgia, serif; | |
font-size: 100%; /* 16 */ | |
line-height: 1.375; /* 22 / 16 */ | |
-webkit-text-size-adjust: none; /* iPhone rotation text-size fix */ | |
-ms-text-size-adjust: none; | |
background-color: #7A8A99; | |
} | |
.wf-active body { | |
/* Apply Rooney if Typekit fonts load */ | |
font-family: "rooney-web", Georgia, serif; | |
} | |
h1, .h1 { | |
font-size: 2.625em; /* 42 on 44 and 22*/ | |
line-height: 1.0476190476; | |
margin-bottom: 0.5238095238em; | |
} | |
/* Post heading level */ | |
h2, .h2 { | |
font-size: 2.25em; /* 36 on 44 and 22 */ | |
line-height: 1.2222222222; | |
margin-bottom: 0.6111111111em; | |
} | |
/* Adjustments for small screens */ | |
@media screen and (max-width: 35em) { | |
h2, .h2 { | |
font-size: 1.25em; /* 20 on 22 and 22*/ | |
line-height: 1.1; | |
margin-bottom: 1.1em; | |
} | |
} | |
/* Within-post headings */ | |
h3, .h3, | |
h4, .h4 { | |
font-size: 1.125em; /* 18 on 22 and 22*/ | |
line-height: 1.2222222222; | |
margin-bottom: 1.2222222222em; | |
} | |
h3, .h3 { | |
font-weight: bold; | |
} | |
h4, .h4 { | |
font-style: italic; | |
} | |
h5, .h5, | |
h6, .h6 { | |
margin-bottom: 1.375em; | |
/* Combines with base sizes for 16 on 22 and 22 */ | |
} | |
h5, .h5 { | |
font-weight: bold; | |
} | |
h6, .h6 { | |
font-style: italic; | |
} | |
p { | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
max-width: 35em; /* 560 / 16 */ | |
} | |
em, i { | |
font-style: italic; | |
} | |
strong, b { | |
font-weight: bold; | |
} | |
code, small, | |
blockquote p, | |
article aside p { | |
font-size: 0.875em; /* 14 / 16 */ | |
} | |
code, small { | |
line-height: 1; /* Prevent height of content box exceeding p line-height */ | |
} | |
code { | |
font-family: "Source Code Pro", Monaco, Courier, monospace; | |
} | |
small { | |
color: #7A8A99; | |
} | |
blockquote p, article aside p { | |
line-height: 1.5714285714; /* 22 / 14 */ | |
max-width: 37.5em; /* 525 / 14 */ | |
} | |
/*! Symbol basics */ | |
.symbols, .sym-add::before, .sym-add::after { | |
/* .symbols for keywords, .sym-add for pre/suffix */ | |
color: #7A8A99; | |
font-style: normal; | |
font-weight: normal; | |
text-decoration: none; | |
text-rendering: optimizeLegibility; | |
white-space: nowrap; | |
-moz-font-feature-settings: "liga=1"; | |
-moz-font-feature-settings: "liga"; | |
-ms-font-feature-settings: "liga" 1; | |
-o-font-feature-settings: "liga"; | |
font-feature-settings: "liga"; | |
-webkit-font-smoothing: antialiased; | |
} | |
.sym-social { /* Extends .symbols */ | |
font-family: SSSocial, "SS Social"; | |
} | |
.sym-standard { /* Extends .symbols */ | |
font-family: SSStandard, "SS Standard" | |
} | |
.sym-add::before, .sym-add::after { | |
font-family: SSStandard, "SS Standard"; | |
font-size: 0.75em; /* 12 / 16 */ | |
} | |
.sym-add::before { | |
padding-right: 0.6666666667em; /* 8 / 12 */ | |
padding-left: 0.3333333333em; /* 4 / 12 */ | |
} | |
.sym-add::after { | |
padding-left: 0.6666666667em; /* 8 / 12 */ | |
padding-right: 0.3333333333em; /* 4 / 12 */ | |
} | |
/*! Links */ | |
a:link, | |
a::before, | |
a::after { | |
color: #1369BF; | |
-webkit-transition: color ease-out 0.3s; | |
-moz-transition: color ease-out 0.3s; | |
-ms-transition: color ease-out 0.3s; | |
-o-transition: color ease-out 0.3s; | |
transition: color ease-out 0.3s; | |
} | |
a:visited { | |
color: #3D6B99; | |
} | |
a:focus, a:hover { | |
color: #1369BF; | |
background-color: #E7EFF8; | |
text-decoration: none; | |
} | |
a:focus { | |
outline: thin dotted; | |
} | |
a:active { | |
color: #177EE6; | |
} | |
.muted-link a:link, .muted-link a:visited { | |
color: #7A8A99; | |
text-decoration: none; | |
} | |
.muted-link a:hover, | |
.muted-link a:hover::before, | |
.muted-link a:hover::after, | |
.muted-link a:focus, | |
.muted-link a:focus::before, | |
.muted-link a:focus::after { | |
color: #1369BF; | |
background-color: transparent; | |
} | |
.muted-link a:active, | |
.muted-link a:active::before, | |
.muted-link a:active::after { | |
color: #177EE6; | |
} | |
.muted-link .rss a:hover, | |
.muted-link .rss a:focus { | |
color: #D97716; | |
} | |
.muted-link .rss a:active { | |
color: #FF8C19; | |
} | |
/* Keep copyright links grey */ | |
small a:link, | |
small a:visited, | |
small a:focus, | |
small a:hover, | |
small a:active { | |
color: inherit; | |
background-color: inherit; | |
} | |
/*! Basic elements */ | |
blockquote, q { | |
font-style: italic; | |
} | |
blockquote em, blockquote strong { | |
font-style: normal; | |
} | |
blockquote, | |
article aside { | |
background-color: #F0F1F2; | |
padding: 0.6875em 1em; /* 11 | 16 */ | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
} | |
blockquote p:last-child, | |
article aside p:last-child { | |
margin-bottom: 0; | |
} | |
ul, ol, dl { | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
margin-left: 2em; /* 32 / 16 */ | |
/* Horizontally out of alignment, | |
but necessary to fit two-digit | |
numbers. Too narrow for >100. | |
Applied to all list styles for | |
some sense of consistency. */ | |
} | |
ul { | |
list-style: square outside; | |
} | |
ol { | |
list-style: decimal outside; | |
} | |
li { | |
max-width: 35em; | |
} | |
dt { | |
font-weight: bold; | |
} | |
dd { | |
margin-left: 1em; /* 16 */ | |
margin-bottom: 1.375em; /* 22 */ | |
} | |
img, video { | |
max-width: 100%; | |
height: auto; /* To prevent any kind of warping */ | |
border: thin solid #7A8A99; | |
} | |
.pic { | |
max-width: 100%; | |
/* Apply to paragraphs containing imgs */ | |
} | |
.no-squish { | |
/* Swap img max-width resizing for scroll */ | |
overflow: auto; | |
} | |
.no-squish img { | |
max-width: none; | |
} | |
.no-border { | |
border: none; | |
} | |
ins, del { | |
padding: 0 0.25em; /* 4 / 16 */ | |
/* Just to give some horizontal | |
breathing room. No vertical | |
padding as it can cause | |
some oddities. */ | |
} | |
ins { | |
text-decoration: none; | |
background-color: #E8F3EC; | |
} | |
del { | |
background-color: #F8EAEB; | |
} | |
hr { | |
margin: 1.375em 20%; | |
border: none; | |
border-top: 1px solid #7A8A99; | |
} | |
/*! Tables */ | |
table { | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
width: 100%; | |
} | |
@media screen and (max-width: 35em) { | |
/* Restrain table width and force | |
overflow on smaller screens. */ | |
table { | |
table-layout: fixed; | |
} | |
} | |
td, th { | |
width: auto; | |
padding: 0.6875em; /* 11 / 16 */ | |
overflow: auto; | |
} | |
th { | |
font-weight: bold; | |
text-align: left; | |
background-color: #F0F1F2; | |
} | |
tr { | |
border-bottom: 1px solid #959DA6; | |
} | |
tbody tr:nth-child(even) { | |
background-color: #F6F6F6; | |
} | |
table caption { | |
font-style: italic; | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
} | |
.tab-figures { | |
text-align: right; | |
} | |
/*! Navigation */ | |
/*! Main site nav and social */ | |
.head-nav ul { | |
margin-left: 0; /* Clear ul style */ | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
} | |
.head-nav ul li { | |
display: inline; | |
white-space: normal; | |
margin-right: 0.5em; /* 8 / 16 */ | |
} | |
@media screen and (max-width: 35em) { | |
.social-links { | |
display: none; | |
} | |
} | |
@media screen and (min-width: 35em) and (max-width: 50em) { | |
.head-nav ul { | |
text-align: right; | |
} | |
.head-nav ul li:last-child { | |
margin-right: 0; | |
} | |
} | |
@media screen and (min-width: 50em) { | |
.head-nav ul { | |
margin: 0 1em 1.375em; /* 0 | 16 | 22 */ | |
text-align: left; | |
} | |
.head-nav ul li { | |
display: block; | |
} | |
.social-links ul li { | |
display: inline; | |
} | |
} | |
/*! Pagination */ | |
.pagination ul { | |
margin-left: 0; /* Clear ul style */ | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
list-style: none; | |
} | |
.pg-new { | |
text-align: right; | |
} | |
.pg-old a::before { | |
content: "\25C5"; /* Left arrow, use with .sym-add */ | |
} | |
.pg-new a::after { | |
content: "\25bb"; /* Right arrow, use with .sym-add */ | |
} | |
/*! Flag styles */ | |
.flag { | |
display: block; | |
border-left-style: solid; | |
border-left-width: 0.5em; /* 8 / 16 */ | |
padding: 0.6875em 0.5em; /* 11 | 8 */ | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
position: relative; | |
max-width: 100%; /* To handle single p flags */ | |
} | |
.flag::after { | |
position: absolute; | |
top: 0.85em; /* Visually vertically centre with text */ | |
right: 0.85em; | |
font-size: 1em; | |
} | |
.flag p:first-child, .flag h2:first-child, p.flag { | |
padding-right: 2em; /* 32 / 16 | To clear symbol */ | |
} | |
.flag p:last-child { | |
margin-bottom: 0; /* Prevent space at end */ | |
/* link post head h2 has no margin through .post-title */ | |
} | |
.flag-generic { | |
/* Extends .flag */ | |
/* Blue */ | |
border-left-color: #1369BF; | |
background-color: #E7EFF8; | |
} | |
.flag-generic::after { | |
color: #1369BF; | |
} | |
.flag-info::after { | |
/* Extends .flag-generic */ | |
content: "\2139"; /* 'i' in a circle */ | |
} | |
.flag-download::after { | |
/* Extends .flag-generic */ | |
content: "\EB01"; /* Download symbol */ | |
} | |
.flag-music::after { | |
/* Extends .flag-generic */ | |
content: "\266B"; /* Double, beamed quaver */ | |
} | |
.flag-update { | |
/* Extends .flag */ | |
/* Green */ | |
border-left-color: #1D8E43; | |
background-color: #E8F3EC; | |
} | |
.flag-update::after { | |
color: #1D8E43; | |
content: "\23F2"; /* Clock */ | |
} | |
.flag-warning { | |
/* Extends .flag */ | |
/* Red */ | |
border-left-color: #BD3338; | |
background-color: #F8EAEB; | |
} | |
.flag-warning::after { | |
color: #BD3338; | |
content: "\26A0"; /* Warning triangle */ | |
} | |
/*! Pull classes */ | |
@media screen and (min-width: 35em) { | |
/* To be used with grid classes to | |
move elements to the size in the | |
medium and large layouts */ | |
.pull-left { | |
margin-right: 2em; /* 32 / 16 */ | |
clear: left; | |
} | |
.pull-right { | |
margin-left: 2em; /* 32 / 16 */ | |
clear: right; | |
} | |
} | |
/*! Site header and footer */ | |
.site-title { | |
font-size: 1.375em; /* 22 on 22 */ | |
line-height: 1; | |
} | |
.site-title, .site-byline { | |
margin-bottom: 0; | |
} | |
.site-title-link:link, | |
.site-title-link:visited, | |
.site-title-link:active, | |
.post-title-link:link, | |
.post-title-link:visited, | |
.post-title-link:active { | |
color: black; | |
text-decoration: none; | |
} | |
.site-avatar { | |
height: 4.125em; /* (22 * 3) / 16 */ | |
margin-right: 0.25em; /* 4 / 16 */ | |
display: block; | |
float: left; | |
border: none; | |
} | |
@media screen and (min-width: 50em) { | |
.site-byline, .site-avatar { | |
margin: 0 0 1.375em; /* 0 | 0 | 22 */ | |
} | |
.site-avatar { | |
height: 8.25em; /* (22 * 6) / 16 */ | |
float: none; | |
} | |
} | |
.site-footer { | |
clear: both; | |
} | |
/*! Post basics */ | |
.post { | |
border-bottom: thin solid #7A8A99; | |
margin-bottom: 4.125em; /* 66 / 16 */ | |
} | |
.post-title { | |
margin-bottom: 0; | |
} | |
.post-footer { | |
clear: both; | |
} | |
/*! Tag list */ | |
.post-tags { | |
margin-left: 0; /* Clear ul style */ | |
padding-left: 1.5em; /* 24 / 16 | (sym-add: 4 + 12 + 8) */ | |
} | |
.post-tags::before { | |
content: "\E100"; /* Luggage tag */ | |
margin-left: -2em; /* 24 / 12 | (sym-add: 4 + 12 + 8) */ | |
} | |
.post-tags li { | |
display: inline-block; | |
/* margin-right: -4px; */ /* Disgusting spacing fix */ | |
/* Commented out for now because the bug went away. */ | |
/* It's a bit of a weird one. */ | |
} | |
.post-tags li:first-child { | |
margin-left: -4px; /* Disgusting spacing fix */ | |
} | |
.post-tags li::after { | |
content: "\2022"; /* Bullet */ | |
color: #7A8A99; | |
padding: 0 0.5em; /* 8 / 16 */ | |
} | |
.post-tags li:last-child::after { | |
content: ""; | |
} | |
/*! Photo post */ | |
.post-mainphoto { | |
width: 100%; | |
display: block; | |
margin-bottom: 1.375em; /* 22 / 16 */ | |
} | |
.post-mainphoto a { | |
background-color: transparent; | |
} | |
.post-mainphoto-caption { | |
padding-right: 1em; | |
} | |
.photo-post-footer { | |
clear: right; | |
} | |
/*! Link post */ | |
/* Most styling handled by .flag and .flag-generic, | |
with a little special-casing here to account for | |
the larger font-size of the h2 */ | |
.post-mainlink { | |
padding-left: 0.2222222222em; /* 8 / 36 */ | |
} | |
.post-mainlink::after { | |
font-size: 1em; /* 36 or 20, depending */ | |
position: absolute; | |
top: 0.4444444444em; /* 16 / 36 */ | |
right: 0.4444444444em; | |
color: #1369BF; | |
content: "\1F517"; /* Chain link */ | |
} | |
@media screen and (max-width: 35em) { | |
.post-mainlink::after { | |
top: 0.7em; /* Visually centred */ | |
right: 0.4em; /* 8 / 20 */ | |
} | |
} | |
/*! Webfont bold override */ | |
.wf-active h3, | |
.wf-active .h3, | |
.wf-active h5, | |
.wf-active .h5, | |
.wf-active strong, | |
.wf-active b, | |
.wf-active dt, | |
.wf-active th { | |
font-weight: 500; | |
} | |
/*! Syntax highlighting */ | |
pre code { | |
display: block; | |
overflow: auto; | |
padding: 0.7857142857em; | |
margin-bottom: 1.5714285714em; | |
background-color: #F0F1F2; | |
font: normal | |
normal | |
normal | |
0.875em / 1.5714285714 /* 14 on 22 */ | |
"Source Code Pro", Monaco, Courier, monospace; | |
} | |
.code-link { | |
font-family: Georgia, serif; | |
} | |
.wf-active .code-link { | |
font-family: "rooney-web", Georgia, serif; | |
} | |
pre .keyword, | |
pre .tag, | |
pre .tag .title, | |
pre .class, | |
pre .css .rule .keyword, | |
pre .subst, | |
pre .request, | |
pre .status { | |
color: #0D60B7; | |
} | |
pre .number, | |
pre .hexcolor, | |
pre .ruby .constant { | |
color: #BD3338; | |
} | |
pre .string, | |
pre .regexp, | |
pre .attribute { | |
color: #1D8E43; | |
} | |
pre .decorator, | |
pre .tag .value { | |
color: #437BA8; | |
} | |
pre .id, | |
pre .title { | |
color: #1D97BF; | |
} | |
pre .class .title { | |
color: #336; | |
} | |
pre .variable { | |
color: #B30086; | |
} | |
pre .prompt, | |
pre .symbol, | |
pre .ruby .symbol .string { | |
color: #8A26AB; | |
} | |
pre .built_in { | |
color: #006080; | |
} | |
pre .pi { | |
color: #925211; | |
} | |
pre .line-number, | |
pre .comment, | |
pre .template_comment, | |
pre .preprocessor, | |
pre .doctype, | |
pre .shebang, | |
pre .cdata { | |
color: #7A8A99; | |
} | |
pre .line-number { | |
font-size: 0.8571428571em; /* 12 / 14 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment