From 00e53a43eb8c7e6a072ed3392f8a5afd7524cce5 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Tue, 13 Oct 2020 16:23:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20Ticker=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/base/layout.css    |  9 ++++++---
 src/css/base/variables.css |  2 +-
 src/css/sections/home.css  | 22 +++++++++++++++++++---
 src/index.pug              |  4 ++--
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/css/base/layout.css b/src/css/base/layout.css
index 0c4894abbe2..289385b3454 100644
--- a/src/css/base/layout.css
+++ b/src/css/base/layout.css
@@ -10,11 +10,14 @@
   flex: 1;
   padding-bottom: var(--space-xxl);
 
-  @media (--up_to_L) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.75);
+  @media (--up_to_M) {
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.525);
+  }
+  @media (--M_to_L) {
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.675);
   }
   @media (--L_and_up) {
-    padding-top: var(--space-xl);
+    padding-top: var(--space-l);
   }
 
   & h1 {
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
index 2d55758ee8b..823aeee08f0 100644
--- a/src/css/base/variables.css
+++ b/src/css/base/variables.css
@@ -38,7 +38,7 @@
   --font-weight-bold: 700;
 
   --font-size-base: 18px;
-  --font-size-xs: .7rem;
+  --font-size-xs: .75rem;
   --font-size-s: .85rem;
   --font-size-m: 1rem;
   --font-size-l: 1.25rem;
diff --git a/src/css/sections/home.css b/src/css/sections/home.css
index 0732caf7ae7..63908cb88bf 100644
--- a/src/css/sections/home.css
+++ b/src/css/sections/home.css
@@ -4,19 +4,35 @@
 }
 
 .ticker {
+  position: relative;
   overflow: hidden;
   background: var(--color-card-bg);
   transition-property: background-color;
   transition-duration: var(--transition-duration-fast);
   margin: -15px 0 var(--space-xl);
   padding: var(--space-m) 0;
-
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  font-size: var(--font-size-s);
+  font-size: var(--font-size-xs);
 
-  & pre {
+  &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    content: '₿reaking:';
+    padding: var(--space-m);
+    text-transform: uppercase;
+    color: var(--color-neutral-0);
+    background: var(--color-accent);
+    font-weight: var(--font-weight-bold);
+  }
+
+  & span {
+    white-space: nowrap;
+    text-size-adjust: none;
+    -webkit-text-size-adjust: none;
     animation-name: marquee;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
diff --git a/src/index.pug b/src/index.pug
index 5126039d83d..3b37397c38a 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -4,8 +4,8 @@ block main
   - const ticker = shuffle(site.meta.ticker).join(" +++ ") + " +++ "
   - const duration = ticker.length / 4
   .ticker
-    pre(style=`animation-duration:${duration}s`)= ticker
-    pre(style=`animation-duration:${duration}s`)= ticker
+    span(style=`animation-duration:${duration}s`)= ticker
+    span(style=`animation-duration:${duration}s`)= ticker
 
   .wrap
     section