From 9b567643767082945f6036ef45e959eba04b9678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Wed, 1 Feb 2023 00:56:07 +0100
Subject: [PATCH] fix(timeline): vertical labels on small viewports (#70)

---
 src/scss/timeline.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index ea3edd6..a3567dc 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -179,6 +179,15 @@
         text {
           fill: $midwhite;
           text-transform: capitalize;
+
+          @media screen and (max-width: 960px) {
+            writing-mode:vertical-lr;
+            /*
+             * Applies slightly different in Gecko and WebKit/Blink.
+             * Optimized for WebKit as its more common on mobile viewports.
+             */
+            transform: translateX(6px) translateY(6px);
+          }
         }
       }