4-19

style.css

@@ -7,24 +7,24 @@
   --pink-300: #FF8AC8;
   --pink-400: #F45D9E;
   --pink-500: #D23B80;
-  
+
   /* Sage palette */
   --sage-200: #D4E6D5;
   --sage-300: #B5D4B7;
   --sage-400: #8AB68C;
   --sage-500: #6A9A6C;
-  
+
   /* Neutral palette */
   --cream-50: #FFFEF5;
   --cream-100: #FFF9F0;
-  
+
   /* Semantic colors */
   --text: #4a4a4a;
   --bg-primary: var(--pink-50);
   --bg-secondary: white;
   --accent-primary: var(--pink-400);
   --accent-secondary: var(--sage-400);
-  
+
   /* Spacing */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
@@ -32,10 +32,10 @@
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-xxl: 3rem;
-  
+
   /* Container */
   --container-max: 1200px;
-  
+
   /* Animation */
   --transition: 0.2s ease;
 }
@@ -97,7 +97,9 @@ body {
 }
 
 /* Typography */
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   line-height: 1.3;
   margin-bottom: var(--space-md);
 }
@@ -368,7 +370,7 @@ footer {
   .menu-toggle {
     display: flex;
   }
-  
+
   .nav-links {
     position: fixed;
     top: 60px;
@@ -385,17 +387,17 @@ footer {
     transition: transform var(--transition), opacity var(--transition);
     z-index: 100;
   }
-  
+
   .nav-links.menu-open {
     transform: translateY(0);
     opacity: 1;
     pointer-events: auto;
   }
-  
+
   .nav-links li {
     width: 100%;
   }
-  
+
   .nav-links a {
     display: flex;
     width: 100%;
@@ -403,14 +405,14 @@ footer {
     margin-bottom: var(--space-xs);
     transform: none;
   }
-  
+
   .nav-links a:hover,
   .nav-links a:focus {
     transform: none;
     box-shadow: none;
     background-color: var(--pink-200);
   }
-  
+
   .intro {
     padding: var(--space-lg);
   }
@@ -426,4 +428,188 @@ footer {
   .project-grid {
     grid-template-columns: repeat(3, 1fr);
   }
+}
+
+
+
+
+/* Resume header and contact info */
+.resume-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+}
+
+.contact-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  font-size: 0.95rem;
+}
+
+/* Resume sections */
+.resume-section {
+  background-color: var(--bg-secondary);
+  border-radius: 0.75rem;
+  padding: var(--space-xl);
+  margin-bottom: var(--space-xl);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.resume-section:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.resume-section h2 {
+  position: relative;
+  margin-bottom: var(--space-lg);
+  display: flex;
+  align-items: center;
+}
+
+.resume-section h2::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  margin-left: var(--space-md);
+  background-color: var(--sage-200);
+}
+
+.dark-mode .resume-section h2::after {
+  background: linear-gradient(to right, var(--pink-400), transparent);
+}
+
+/* Education and experience items */
+.education-item,
+.experience-item {
+  margin-bottom: var(--space-lg);
+}
+
+.education-header,
+.experience-header {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: var(--space-xs);
+}
+
+.location {
+  color: var(--accent-primary);
+  font-weight: 500;
+}
+
+.date {
+  color: var(--text);
+  font-style: italic;
+}
+
+.degree,
+.job-title {
+  font-weight: 600;
+  color: var(--accent-secondary);
+}
+
+.gpa {
+  margin-bottom: var(--space-md);
+}
+
+.coursework {
+  margin-top: var(--space-sm);
+}
+
+.bullet-list {
+  padding-left: var(--space-xl);
+  margin-bottom: var(--space-md);
+}
+
+.bullet-list li {
+  margin-bottom: var(--space-xs);
+}
+
+/* Skills grid */
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-md);
+}
+
+.skill-category {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.skill-category::before {
+  content: '•';
+  color: var(--accent-primary);
+  font-size: 1.5rem;
+}
+
+/* Print styles */
+@media print {
+  body {
+    background-color: white;
+  }
+
+  header,
+  footer,
+  .theme-toggle,
+  .menu-toggle {
+    display: none;
+  }
+
+  .container {
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .resume-section {
+    box-shadow: none;
+    page-break-inside: avoid;
+    margin-bottom: var(--space-lg);
+  }
+
+  .resume-section:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+/* Skill category headings */
+.skill-heading {
+  font-size: 1.1rem;
+  color: var(--accent-primary);
+  margin-top: var(--space-lg);
+  margin-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--sage-200);
+  padding-bottom: var(--space-xs);
+}
+
+/* Make the first skill heading not have extra top margin */
+.skill-heading:first-of-type {
+  margin-top: 0;
+}
+
+/* Dark mode styling for skill headings */
+.dark-mode .skill-heading {
+  border-bottom-color: var(--pink-300);
+}
+
+/* Responsive adjustments for resume */
+@media (max-width: 768px) {
+
+  .education-header,
+  .experience-header {
+    flex-direction: column;
+  }
+
+  .resume-section {
+    padding: var(--space-lg);
+  }
+
+  .skills-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 }