The 2013-era CSS file for robjwells.com

robjwells.css

/*  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 */
}