Mercurial
diff mrjunejune/src/resume.css @ 97:3bdfffaad162
[MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Fri, 02 Jan 2026 20:21:58 -0800 |
| parents | bcc76a156aea |
| children |
line wrap: on
line diff
--- a/mrjunejune/src/resume.css Fri Jan 02 19:16:17 2026 -0800 +++ b/mrjunejune/src/resume.css Fri Jan 02 20:21:58 2026 -0800 @@ -17,114 +17,125 @@ } .header-firstname-style { - font-size: 32pt; + font-size: 2.5rem; font-family: "Roboto Light", sans-serif; color: var(--graytext); } .header-lastname-style { - font-size: 32pt; + font-size: 2.5rem; font-family: "Roboto", sans-serif; font-weight: bold; color: var(--text); } .header-position-style { - font-size: 7.6pt; + font-size: 0.875rem; font-family: "Source Sans Pro", sans-serif; font-variant: small-caps; color: var(--awesome); + letter-spacing: 0.05em; } .header-address-style { - font-size: 8pt; + font-size: 1rem; font-family: "Roboto", sans-serif; font-style: italic; color: var(--lighttext); } .header-social-style { - font-size: 10pt; + font-size: 1.1rem; font-family: "Roboto", sans-serif; color: var(--text); + line-height: 1.6; + display: grid; + grid-template-columns: 1fr 1fr; } .header-quote-style { - font-size: 9pt; + font-size: 1rem; font-family: "Source Sans Pro", sans-serif; font-style: italic; color: var(--darktext); } .footer-style { - font-size: 8pt; + font-size: 0.875rem; font-family: "Source Sans Pro", sans-serif; font-variant: small-caps; color: var(--lighttext); } .section-style { - font-size: 16pt; + font-size: 1.5rem; font-family: "Source Sans Pro", sans-serif; font-weight: bold; color: var(--text); } .subsection-style { - font-size: 12pt; + font-size: 1.25rem; font-family: "Source Sans Pro", sans-serif; font-variant: small-caps; color: var(--text); } .paragraph-style { - font-size: 9pt; + font-size: 1rem; font-family: "Source Sans Pro Light", sans-serif; color: var(--text); + line-height: 1.6; } .entry-title-style { - font-size: 10pt; + font-size: 1.1rem; font-family: "Source Sans Pro", sans-serif; font-weight: bold; color: var(--darktext); } .entry-position-style { - font-size: 8pt; + font-size: 0.95rem; font-family: "Source Sans Pro", sans-serif; font-variant: small-caps; color: var(--graytext); + letter-spacing: 0.03em; } .entry-date-style { - font-size: 8pt; + font-size: 0.95rem; font-family: "Source Sans Pro Light", sans-serif; font-style: italic; color: var(--graytext); } .entry-location-style { - font-size: 9pt; + font-size: 1rem; font-family: "Source Sans Pro Light", sans-serif; font-style: italic; color: var(--awesome); } .description-style { - font-size: 9pt; + font-size: 1rem; font-family: "Source Sans Pro Light", sans-serif; color: var(--text); + line-height: 1.7; +} + +.description-style li { + margin-bottom: 0.75em; } .subentry-title-style { - font-size: 8pt; + font-size: 0.95rem; font-family: "Source Sans Pro", sans-serif; color: var(--graytext); } .subentry-position-style { - font-size: 7pt; + font-size: 0.875rem; font-family: "Source Sans Pro", sans-serif; font-variant: small-caps; color: var(--graytext); @@ -136,9 +147,10 @@ .honor-location-style, .skill-type-style, .skill-set-style { - font-size: 9pt; + font-size: 1rem; font-family: "Source Sans Pro", sans-serif; color: var(--graytext); + line-height: 1.6; } .letter-section-style, @@ -158,4 +170,90 @@ .flex-box { display: flex; justify-content: space-between; + gap: 1em; + flex-wrap: wrap; } + +/* Mobile responsive styles */ +@media (max-width: 720px) { + .header-firstname-style, + .header-lastname-style { + font-size: 2rem; + } + + .header-position-style { + font-size: 0.875rem; + } + + .header-address-style { + font-size: 0.95rem; + } + + .header-social-style { + font-size: 0.95rem; + line-height: 1.8; + word-break: break-word; + } + + .header-social-style p { + display: flex; + flex-direction: column; + gap: 0.5em; + } + + .header-social-style a { + display: inline-block; + padding: 0.5em 0; + } + + .section-style { + font-size: 1.35rem; + } + + .subsection-style { + font-size: 1.15rem; + } + + .paragraph-style { + font-size: 1rem; + line-height: 1.7; + } + + .entry-title-style { + font-size: 1.1rem; + } + + .entry-position-style, + .entry-date-style { + font-size: 0.95rem; + } + + .entry-location-style { + font-size: 0.95rem; + } + + .description-style { + font-size: 1rem; + line-height: 1.8; + } + + .description-style li { + margin-bottom: 1em; + } + + .flex-box { + gap: 0.5em; + } + + .sub-header { + margin-top: 2em; + } + + .info a { + padding: 0.5em; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + } +}