fix(resume): major spacing and readability improvements

- Completely overhauled CSS for much better spacing and readability
- Added generous margins and padding throughout (3rem sections, 2rem headers)
- Improved typography with larger fonts and better line heights
- Better visual hierarchy with proper color contrast
- Clear section separation with subtle borders
- Improved contact links and navigation styling
- Better mobile responsiveness with adaptive sizing
- Fixed cramped layout issues for much easier reading

Author: erinmikailstaples

assets/built/screen.css

@@ -1,150 +1,188 @@
-/* Resume layout + typography improvements */
+/* Resume layout - prioritize readability and spacing */
+.resume-page {
+  line-height: 1.6;
+}
+
 .resume {
-  --resume-max: 800px;
-  --resume-gap: 1rem;
-  --resume-gap-lg: 2rem;
-  --resume-border: var(--color-border, rgba(0,0,0,0.12));
-  --resume-muted: var(--color-muted, rgba(0,0,0,0.6));
-  --resume-accent: var(--ghost-accent-color, #ff3cab);
-  max-width: var(--resume-max);
+  max-width: 900px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 3rem 2rem;
+  font-size: 16px;
+}
+
+/* Override Ghost's tight spacing */
+.resume-page .gh-content {
+  max-width: none;
 }
 
-/* Ensure the resume respects Ghost's grid system */
 .resume-page .resume-wrap {
   grid-column: 1 / -1 !important;
   max-width: none;
   padding: 0;
 }
 
-.resume-page .gh-content {
-  max-width: 100%;
-}
-
-/* Header */
+/* Header with better spacing */
 .resume-header {
-  margin-block: 1.25rem 1.75rem;
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 2px solid #e5e5e5;
 }
+
 .resume-name {
-  line-height: 1.15;
-  margin: 0;
-  font-size: clamp(28px, 4vw, 40px);
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 0.5rem 0;
+  color: #1a1a1a;
 }
+
 .resume-pronouns {
   font-weight: 400;
-  color: var(--resume-muted);
-  font-size: .875em;
+  color: #666;
+  font-size: 0.9em;
 }
+
 .resume-title {
-  margin: .25rem 0 0;
+  font-size: 1.4rem;
   font-weight: 600;
-  letter-spacing: .005em;
-  font-size: clamp(16px, 2.2vw, 20px);
-  color: var(--color-mid, rgba(0,0,0,.75));
+  margin: 0.5rem 0;
+  color: #2c5aa0;
 }
+
 .resume-location {
-  margin: .25rem 0 0;
-  color: var(--resume-muted);
+  font-size: 1.1rem;
+  margin: 0.25rem 0 1.5rem 0;
+  color: #666;
 }
 
-/* Contact links as a simple vertical list */
+/* Contact links with better spacing */
 .resume-contact {
-  margin-top: .75rem;
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
+  margin: 1rem 0 2rem 0;
 }
+
 .resume-contact a {
-  display: inline-block;
-  width: fit-content;
-  padding: .25rem 0;
-  color: #e85bad;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  font-size: .95rem;
-  transition: opacity 0.2s ease;
+  display: block;
+  margin: 0.5rem 0;
+  color: #2c5aa0;
+  text-decoration: none;
+  font-size: 1rem;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.2s ease;
 }
-.resume-contact a:hover,
-.resume-contact a:focus-visible {
-  opacity: 0.8;
+
+.resume-contact a:hover {
+  border-bottom-color: #2c5aa0;
 }
 
-/* Jump list */
+/* Navigation with better spacing */
 .resume-nav {
-  margin-top: 1rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem 1.5rem;
-  border-top: 1px solid var(--resume-border);
-  padding-top: .75rem;
-  font-size: .9rem;
+  margin: 2rem 0 3rem 0;
+  padding: 1.5rem 0 0 0;
+  border-top: 1px solid #e5e5e5;
 }
+
 .resume-nav a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  opacity: 0.8;
-  transition: opacity 0.2s ease;
+  display: inline-block;
+  margin: 0 1.5rem 0.5rem 0;
+  color: #2c5aa0;
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.2s ease;
 }
-.resume-nav a:hover,
-.resume-nav a:focus-visible {
-  opacity: 1;
+
+.resume-nav a:hover {
+  border-bottom-color: #2c5aa0;
 }
 
-/* Sections */
+/* Sections with generous spacing */
 .resume-section {
-  padding-block: var(--resume-gap-lg);
-  border-top: 1px solid var(--resume-border);
+  margin: 3rem 0;
+  padding: 2rem 0 0 0;
+  border-top: 2px solid #e5e5e5;
 }
+
 .resume-section:first-of-type {
   border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
 }
+
 .resume-section > h2 {
-  margin: 0 0 .75rem;
-  letter-spacing: .01em;
-  font-size: clamp(20px, 2.8vw, 26px);
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin: 0 0 1.5rem 0;
+  color: #1a1a1a;
+  letter-spacing: -0.01em;
 }
 
-/* Key skills: two-column on desktop */
+.resume-section p {
+  margin: 1rem 0;
+  line-height: 1.7;
+  font-size: 1rem;
+}
+
+/* Skills section with better list formatting */
 #skills ul {
-  margin: .25rem 0 0;
+  margin: 1.5rem 0;
+  padding-left: 1.5rem;
   columns: 1;
-  column-gap: 2rem;
-  padding-left: 1.2rem;
+  column-gap: 3rem;
 }
+
 #skills li {
+  margin: 0.75rem 0;
   break-inside: avoid;
-  margin: .35rem 0;
+  line-height: 1.6;
+  font-size: 1rem;
 }
