detail page port
This commit is contained in:
nicwands
@@ -1,22 +1,20 @@
|
||||
:root {
|
||||
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
||||
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
||||
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||||
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
||||
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
|
||||
--ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985);
|
||||
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
||||
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
||||
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
||||
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
|
||||
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
|
||||
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
|
||||
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use 'functions' as *;
|
||||
|
||||
@mixin size-font($ds, $ms) {
|
||||
@mixin size-font($ms, $ds) {
|
||||
font-size: mobile-vw($ms);
|
||||
|
||||
&.vh {
|
||||
@@ -16,24 +16,165 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Super
|
||||
@mixin s1 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(240px, 240px);
|
||||
}
|
||||
@mixin s2 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(50px, 160px);
|
||||
}
|
||||
@mixin s3 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(60px, 140px);
|
||||
}
|
||||
@mixin s4 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.046em;
|
||||
@include size-font(115px, 115px);
|
||||
}
|
||||
|
||||
// Header
|
||||
@mixin h1 {
|
||||
font-family: var(--font-display);
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(46px, 85px);
|
||||
}
|
||||
@mixin h2 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(32px, 60px);
|
||||
}
|
||||
@mixin h3 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(32px, 40px);
|
||||
}
|
||||
@mixin h4 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.9;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(18px, 30px);
|
||||
}
|
||||
@mixin h5 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(18px, 20px);
|
||||
}
|
||||
@mixin h6 {
|
||||
font-family: var(--font-druk);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
text-transform: none;
|
||||
letter-spacing: -0.01em;
|
||||
@include size-font(18px, 18px);
|
||||
}
|
||||
|
||||
// Emphasis
|
||||
@mixin em1 {
|
||||
font-family: var(--font-gt);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 0.8;
|
||||
letter-spacing: -0.06em;
|
||||
text-transform: none;
|
||||
@include size-font(48px, 80px);
|
||||
}
|
||||
@mixin em2 {
|
||||
font-family: var(--font-gt);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.01em;
|
||||
text-transform: none;
|
||||
@include size-font(36px, 61px);
|
||||
}
|
||||
@mixin em3 {
|
||||
font-family: var(--font-gt);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 0.8;
|
||||
text-transform: none;
|
||||
@include size-font(22px, 41px);
|
||||
}
|
||||
|
||||
// Quote
|
||||
@mixin q1 {
|
||||
font-family: var(--font-gt);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.3;
|
||||
@include size-font(30px, 30px);
|
||||
text-transform: none;
|
||||
@include size-font(22px, 35px);
|
||||
}
|
||||
|
||||
@mixin h1-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
@include size-font(22px, 22px);
|
||||
// Paragraph
|
||||
@mixin p-l {
|
||||
font-family: var(--font-arial);
|
||||
font-weight: 700;
|
||||
line-height: 0.9;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
@include size-font(32px, 45px);
|
||||
}
|
||||
|
||||
@mixin p {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
@include size-font(12px, 12px);
|
||||
font-family: var(--font-arial);
|
||||
font-weight: 700;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
@include size-font(16px, 21px);
|
||||
}
|
||||
@mixin p-s {
|
||||
font-family: var(--font-arial);
|
||||
font-weight: 700;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
@include size-font(14px, 18px);
|
||||
}
|
||||
@mixin p-xs {
|
||||
font-family: var(--font-arial);
|
||||
font-weight: 700;
|
||||
line-height: 0.94;
|
||||
text-transform: uppercase;
|
||||
@include size-font(14px, 16px);
|
||||
}
|
||||
@mixin p-xxs {
|
||||
font-family: var(--font-arial);
|
||||
font-weight: 700;
|
||||
line-height: 0.94;
|
||||
text-transform: uppercase;
|
||||
@include size-font(12px, 14px);
|
||||
}
|
||||
|
||||
@@ -11,35 +11,42 @@
|
||||
900 - Black (Heavy)
|
||||
*/
|
||||
|
||||
/* Leibniz Fraktur */
|
||||
/* ARIAL NARROW */
|
||||
@font-face {
|
||||
font-family: 'Leibniz Fraktur';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/neuefraktur.woff2') format('woff2'),
|
||||
url('/fonts/neuefraktur.woff') format('woff');
|
||||
}
|
||||
|
||||
/* Geist Mono */
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
font-family: 'Arial Narrow';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src:
|
||||
url('/fonts/geist-mono-bold.woff2') format('woff2'),
|
||||
url('/fonts/geist-mono-bold.woff') format('woff');
|
||||
src: url('/fonts/arial-narrow-bold.woff2') format('woff2'),
|
||||
url('/fonts/arial-narrow-bold.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
font-family: 'Arial Narrow';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('/fonts/arial-narrow-bold-italic.woff2') format('woff2'),
|
||||
url('/fonts/arial-narrow-bold-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
/* DRUK WIDE */
|
||||
@font-face {
|
||||
font-family: 'Druk Wide';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('/fonts/druk-wide-cy-tt-super.woff2') format('woff2'),
|
||||
url('/fonts/druk-wide-cy-tt-super.woff') format('woff');
|
||||
}
|
||||
|
||||
/* GT SUPER */
|
||||
@font-face {
|
||||
font-family: 'GT Super';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/geist-mono.woff2') format('woff2'),
|
||||
url('/fonts/geist-mono.woff') format('woff');
|
||||
src: url('/fonts/gt-super-display-regular-italic.woff2') format('woff2'),
|
||||
url('/fonts/gt-super-display-regular-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-display: 'Leibniz Fraktur', serif;
|
||||
--font-mono: 'Geist Mono', monospace;
|
||||
--font-arial: 'Arial Narrow', sans-serif;
|
||||
--font-druk: 'Druk Wide', sans-serif;
|
||||
--font-gt: 'GT Super', serif;
|
||||
}
|
||||
|
||||
@@ -60,6 +60,14 @@ $mobile-height: get('viewports.mobile.height');
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
@include desktop {
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@content;
|
||||
@@ -170,18 +178,66 @@ $mobile-height: get('viewports.mobile.height');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
|
||||
@for $i from 0 through $num-children {
|
||||
&:nth-child(#{$i + 1}) {
|
||||
transition-delay: #{$stagger * $i + $base-delay}ms;
|
||||
@mixin text-flip($duration: 400, $easing: linear) {
|
||||
.text {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
span:last-child {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateY(105%);
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
&:hover,
|
||||
&.active {
|
||||
.text {
|
||||
span:first-child {
|
||||
animation: button-flip-out $duration $easing forwards;
|
||||
}
|
||||
span:last-child {
|
||||
animation: button-flip-in $duration $easing forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes button-flip-in {
|
||||
from {
|
||||
transform: translateY(105%);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@keyframes button-flip-out {
|
||||
from {
|
||||
transform: none;
|
||||
}
|
||||
to {
|
||||
transform: translateY(-105%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
@include desktop {
|
||||
&:hover {
|
||||
@content;
|
||||
}
|
||||
@mixin scorecard-dot {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 46%;
|
||||
aspect-ratio: 1;
|
||||
background: var(--theme-bg);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform var(--td) var(--te);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,36 @@
|
||||
@use 'functions' as *;
|
||||
|
||||
// z-index
|
||||
.lily-cursor {
|
||||
z-index: 20;
|
||||
.site-orchestra {
|
||||
z-index: 100;
|
||||
}
|
||||
.stats,
|
||||
.grid-debug {
|
||||
z-index: 99 !important;
|
||||
}
|
||||
|
||||
main.front-page,
|
||||
.site-mobile-menu {
|
||||
z-index: 80;
|
||||
}
|
||||
.webgl-canvas {
|
||||
z-index: 70;
|
||||
}
|
||||
.cart {
|
||||
z-index: 60;
|
||||
}
|
||||
.site-header {
|
||||
z-index: 10;
|
||||
z-index: 50;
|
||||
}
|
||||
.site-footer {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.cart {
|
||||
z-index: 80;
|
||||
}
|
||||
main.front-page {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,15 +21,15 @@
|
||||
$layout: (
|
||||
'columns-count': (
|
||||
5,
|
||||
18,
|
||||
8,
|
||||
),
|
||||
'columns-gap': (
|
||||
20px,
|
||||
20px,
|
||||
0px,
|
||||
),
|
||||
'margin': (
|
||||
30px,
|
||||
60px,
|
||||
20px,
|
||||
20px,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -48,8 +48,7 @@ $layout: (
|
||||
(var(--layout-column-count) - 1) *
|
||||
var(--layout-column-gap)
|
||||
)
|
||||
) /
|
||||
var(--layout-column-count)
|
||||
) / var(--layout-column-count)
|
||||
);
|
||||
|
||||
@include desktop {
|
||||
|
||||
@@ -28,6 +28,13 @@ button {
|
||||
cursor: revert;
|
||||
}
|
||||
|
||||
/* Remove list styles (bullets/numbers) */
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* For images to not be able to exceed their container */
|
||||
img {
|
||||
max-inline-size: 100%;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
html {
|
||||
&:not(.dev) {
|
||||
&,
|
||||
* {
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
&:not(.dev) {
|
||||
&,
|
||||
* {
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.lenis {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth {
|
||||
scroll-behavior: auto;
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth [data-lenis-prevent] {
|
||||
overscroll-behavior: contain;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.lenis.lenis-stopped {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lenis.lenis-scrolling iframe {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Fades
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 400ms;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
@@ -41,3 +41,13 @@
|
||||
.slide-left-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
// Page
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: opacity 400ms;
|
||||
}
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
187
styles/global.scss
Normal file
187
styles/global.scss
Normal file
@@ -0,0 +1,187 @@
|
||||
@use 'reset' as *;
|
||||
@use 'fonts' as *;
|
||||
@use 'colors' as *;
|
||||
@use 'easings' as *;
|
||||
@use 'functions' as *;
|
||||
@use 'layout' as *;
|
||||
@use 'utils' as *;
|
||||
@use 'font-style' as *;
|
||||
@use 'themes' as *;
|
||||
@use 'scroll' as *;
|
||||
@use 'layers' as *;
|
||||
@use 'transitions' as *;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
|
||||
font-variant-numeric: lining-nums proportional-nums ordinal;
|
||||
font-feature-settings: 'dlig' on;
|
||||
|
||||
// Standard transitions
|
||||
--td: 500ms;
|
||||
--te: var(--ease-out-expo);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Type
|
||||
.s1 {
|
||||
@include s1;
|
||||
}
|
||||
.s2 {
|
||||
@include s2;
|
||||
}
|
||||
.s3 {
|
||||
@include s3;
|
||||
}
|
||||
.s4 {
|
||||
@include s4;
|
||||
}
|
||||
.h1,
|
||||
h1 {
|
||||
@include h1;
|
||||
}
|
||||
.h2,
|
||||
h2 {
|
||||
@include h2;
|
||||
}
|
||||
.h3,
|
||||
h3 {
|
||||
@include h3;
|
||||
}
|
||||
.h4,
|
||||
h4 {
|
||||
@include h4;
|
||||
}
|
||||
.h5,
|
||||
h5 {
|
||||
@include h5;
|
||||
}
|
||||
.h6,
|
||||
h6 {
|
||||
@include h6;
|
||||
}
|
||||
.em1 {
|
||||
@include em1;
|
||||
}
|
||||
.em2 {
|
||||
@include em2;
|
||||
}
|
||||
.em3 {
|
||||
@include em3;
|
||||
}
|
||||
.q1 {
|
||||
@include q1;
|
||||
}
|
||||
.p-l {
|
||||
@include p-l;
|
||||
}
|
||||
.p,
|
||||
body,
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input {
|
||||
@include p;
|
||||
}
|
||||
.p-s {
|
||||
@include p-s;
|
||||
}
|
||||
.p-xs {
|
||||
@include p-xs;
|
||||
}
|
||||
.p-xxs {
|
||||
@include p-xxs;
|
||||
}
|
||||
|
||||
// Rich text styling
|
||||
.entry {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
p {
|
||||
min-height: 1px;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
& > * {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
& > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
width: desktop-vw(577px);
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
ol {
|
||||
counter-reset: list;
|
||||
|
||||
li::before {
|
||||
counter-increment: list;
|
||||
content: counter(list);
|
||||
padding-right: 0.5em;
|
||||
font-variant-numeric: lining-nums proportional-nums;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generic animations
|
||||
@keyframes blink {
|
||||
5% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fadeup {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
@use 'colors' as *;
|
||||
@use 'themes' as *;
|
||||
@use 'easings' as *;
|
||||
@use 'reset' as *;
|
||||
@use 'layers' as *;
|
||||
@use 'functions' as *;
|
||||
@use 'utils' as *;
|
||||
@use 'fonts' as *;
|
||||
@use 'font-style' as *;
|
||||
@use 'layout' as *;
|
||||
@use 'scroll' as *;
|
||||
@use 'transitions' as *;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// Type
|
||||
.h1,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include h1;
|
||||
|
||||
&.mono {
|
||||
@include h1-mono;
|
||||
}
|
||||
}
|
||||
.p,
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
pre,
|
||||
span,
|
||||
label,
|
||||
li {
|
||||
@include p;
|
||||
}
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
5% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bonk {
|
||||
0% {
|
||||
transform: rotate(calc(var(--bonk-angle) * -1));
|
||||
}
|
||||
50% {
|
||||
transform: rotate(var(--bonk-angle));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user