fixes

src/components/molecules/ProjectLinks.module.css

@@ -5,7 +5,6 @@
 .projectLinks li {
     display: flex;
     align-items: center;
-    white-space: nowrap;
     margin-bottom: calc(var(--spacer) / 2.1);
 }
 
@@ -14,12 +13,14 @@
     width: 100%;
     text-transform: none;
     text-align: left;
+    padding-left: 1.8rem;
 }
 
 .projectLinks svg {
     stroke: var(--text-color-light);
     width: var(--font-size-small);
     height: var(--font-size-small);
+    margin-left: -1.2rem;
 }
 
 .title {

src/components/molecules/Repository.module.css

@@ -21,7 +21,7 @@
 }
 
 .repoTitle {
-    font-size: var(--font-size-h4);
+    font-size: var(--font-size-h5);
     margin-bottom: calc(var(--spacer) / 2);
 }
 

src/components/organisms/Repositories.module.css

@@ -1,5 +1,6 @@
 .section {
     margin: calc(var(--spacer) * 3) auto 0 auto;
+    max-width: calc(var(--projectImageMaxWidth) + var(--spacer) * 2);
     padding-left: var(--spacer);
     padding-right: var(--spacer);
 }
@@ -13,13 +14,11 @@
 .repos {
     display: grid;
     grid-template-columns: 1fr;
-    gap: calc(var(--spacer) * 3);
+    gap: calc(var(--spacer) * 2);
-    margin: 0 auto;
-    max-width: calc(var(--projectImageMaxWidth) + var(--spacer) * 2);
 }
 
-@media (min-width: 15rem) {
+@media (min-width: 18rem) {
     .repos {
-        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
     }
 }

src/pages/index.module.css

@@ -4,9 +4,11 @@
     gap: calc(var(--spacer) * 3);
     max-width: calc(var(--projectImageMaxWidth) + var(--spacer) * 2);
     margin: 0 auto;
+    padding-left: var(--spacer);
+    padding-right: var(--spacer);
 }
 
-@media (min-width: 15rem) {
+@media (min-width: 30rem) {
     .projects {
         grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
     }

src/pages/resume/Header.module.css

@@ -11,14 +11,10 @@
 
 .label {
     font-size: var(--font-size-h3);
-    color: var(--brand-grey-light);
+    color: var(--text-color);
     margin-bottom: 0;
 }
 
-:global(.dark) .label {
-    color: var(--brand-grey-dimmed);
-}
-
 .contact {
     list-style: none;
     padding: 0;
@@ -30,15 +26,11 @@
 }
 
 .contact svg {
-    stroke: var(--brand-grey-light);
+    stroke: var(--text-color-light);
     margin-right: calc(var(--spacer) / 4);
     margin-bottom: -0.1rem;
 }
 
-:global(.dark) .contact svg {
-    stroke: var(--brand-grey);
-}
-
 @media (min-width: 60em) {
     .contact {
         margin-top: calc(var(--spacer) * 2.25);
@@ -61,9 +53,5 @@
 .languages span {
     font-size: var(--font-size-small);
     margin-left: calc(var(--spacer) / 4);
-    color: var(--brand-grey-light);
+    color: var(--text-color-light);
-}
-
-:global(.dark) .languages span {
-    color: var(--brand-grey);
 }

src/pages/resume/ResumeItem.module.css

@@ -2,7 +2,7 @@
     padding-bottom: calc(var(--spacer) * 3);
     padding-left: var(--spacer);
     position: relative;
-    border-left: 0.1rem solid rgba(var(--brand-grey-light), 0.25);
+    border-left: 0.1rem solid var(--text-color-light);
 }
 
 .resumeItem::before {
@@ -11,11 +11,11 @@
     width: var(--font-size-mini);
     height: var(--font-size-mini);
     border-radius: 50%;
-    background: var(--body-background-color);
+    background: var(--color-headings);
     border: 0.1rem solid var(--color-headings);
     position: absolute;
-    left: -(calc(var(--font-size-mini) / 1.8));
+    left: -0.4rem;
-    top: 0.15rem;
+    top: 0.4rem;
 }
 
 .resumeItem:last-child {
@@ -29,19 +29,13 @@
 .title {
     margin-bottom: calc(var(--spacer) / 3);
     font-size: var(--font-size-h4);
-    position: relative;
-    top: -(calc(var(--spacer) / 6));
 }
 
 .subTitle {
-    color: var(--brand-grey-light);
+    color: var(--text-color-light);
     font-size: var(--font-size-h5);
 }
 
-:global(.dark) .subTitle {
-    color: var(--brand-grey-dimmed);
-}
-
 .time {
     display: block;
     margin-bottom: calc(var(--spacer) / 2);

src/pages/resume/index.module.css

@@ -32,9 +32,9 @@
         font-size: 8pt;
     }
 
-    body {
+    :global(body) {
         background: #fff !important;
-        margin: 1cm 1.5cm;
+        margin: 1cm;
     }
 
     p {
@@ -43,5 +43,6 @@
 
     .resume {
         grid-template-columns: 1fr;
+        max-width: 100%;
     }
 }

src/styles/_variables.css

@@ -29,7 +29,7 @@
     --font-size-h4: 1.45rem;
     --font-size-h5: var(--font-size-large);
     --font-size-h6: var(--font-size-base);
-    --line-height: 1.5;
+    --line-height: 1.6;
     --line-height-small: 1.1428571429;
     --font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
         'Helvetica', 'Arial', 'sans-serif';
@@ -53,7 +53,7 @@
 
 .dark {
     --text-color: #7e9199;
-    --text-color-light: #7e9199;
+    --text-color-light: var(--brand-grey);
     --color-headings: var(--brand-main-light);
     --body-background-color: #1d2224;
     --box-background-color: rgba(255, 255, 255, 0.03);