188 lines
2.5 KiB
SCSS
188 lines
2.5 KiB
SCSS
@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;
|
|
}
|
|
}
|