/* colors ========================================================================= */ .title-section { /* this is a fallback for wkhtmltopdf which doesn't understand gradients */ background: hsl(207, 33%, 31%); background: linear-gradient( 90deg, hsl(207, 33%, 12%) 0%, hsl(207, 33%, 31%) 50%, hsl(207, 33%, 65%) 100%); } h2 { color: hsl(207, 33%, 31%); } h3 { color: hsl(206, 33%, 25%); } a[href] { color: hsl(207, 67%, 25%); } body { color: #000; background-color: #fff; } .title { color: #fff; } /* dark mode colors ========================================================================= */ /* unlike in light mode, dark mode `h3`s look better with the same amount * of contrast as `h2`s for some reason */ .dark h2, .dark h3 { color: hsl(207, 33%, 69%); } .dark a[href] { color: hsl(207, 67%, 75%); } .dark body, body.dark { color: hsl(33, 9%, 81%); background-color: #222; } .dark .title { color: #fff; } /* make the icons light grey instead of black */ .dark .contact-icon { filter: invert(85%); } /* misc. tag-specific styles ========================================================================= */ body { font-family: Georgia, "Times New Roman", serif; } p, li, aside, a { font-size: 13pt; } /* paragraph and list margins are *way* too big by default */ ul, ol, p { margin: 0.65em 0em; } h2, h3 { /* give headers bigger top margins to separate sections visually from each * other */ margin-top: 1.4em; /* give headers smaller bottom margins so they're closer to the text * underneath */ margin-bottom: 0.65em; } h2 { font-size: 27.0px; font-weight: bold; } h3 { font-size: 19.8px; font-weight: bold; margin-bottom: 0.65em; } ul { padding-left: 2.25em; } li { /* give list items a little horizontal breathing room from each other */ margin: 0.4em 0em; } a[href] { text-decoration: underline; } a[href]:hover { text-decoration: none; } /* title and header ========================================================================= */ .title-section { padding-top: 1em; padding-bottom: 1em; } /* having a .web class in the tag indicates that this version of the * resume is for the web instead of being generated as a PDF (which is the * default) */ .web .title-section { /* different paddings for the web version of the title section compared to * the pdf version, because the PDF version has some whitespace between the * color stripe of the title and the top of the page */ padding-top: 2.5em; padding-bottom: 0.8em; } .title { font-size: 36px; font-style: italic; font-weight: bold; text-align: center; letter-spacing: 0.1em; margin: 0; } .contact-info { /* wkhtmltopdf uses qt 4.8.5 which uses 2.2.4 of WebKit which doesn't support * display: flex; so instead we have to make do with this weird experimental * implementation */ display: -webkit-box; -webkit-box-pack: center; -webkit-flex-wrap: wrap; display: flex; justify-content: space-around; flex-wrap: wrap; margin: auto; max-width: 45em; padding-top: 0.3em; } /* we don't want these to have underlines by default because it makes my phone * number much harder to read and just doesn't look as nice */ a[href].contact-link { text-decoration: none; } a[href].contact-link:hover { text-decoration: underline; } .contact-link { margin-left: 0.5em; margin-right: 0.5em; } .contact-icon { height: 1.25em; margin-right: 0.15em; vertical-align: text-bottom; } #website-notice { text-align: center; margin: 1.2em 0em; } .web #website-notice { display: none; } /* the resume itself ========================================================================= */ #resume { /* phone screens can squish things but computer screens shouldn't stretch the * text too far */ max-width: 45em; /* center the element horizontally */ margin: auto; padding-left: 0.75em; padding-right: 0.75em; } /* if we're on the web, we should add some whitespace to the bottom of the * resume to let it breathe * * but if we're generating a PDF, the PDF's pagewise formatting will probably * add plenty of whitespace to the bottom no matter what. and we wouldn't want * to create a pagebreak with our magin - if that's possible. */ .web #resume { margin-bottom: 5em; } /* when printing or converting to PDF, avoid breaking up resume * sections/subsections * * (it's okay to break up a section that has subsections, but it's never okay * to break up subsections) */ .section:not(:has(.subsection)), .subsection { page-break-inside: avoid; } .job-posting-text { white-space: pre-line; } .job-posting-section { page-break-before: always; }