thoughts/docs/about/resume/style.css

/* Mike Gerwitz Résumé stylesheet */
/* Some colors are part of the Tango Desktop Project's color palette */
/* CC-BY-SA */

@font-face {
  font-family: Open Sans;
  src: url('/fonts/OpenSans-Regular.woff');
}

html {
  background-color: #f8f8f7;
  height:           100%;
}

body {
  background-color: white;
  border-width:     0px 1px;
  border-style:     solid;
  border-color:     #d3d7cf;

  width:       750px;
  margin:      0px auto 0px auto;
  padding:     0px 50px;
  height:      100%;
  min-height:  100%;
  height:      auto !important;

  font-family: 'Open Sans', 'Liberation Sans', FreeSans, sans-serif;
  font-size:   14px;
}

a, a:active, a:link {
  text-decoration: none;
  border-bottom:   1px dotted #204a87;
  color:           #204a87;
}
a:visited {
  color:               #3465a4;
  border-bottom-style: none;
}
a:hover {
  border-bottom-style: solid;
}

a.title {
  font-style: italic;
}

img {
  border:  0em;
  margin:  0em;
  padding: 0em;
}

h1, h2, h3 {
  font-family: 'URW Gothic L', 'Avant Garde', sans-serif;
  font-weight: normal;
}

h1 { font-size: 2.2em; }

#content h2 {
  color:         black;
  border-bottom: 1px solid #2e3436;
  margin-bottom: 0.5em;
  font-size:     1.4em;
}

#content h2:not(:first-child) {
  margin-top: 1em;
}

#content p,
#content dl > dd.desc {
  text-align: justify;
  line-height: 1.5;
}

#content dl > dt {
  font-weight: bold;
  font-size:   1em;
  float:       left;
  clear:       left;
}

#content dl > dt a {
  color: inherit;
}

#content dl > dd.type {
  font-weight: bold;
  margin:      0em 0.5em;
  padding:     0em;
  float:       right;
}
#content dl > dd.type::after {
  content: ',';
}

#content dl > dd.period {
  font-weight: bold;
  margin:      0em;
  float:       right;
}
#content dl > dd.desc {
  clear:  both;
  margin: 0em 0em 1em 1em;
}
#content dl > dd.desc blockquote {
  margin: 0.5em 1em;
}

#content dl > dd.desc > ul.detail-list,
#content dl > dd.desc > ul.detail-list ul {
  display:    inline;
  list-style: none;
  margin:     0px;
  padding:    0px;
}
#content dl > dd.desc > ul.detail-list ul,
#content dl > dd.desc > ul.lang {
  font-size:  0.9em;
}
#content dl > dd.desc > ul.lang::before {
  display: inline;
  font-weight: bold;
  content: 'Languages/Tools: ';
}

/* using li nodes rather than ul itself rids extra whitespace */
#content dl > dd.desc > ul.detail-list ul > li:first-child::before {
  content: '(';
}
#content dl > dd.desc > ul.detail-list ul > li:last-child::after {
  content: ')';
}

#content dl > dd.desc > ul.detail-list li {
  display: inline;
  padding: 0px;
}

#content dl > dd.desc > ul.detail-list > li:not(:last-child)::after {
  display: inline;
  content: '; ';
  word-spacing: 0.25em; /* instead of padding; strips whitespace from */
                        /* beginning and end of line */
}
#content dl > dd.desc > ul.detail-list ul > li:not(:last-child)::after {
  display: inline;
  content: ', ';
}

#header {
  padding-top: 50px;
}

#header div.leftcol {
  float: left;
  clear: left;
}

#header h1.name {
  margin:  0em;
  padding: 0em;
}

#header h2.name-subline {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: normal;
  color: #666f63;

  margin-top: 0px;
  margin-bottom: 2em;
}

#header p.name-subline {
  color:       #202020;
  margin:      0.25em 0em 0em 0em;
  font-size:   1.1em;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#header .name-subline a,
#header .name-subline a:active,
#header .name-subline a:visited,
#header .name-subline a:link {
  border: none;
  color:  inherit;
}
#header .name-subline a:hover {
  border-bottom: 1px dotted #204a87;
}

#header ul.links {
  position: fixed;
  width:    50px;
  right:    0px;
  top:      60px;

  list-style: none;
  margin:     0px;

  /* see @media layouts */
  transition: filter 0.15s;  /* quick fade in */

}
#header ul.links li {
  margin:  0px;
  padding: 0px 0px 0.5em 0px;
  float:   left;
}
#header ul.links a {
  border:  none;
}

#header #infobox {
  float:      right;
  text-align: right;
  margin:     0px 0px 1em 0px;
}

#header #infobox address {
  font-style: normal;
}

#header #infobox dl.contact dt {
  font-weight:   bold;
  display:       inline-block;
  float:         left;
  clear:         left;
  margin-bottom: 0.2em;
}
#header #infobox dl.contact dd {
  margin:        0px 0px 0px 1em;
  clear:         right;
  float:         right;
  margin-bottom: 0.2em;
}

#footer {
  text-align: center;
}
#footer p.copyright {
  margin:    0.7em 0em 0em 0em;
  font-size: 0.8em;
  display:   inline-block;
}

#misc a {
  border: none;
}

.print-only {
  display: none;
}

.clear {
  clear: both;
}
.clear.head {
  border-top: 1px solid #d3d7cf;
  margin:     0px 0px 1em 0px;
}

#gnuinside {
  position: absolute;
  display:  block;

  top:    0px;
  right:  0px;
  width:  50px;
  height: 50px;
}

.nocss,
.phony {
  display: none;
}

/* makes it at least a little harder for scrapers */
.phone {
  display: inline-block;
}
.phone::before {
  content: '(716) ';
}
.phone::after {
  content: '-7118';
}


/* right icons start to overlap with page margins */
@media screen and (max-width: 970px) {
  html {
    background-color: white;
  }

  /* page completely white, full width, side icons */
  body {
    border: none;

    width:   auto;
    padding: 0px 2em 0px 3em;
    margin:  0px 50px 0px 0px;
  }

  /* now that icons are a part of the main content,
     make them blend better (otherwise the vibrant color
     is too jarring/distracting) */
  #header ul.links:not(:hover) {
    filter:     saturate(25%);
    transition: filter 3s;  /* slow fade */
  }
}


@media screen and (max-width: 800px) {
  /* entering what I consider to be a mobile view
     (or ancient screen resolution, or old person)*/
  #footer::before {
    display: block;

    margin: 0px 3em;

    font-size: 0.8em;
    content:
    '(This is a mobile/low-res view; please increase your screen resolution to view the resume as originally intended.)';
  }

  /* right-hand margin removed */
  body {
    padding: 0px 2em;
    margin: 0px;
  }

  #header {
    padding-top: 2em;
  }

  /* move side icons under name */
  #header ul.links {
    position: inherit;
    float: left;
    padding: 0px;
    width: auto;
  }

  #header ul.links li:not(:first-child) {
    margin-left: 1em;
  }

  /* make room for page fold */
  #header #infobox address {
    margin-right: 50px;
  }
}


/* infobox about to collide with name */
@media screen and (max-width: 640px) {
  body {
    padding: 0px 1em;
  }

  #header {
    padding-top: 1em;
  }

  /* infobox still on right, ... */
  #header #infobox {
    display: inline-block;

    width: auto;
    clear: left;
  }

  /* ... but forced below header */
  #header div.leftcol {
    display: block;
  }

  #header #infobox address {
    margin-right: 0px;
  }
}


/* infobox about to collide with icons below name */
@media screen and (max-width: 540px) {
  #header ul.links {
    display: block;

    width:  auto;
    margin: 0px auto;

    float: right;
    clear: both;
  }

  /* in case we ever get too close to page fold */
  #header div.leftcol {
    padding-right: 50px;
  }
}


/* 320 is the lowest resolution that should really be entertained */
@media screen and (max-width: 310px) {
  #objective > p:first-of-type::after {
    content: 'Seeking potential employers with higher screen resolutions that will render my resume sanely.';
  }

  #summary > p:first-of-type::before {
    display:       block;
    margin-bottom: 1em;

    content: 'I love talking about myself, but you really haven\'t given me much space to do so!  How about increasing that resolution of yours?  I mean, don\'t get me wrong; it\'s still legible.  Torture your eyeballs if you wish.';
  }

  #footer::before {
    content: '(This is rendered at a ridiculously low resolution.  Snarky remarks added.  Please increase your resolution.)';
  }
}