From 962ed0c0a4f9c4affc76e39c538fb7ff8baae55b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Tue, 21 Dec 2021 19:23:11 +0100
Subject: [PATCH] Add mobile view to timeline

---
 src/styles/components/_timeline.scss | 80 ++++++++++++++++------------
 src/styles/lib/_layout.scss          |  9 +++-
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/src/styles/components/_timeline.scss b/src/styles/components/_timeline.scss
index f86e31c..3267c5a 100644
--- a/src/styles/components/_timeline.scss
+++ b/src/styles/components/_timeline.scss
@@ -10,6 +10,50 @@
 
   @extend %content-gutter;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media screen and (min-width: layout.$breakpoint) {
+    flex-direction: row;
+    align-items: flex-start;
+
+    > .content {
+      position: relative;
+      flex-grow: 1;
+      margin-left: layout.$normal-gap;
+      margin-bottom: $itemSpacing;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
+        bottom: #{-1 * $itemSpacing};
+        width: $lineWeight;
+        background-color: colors.$gray-300;
+        transform: translateX(50%);
+        transition: background-color motion.$subtle;
+      }
+
+      > h2:first-child {
+        position: relative;
+        margin-top: 0;
+        margin-left: layout.$large-gap;
+        line-height: $stampSize;
+
+        &::after {
+          position: absolute;
+          right: calc(100% + #{layout.$small-gap});
+          top: 50%;
+          width: 4rem;
+          height: $lineWeight;
+          background-color: colors.$gray-300;
+          transform: translateY(-100%);
+          transition: background-color motion.$subtle;
+        }
+      }
+    }
+  }
 
   > .stamp {
     display: inline-block;
@@ -30,39 +74,9 @@
   }
 
   > .content {
-    position: relative;
-    flex-grow: 1;
-    margin-left: layout.$normal-gap;
-    margin-bottom: $itemSpacing;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
-      bottom: #{-1 * $itemSpacing};
-      width: $lineWeight;
-      background-color: colors.$gray-300;
-      transform: translateX(50%);
-      transition: background-color motion.$subtle;
-    }
-
-    > h2:first-child {
-      position: relative;
-      margin-top: 0;
-      margin-left: layout.$large-gap;
-      line-height: $stampSize;
-
-      &::after {
-        position: absolute;
-        right: calc(100% + #{layout.$small-gap});
-        top: 50%;
-        width: 4rem;
-        height: $lineWeight;
-        background-color: colors.$gray-300;
-        transform: translateY(-100%);
-        transition: background-color motion.$subtle;
-      }
+    > p {
+      margin-left: 0;
+      margin-right: 0;
     }
   }
 
diff --git a/src/styles/lib/_layout.scss b/src/styles/lib/_layout.scss
index de708d1..6ff984f 100644
--- a/src/styles/lib/_layout.scss
+++ b/src/styles/lib/_layout.scss
@@ -27,8 +27,13 @@ $wide-content-width: 80rem;
 }
 
 %content-gutter {
-  margin: $normal-gap auto;
-  max-width: $content-width;
+  margin: $normal-gap $normal-gap;
+
+  @media screen and (min-width: $breakpoint) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: $content-width;
+  }
 }
 
 %wide-content {