🛠 Ticker improvements

src/css/base/layout.css

@@ -10,11 +10,14 @@
   flex: 1;
   padding-bottom: var(--space-xxl);
 
-  @media (--up_to_L) {
+  @media (--up_to_M) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.75);
+    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 {

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;

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;

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
+    span(style=`animation-duration:${duration}s`)= ticker
-    pre(style=`animation-duration:${duration}s`)= ticker
+    span(style=`animation-duration:${duration}s`)= ticker
 
   .wrap
     section