Skip to content

R
re-kirby
Commit 0687b8e6 authored by santiago duque's avatar santiago duque
Browse files
Options

qupte font styling

parent dcfd2b0f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 211 additions and 67 deletions
src/css/shared.scss
View file @ 0687b8e6
/* ===================================================================
Shared styles — atmospheric horror scrollytelling
=================================================================== */
@use 'vars';
@use 'fonts';
@use 'mixins' as m;
@use "vars";
@use "fonts";
@use "mixins" as m;
// ===== Reset =====
* { box-sizing: border-box; margin: 0; padding: 0; }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
html,
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
......@@ -17,6 +22,10 @@ html, body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
@include m.bp(m.$bp-laptop) {
font-size: 18px;
}
}
body {
......@@ -45,8 +54,13 @@ body {
}
@keyframes vignette-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
0%,
100% {
opacity: 0.85;
}
50% {
opacity: 1;
}
}
.flicker {
......@@ -59,25 +73,49 @@ body {
}
@keyframes flicker {
0%, 92%, 100% { opacity: 0; }
93% { opacity: 1; }
94% { opacity: 0.2; }
95% { opacity: 0.9; }
96% { opacity: 0; }
0%,
92%,
100% {
opacity: 0;
}
93% {
opacity: 1;
}
94% {
opacity: 0.2;
}
95% {
opacity: 0.9;
}
96% {
opacity: 0;
}
}
[data-effects="off"] {
.grain, .vignette, .flicker { display: none; }
.reveal { opacity: 1; transform: none; }
.grain,
.vignette,
.flicker {
display: none;
}
.reveal {
opacity: 1;
transform: none;
}
.glitch {
&::before, &::after { display: none; }
&::before,
&::after {
display: none;
}
}
}
// ===== Top bar =====
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
......@@ -85,7 +123,9 @@ body {
padding: 28px 40px;
pointer-events: none;
> * { pointer-events: auto; }
> * {
pointer-events: auto;
}
}
.wordmark {
......@@ -123,7 +163,9 @@ body {
@include m.mono-label(11px, 0.2em);
align-items: flex-end;
&:hover { color: var(--accent-bright); }
&:hover {
color: var(--accent-bright);
}
&-lines {
display: flex;
......@@ -136,9 +178,15 @@ body {
height: 1px;
background: currentColor;
&:nth-child(1) { width: 28px; }
&:nth-child(2) { width: 20px; }
&:nth-child(3) { width: 28px; }
&:nth-child(1) {
width: 28px;
}
&:nth-child(2) {
width: 20px;
}
&:nth-child(3) {
width: 28px;
}
}
}
}
......@@ -153,7 +201,10 @@ body {
pointer-events: none;
transition: opacity 0.5s ease;
&.open { opacity: 1; pointer-events: auto; }
&.open {
opacity: 1;
pointer-events: auto;
}
&::before {
content: "";
......@@ -178,7 +229,9 @@ body {
padding: 10px;
z-index: 10;
&:hover { color: var(--accent-bright); }
&:hover {
color: var(--accent-bright);
}
}
.menu-inner {
......@@ -217,7 +270,9 @@ body {
outline: none;
transition: border-color 0.2s;
&:focus { border-color: var(--accent); }
&:focus {
border-color: var(--accent);
}
&::placeholder {
color: var(--ink-faint);
......@@ -250,13 +305,23 @@ body {
scrollbar-width: thin;
scrollbar-color: var(--accent-deep) transparent;
&::-webkit-scrollbar { width: 6px; }
&::-webkit-scrollbar-thumb { background: var(--accent-deep); }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: var(--accent-deep);
}
&::-webkit-scrollbar-track {
background: transparent;
}
&.is-empty {
.menu-empty { display: block; }
.menu-part { display: none; }
.menu-empty {
display: block;
}
.menu-part {
display: none;
}
}
}
......@@ -298,13 +363,19 @@ body {
border-bottom: 1px solid var(--rule);
transition: opacity 0.2s;
&.hidden { display: none; }
&.hidden {
display: none;
}
&.current {
position: relative;
a { color: var(--accent-bright); }
.num { color: var(--accent-bright); }
a {
color: var(--accent-bright);
}
.num {
color: var(--accent-bright);
}
a::before {
width: 2px;
background: var(--accent-bright);
......@@ -334,7 +405,10 @@ body {
color: var(--ink);
@include m.display-italic(22px);
font-weight: 400;
transition: color 0.25s, padding 0.25s, background 0.25s;
transition:
color 0.25s,
padding 0.25s,
background 0.25s;
position: relative;
text-wrap: balance;
......@@ -343,7 +417,9 @@ body {
padding-left: 22px;
background: rgba(185, 28, 28, 0.04);
&::before { width: 2px; }
&::before {
width: 2px;
}
}
&::before {
......@@ -367,7 +443,9 @@ body {
align-self: center;
}
.title { line-height: 1.2; }
.title {
line-height: 1.2;
}
}
.menu-side {
......@@ -413,7 +491,9 @@ body {
@include m.mono-label(10px, 0.25em);
color: var(--ink-dim);
.accent { color: var(--accent-bright); }
.accent {
color: var(--accent-bright);
}
}
}
......@@ -445,7 +525,9 @@ body {
height: 12px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--accent);
box-shadow:
0 0 0 4px var(--bg),
0 0 20px var(--accent);
}
}
......@@ -455,7 +537,10 @@ body {
display: block;
padding: 28px;
border: 1px solid var(--rule);
transition: border-color 0.3s, background 0.3s, transform 0.4s;
transition:
border-color 0.3s,
background 0.3s,
transform 0.4s;
position: relative;
overflow: hidden;
min-height: 180px;
......@@ -464,7 +549,9 @@ body {
border-color: var(--accent);
background: rgba(185, 28, 28, 0.05);
.arrow { color: var(--accent-bright); }
.arrow {
color: var(--accent-bright);
}
}
&.disabled {
......@@ -473,17 +560,29 @@ body {
}
&.prev {
.arrow { left: 28px; }
&:hover .arrow { transform: translateX(-6px); }
.arrow {
left: 28px;
}
&:hover .arrow {
transform: translateX(-6px);
}
}
&.next {
text-align: right;
.arrow { right: 28px; }
&:hover .arrow { transform: translateX(6px); }
.arrow {
right: 28px;
}
&:hover .arrow {
transform: translateX(6px);
}
}
.label, .num-big, .title { display: block; }
.label,
.num-big,
.title {
display: block;
}
.label {
@include m.mono-label(11px, 0.25em);
......@@ -512,7 +611,9 @@ body {
bottom: 24px;
@include m.mono-label(11px, 0.2em);
color: var(--ink-faint);
transition: color 0.3s, transform 0.3s;
transition:
color 0.3s,
transform 0.3s;
}
}
......@@ -528,7 +629,9 @@ body {
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.2s ease, transform 1.2s ease;
transition:
opacity 1.2s ease,
transform 1.2s ease;
&.in {
opacity: 1;
......@@ -569,10 +672,24 @@ body {
}
@keyframes glitch-shift {
0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
90% { transform: translate(-2px, 0.5px); opacity: 0.8; }
92% { transform: translate(2px, -0.5px); opacity: 0.6; }
94% { transform: translate(-1px, 0); opacity: 0.4; }
0%,
88%,
100% {
transform: translate(0, 0);
opacity: 0;
}
90% {
transform: translate(-2px, 0.5px);
opacity: 0.8;
}
92% {
transform: translate(2px, -0.5px);
opacity: 0.6;
}
94% {
transform: translate(-1px, 0);
opacity: 0.4;
}
}
// ===== Scroll progress bar =====
......@@ -589,9 +706,15 @@ body {
}
// ===== Utility =====
.mono { @include m.mono-label(11px, 0.15em); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.mono {
@include m.mono-label(11px, 0.15em);
}
.dim {
color: var(--ink-dim);
}
.faint {
color: var(--ink-faint);
}
::selection {
background: var(--accent);
......@@ -608,7 +731,10 @@ body {
gap: 16px;
}
.menu-list { min-height: 50vh; padding-right: 8px; }
.menu-list {
min-height: 50vh;
padding-right: 8px;
}
.menu-side {
border-left: none;
......@@ -621,10 +747,14 @@ body {
justify-content: space-between;
flex-wrap: wrap;
.menu-section-label { display: none; }
.menu-section-label {
display: none;
}
}
.menu-about { display: none; }
.menu-about {
display: none;
}
.menu-progress {
margin-top: 0;
......@@ -634,20 +764,34 @@ body {
min-width: 200px;
}
.menu-chapters { grid-template-columns: 1fr; }
.menu-chapters {
grid-template-columns: 1fr;
}
}
@include m.bp(m.$bp-mobile) {
.menu-close { top: 18px; right: 20px; }
.menu-inner { padding: 70px 20px 24px; }
.menu-list { min-height: 55vh; }
.menu-close {
top: 18px;
right: 20px;
}
.menu-inner {
padding: 70px 20px 24px;
}
.menu-list {
min-height: 55vh;
}
.menu-chapters {
a { font-size: 19px; padding: 12px 0 12px 10px; }
.current::after { display: none; }
a {
font-size: 19px;
padding: 12px 0 12px 10px;
}
.current::after {
display: none;
}
}
.menu-head { gap: 16px; }
.menu-head {
gap: 16px;
}
}
www/assets/css/shared.css
View file @ 0687b8e6
This diff is collapsed.
www/assets/css/shared.css.map
View file @ 0687b8e6
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment