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