Clean up mobile site layout

Author: thomas0829

_sass/layout/_cv.scss

@@ -141,10 +141,10 @@
   }
 
   @media (max-width: 600px) {
-    padding-left: 20px;
+    padding-left: 0;
 
     &::before {
-      left: 4px;
+      display: none;
     }
   }
 }
@@ -172,10 +172,17 @@
   }
 
   @media (max-width: 600px) {
+    padding-bottom: 1.35em;
+    margin-bottom: 1.35em;
+    border-bottom: 1px solid var(--global-border-color);
+
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
     &::before {
-      left: -18px;
-      width: 8px;
-      height: 8px;
+      display: none;
     }
   }
 }
@@ -230,6 +237,12 @@
   font-size: 0.92em;
   color: var(--global-text-color-light);
   margin-bottom: 0.4em;
+
+  @media (max-width: 600px) {
+    font-size: 0.86em;
+    line-height: 1.45;
+    margin-bottom: 0.45em;
+  }
 }
 
 .cv-timeline__details {
@@ -245,7 +258,12 @@
 
   @media (max-width: 600px) {
     font-size: 0.85em;
-    padding-left: 0.8em;
+    line-height: 1.55;
+    padding-left: 1.05em;
+
+    li {
+      margin-bottom: 0.45em;
+    }
   }
 }
 
@@ -304,6 +322,11 @@
     font-weight: 600;
     color: var(--global-base-color);
   }
+
+  @media (max-width: 600px) {
+    padding: 1em 1.05em;
+    border-radius: 8px;
+  }
 }
 
 /* --- Publications List --- */
@@ -356,6 +379,16 @@
         text-decoration: underline;
       }
     }
+
+    @media (max-width: 600px) {
+      padding: 0.75em 0 0.75em 2em;
+      font-size: 0.85em;
+      line-height: 1.55;
+
+      &::before {
+        width: 1.55em;
+      }
+    }
   }
 }
 
@@ -377,6 +410,10 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.4em;
+
+  @media (max-width: 600px) {
+    gap: 0.35em;
+  }
 }
 
 .cv-tag {
@@ -401,6 +438,10 @@
     padding: 0.15em 0.55em;
     vertical-align: middle;
     margin-left: 0.4em;
+
+    @media (max-width: 600px) {
+      margin-left: 0.3em;
+    }
   }
 }
 

_sass/layout/_home.scss

@@ -8,6 +8,10 @@
   padding: 1.5em 1.5em 2em;
   animation: intro 0.3s both;
   animation-delay: 0.15s;
+
+  @media (max-width: 680px) {
+    padding: 1.15em 1em 2em;
+  }
 }
 
 /* --- Hero / Intro Section --- */
@@ -24,6 +28,8 @@
     align-items: center;
     text-align: center;
     gap: 1.2em;
+    margin-bottom: 1.5em;
+    padding-bottom: 1.25em;
   }
 }
 
@@ -71,6 +77,13 @@
     margin-bottom: 0.6em;
     font-weight: 500;
     max-width: 540px;
+
+    @media (max-width: 680px) {
+      max-width: 21rem;
+      margin-left: auto;
+      margin-right: auto;
+      line-height: 1.45;
+    }
   }
 
   .home-hero__tags {
@@ -81,6 +94,7 @@
 
     @media (max-width: 680px) {
       justify-content: center;
+      gap: 0.35em;
     }
   }
 
@@ -108,6 +122,13 @@
 
     @media (max-width: 680px) {
       justify-content: center;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.5em;
+      width: 100%;
+      max-width: 320px;
+      margin-left: auto;
+      margin-right: auto;
     }
 
     a {
@@ -134,8 +155,10 @@
       }
 
       @media (max-width: 680px) {
+        justify-content: center;
         padding: 0.3em 0.6em;
         font-size: 0.82em;
+        min-height: 2.35em;
       }
     }
   }
@@ -167,13 +190,14 @@
 
     @media (max-width: 720px) {
       grid-template-columns: 1fr;
-      gap: 0.25em;
-      padding: 0.75em 0;
+      gap: 0.3em;
+      padding: 0.85em 0;
     }
   }
 
   .highlight-title {
     font-weight: 700;
+    line-height: 1.35;
 
     a {
       color: var(--global-text-color);
@@ -198,10 +222,19 @@
     font-weight: 700;
     line-height: 1.2;
     white-space: nowrap;
+
+    @media (max-width: 720px) {
+      width: fit-content;
+    }
   }
 
   .highlight-text {
     color: var(--global-text-color);
+
+    @media (max-width: 720px) {
+      font-size: 0.95em;
+      line-height: 1.5;
+    }
   }
 }
 
@@ -217,6 +250,11 @@
     margin-top: 0;
     margin-bottom: 1em;
     color: var(--global-text-color);
+
+    @media (max-width: 680px) {
+      font-size: 1.18em;
+      margin-bottom: 0.75em;
+    }
   }
 }
 
@@ -229,7 +267,8 @@
 
     @media (max-width: 680px) {
       font-size: 0.92em;
-      line-height: 1.65;
+      line-height: 1.62;
+      margin-bottom: 1em;
     }
   }
 }
@@ -265,7 +304,9 @@
     }
 
     @media (max-width: 600px) {
-      padding-left: 1em;
+      padding: 0.7em 0 0.7em 0.95em;
+      font-size: 0.9em;
+      line-height: 1.48;
     }
   }
 

_sass/layout/_publications.scss

@@ -45,7 +45,8 @@
 
   @media (max-width: 600px) {
     flex-direction: column;
-    gap: 0.8em;
+    gap: 0.9em;
+    padding: 1.25em 0;
   }
 }
 
@@ -57,6 +58,7 @@
   @media (max-width: 600px) {
     width: 100%;
     max-width: 360px;
+    align-self: flex-start;
   }
 
   img {
@@ -91,6 +93,8 @@
 
   @media (max-width: 600px) {
     font-size: 1em;
+    line-height: 1.38;
+    margin-bottom: 0.4em;
   }
 }
 
@@ -102,6 +106,8 @@
 
   @media (max-width: 600px) {
     font-size: 0.85em;
+    line-height: 1.48;
+    margin-bottom: 0.3em;
   }
 }
 
@@ -116,6 +122,10 @@
   color: var(--global-text-color-light);
   font-style: italic;
   margin-bottom: 0.5em;
+
+  @media (max-width: 600px) {
+    line-height: 1.45;
+  }
 }
 
 .pub-page__badge {
@@ -141,6 +151,12 @@
   flex-wrap: wrap;
   gap: 0.5em;
 
+  @media (max-width: 600px) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.45em;
+  }
+
   a {
     display: inline-flex;
     align-items: center;
@@ -163,5 +179,11 @@
       color: #fff;
       border-color: var(--global-base-color);
     }
+
+    @media (max-width: 600px) {
+      justify-content: center;
+      padding: 0.35em 0.55em;
+      min-height: 2.35em;
+    }
   }
 }