-@media (min-width: 880px) {
-  #skills ul { columns: 2; }
+
+@media (min-width: 900px) {
+  #skills ul { 
+    columns: 2; 
+  }
 }
 
-/* Experience: card-like separation between roles */
+/* Experience section with clear role separation */
 .resume-experience .resume-role {
-  padding-block: 1rem;
-  border-top: 1px dashed var(--resume-border);
+  margin: 2.5rem 0;
+  padding: 1.5rem 0 0 0;
+  border-top: 1px solid #e5e5e5;
 }
+
 .resume-experience .resume-role:first-child {
   border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
 }
+
 .resume-experience h3 {
-  margin: 0 0 .25rem;
-  line-height: 1.25;
+  font-size: 1.3rem;
   font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: #1a1a1a;
+  line-height: 1.3;
 }
+
 .resume-experience .meta {
-  color: var(--resume-muted);
-  margin-bottom: .5rem;
-  font-size: .975rem;
+  color: #666;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
 }
+
 .resume-experience ul {
-  margin: .5rem 0 0;
-  padding-left: 1.2rem;
+  margin: 1rem 0 0 0;
+  padding-left: 1.5rem;
 }
+
 .resume-experience li {
-  margin: .35rem 0;
+  margin: 0.75rem 0;
+  line-height: 1.6;
+  font-size: 1rem;
 }
 
 /* Role headers for consistent styling */
@@ -205,19 +243,42 @@
   font-style: italic;
 }
 
-/* Mobile tweaks */
-@media (max-width: 860px) {
-  #skills ul { columns: 1; }
-  .resume { padding: 0 1.5rem; }
+/* Mobile responsiveness */
+@media (max-width: 900px) {
+  .resume {
+    padding: 2rem 1.5rem;
+  }
+  
+  #skills ul {
+    columns: 1;
+  }
 }
+
 @media (max-width: 640px) {
-  .role-header { grid-template-columns: 1fr; }
-  .role-title-dates { justify-self: start; gap: .5rem; }
-  .resume { padding: 0 1rem; }
-}
-@media (max-width: 520px) {
-  .resume-header { margin-block: .75rem 1rem; }
-  .resume-nav { gap: .35rem 1rem; }
+  .resume {
+    padding: 1.5rem 1rem;
+  }
+  
+  .resume-name {
+    font-size: 2rem;
+  }
+  
+  .resume-title {
+    font-size: 1.2rem;
+  }
+  
+  .resume-section > h2 {
+    font-size: 1.5rem;
+  }
+  
+  .role-header {
+    grid-template-columns: 1fr;
+  }
+  
+  .role-title-dates {
+    justify-self: start;
+    gap: 0.5rem;
+  }
 }
 
 /* Override any problematic grid layouts */