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;
+  }
+}