453 lines
8.1 KiB
CSS
453 lines
8.1 KiB
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 ul.links img {
|
|
transition: transform 0.25s;
|
|
}
|
|
#header ul.links img[src*=octoright]:hover {
|
|
transform: rotate(-20deg);
|
|
}
|
|
|
|
#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';
|
|
}
|
|
|
|
/* copied from main site */
|
|
.hn-icon {
|
|
display: block;
|
|
|
|
background-color: #ff6600;
|
|
|
|
width: 42px;
|
|
height: 42px;
|
|
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 42px;
|
|
}
|
|
a.hn-icon {
|
|
/* undo link styling */
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
/* we don't want the icons to be too distracting/jarring---the
|
|
focus should be on the resume itself */
|
|
#header ul.links:not(:hover) {
|
|
filter: saturate(25%);
|
|
transition: filter 3s; /* slow fade */
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
|
|
@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.)';
|
|
}
|
|
}
|