You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/static/global.css

584 lines
12 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/* fonts */
/* overpass-100normal - latin */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 100;
src:
local('Overpass Thin '),
local('Overpass-Thin'),
url('fonts/overpass/overpass-latin-100.woff2') format('woff2');
}
/* overpass-300normal - latin */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 300;
src:
local('Overpass Light '),
local('Overpass-Light'),
url('fonts/overpass/overpass-latin-300.woff2') format('woff2');
}
/* overpass-400normal - latin */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
src:
local('Overpass Light '),
local('Overpass-Light'),
url('fonts/overpass/overpass-latin-400.woff2') format('woff2');
}
/* overpass-700normal - latin */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 700;
src:
local('Overpass Bold '),
local('Overpass-Bold'),
url('fonts/overpass/overpass-latin-700.woff2') format('woff2');
}
/* fira-mono-400normal - latin */
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
src:
local('Fira Mono Regular '),
local('Fira Mono-Regular'),
url('fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2');
}
/* roboto-400normal - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('Roboto Regular '),
local('Roboto-Regular'),
url('fonts/roboto/roboto-latin-400.woff2') format('woff2');
}
/* roboto-400italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-display: swap;
font-weight: 400;
src:
local('Roboto Regular italic'),
local('Roboto-Regularitalic'),
url('fonts/roboto/roboto-latin-400italic.woff2') format('woff2');
}
/* roboto-500normal - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 500;
src:
local('Roboto Medium '),
local('Roboto-Medium'),
url('fonts/roboto/roboto-latin-500.woff2') format('woff2');
}
/* roboto-500italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-display: swap;
font-weight: 500;
src:
local('Roboto Medium italic'),
local('Roboto-Mediumitalic'),
url('fonts/roboto/roboto-latin-500italic.woff2') format('woff2');
}
body {
--font: 'Overpass', sans-serif;
/* --font: 'Roboto', 'sans-serif'; */
/* --font-mono: 'Overpass Mono', monospace; */
/* --font-mono: 'IBM Plex Mono'; */
--font-mono: 'Fira Mono', monospace;
--font-ui: var(--font-mono);
--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
/* base reset ----------------------------- */
html {
font-size: 62.5%;
-ms-text-size-adjust: 62.5%;
-webkit-text-size-adjust: 62.5%;
-ms-overflow-style: -ms-autohiding-scrollbar;
box-sizing: border-box;
border-collapse: collapse;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/* links reset ---------------------------- */
a {
text-decoration: none;
cursor: pointer;
color: inherit;
}
a:hover,
a:active {
color: var(--flash);
}
a:focus {
outline: none
}
/*
-----------------------------------------------
global styles
NOTE
!important overrides class-definitions
- some vars change inside media-queries!
-----------------------------------------------
*/
/* constants and calc -----------------------
- commonly used values
- under normal conditions, there's no need to touch these
- look confusing/cluttering at first,
but they simplify life immensely
-----------------------------------------------
*/
:root {
--nav-h: 6rem;
--top-offset: 6rem;
--sidebar-w: 24rem;
--main-width: 80rem;
--code-w: 72em;
--side-nav: 1.6rem;
--side-page: var(--side-nav);
/* easings */
--in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* theme vars ----------------------------- */
.theme-default {
--back: #ffffff;
--back-light: #fbfcfd;
--prime: #ff3e00;
--second: #676778;
--flash: #40b3ff;
--heading: var(--second);
--text: #333; /* hsl(36, 3%, 62%) */
--border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */
}
/* typo vars ------------------------------ */
.typo-default {
--unit: .8rem;
--code-fs: 1.3rem;
--h6: 1.6rem;
--h5: 1.6rem;
--h4: 1.8rem;
--h3: 2.4rem;
--h2: 3rem;
--h1: 3.2rem;
--linemax: 42em; /* max line-length */
--lh: calc(4/2.2); /* base line-height */
}
/* typography ----------------------------- */
body {
font: 400 var(--h4)/var(--lh) var(--font);
background-color: var(--back);
color: var(--text);
}
h1, h2, h3, h4, h5, h6, blockquote {
margin: 0;
color: var(--heading);
position: relative;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700 }
h6 { font-size: var(--h6) }
h5 { font-size: var(--h5) }
h4 { font-size: var(--h4) }
h3 { font-size: var(--h3) }
h2 { font-size: var(--h2) }
h1 { font-size: var(--h1) }
p, ol, ul {
line-height: 1.5;
margin: 0 0 1em 0;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
/* font-family: var(--font-system); */
}
.b, b, strong { font-weight: 500 }
tt, code, kbd, samp {
font: 400 var(--code-fs)/1.7 var(--font-mono);
}
code {
position: relative;
border-radius: 0.3em;
white-space: nowrap;
/* border-top: .1rem solid #e5e5e9;
border-left: .1rem solid #e5e5e9; */
/* color: inherit; */
color: #444;
-webkit-font-smoothing: initial;
}
pre code {
top: 0;
white-space: inherit;
background-color: none;
}
::selection {
background: var(--flash);
color: white;
}
/* opinionated styles --------------------- */
h1, h2 {
font-family: var(--font);
line-height: 1.2;
}
li:not(.white) > h2 {
color: var(--second)
}
blockquote {
position: relative;
margin: 1.6rem 0 2.4rem;
padding: 2rem 2.4rem 1.8rem 2.4rem;
border-radius: var(--border-r);
font-family: var(--font);
max-width: var(--linemax);
}
blockquote p {
font-size: var(--h5);
}
blockquote :last-child {
margin: 0;
}
/* buttons -------------------------------- */
button {
font-family: inherit;
font-size: inherit;
background-color: transparent;
border: none;
color: currentColor;
}
button:focus { outline: 0 }
button[disabled] {
opacity: .55;
pointer-events: none;
}
button > svg {
position: relative;
top: -.1rem;
width: 2rem !important;
height: 2rem !important;
}
/* options */
button[outline] {
min-height: var(--bttn-calc-h);
line-height: var(--bttn-calc-h);
border: var(--bttn-outline) solid currentColor;
background-color: white;
color: currentColor;
}
/* links -------------------------------------
- idea from https://up.docs.apex.sh
How can this be solved?
Setup for all links is risky/tricky
We need global <a>-styles and <ul>-styles inside markdown.
These bleed into places, where not wanted (i.e. nav, homepage)
Same with lists - see below
THIS WAY IS SHITTY!!
I'm too blind to see...
*/
.linkify a:not(.open-in-repl) {
position: relative;
padding: 0 0 .1rem 0;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
user-select: none;
/* white-space: nowrap; */
color: inherit;
transition: color .2s, border .2s, padding .2s;
}
.linkify a:not(.open-in-repl):hover {
color: var(--flash);
}
.linkify a:not(.open-in-repl):hover {
padding: 0;
border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
}
/* .linkify a:not(.open-in-repl):before {
content: '';
position: absolute;
width: 100%;
height: .2rem;
bottom: -.2rem;
left: 0;
white-space: nowrap;
background: var(--prime);
border-radius: var(--border-r);
visibility: hidden;
transform: scaleX(0);
transform-origin: left center;
transition: all .15s var(--out-cubic);
z-index: -1;
}
.linkify a:not(.open-in-repl):hover:before {
visibility: visible;
transform: scaleX(1);
} */
a:hover:not(.disabled) > .icon { stroke: var(--flash) }
/* lists ---------------------------------- */
.listify ol,
.listify ul {
--list-padding: 2.9rem;
list-style: none;
color: currentColor;
margin-left: var(--list-padding);
}
.listify ol > li,
.listify ul > li {
max-width: calc(var(--linemax) - var(--list-padding));
line-height: 1.5;
margin: 0 0 0.4rem 0;
}
.listify ul > li:before {
content: '';
position: absolute;
margin-top: 1.1rem;
margin-left: -1.8rem;
background-color: var(--second);
width: .8rem;
height: 0.8rem;
border-radius: 2px;
opacity: 0.7;
}
.listify ol { list-style: decimal }
/* tables --------------------------------- */
table {
width: 100%;
font-size: var(--h5);
}
td, th {
text-align: left;
border-bottom: 1px solid #eee;
padding: 0.4rem 0.8rem 0.4rem 0;
}
table code,
table span {
white-space: pre;
}
/* grid ----------------------------------- */
.grid,
.grid.half {
display: grid;
grid-gap: 2.4rem;
grid-template-columns: 1fr;
align-items: center;
}
.grid.stretch { align-items: stretch }
.grid > .cols-2,
.grid > .cols-3 { grid-column: span 1 }
/* helper styles -------------------------- */
.flex-auto { flex: 1 0 auto }
.py0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.legend, figcaption,
.post aside {
max-width: none;
margin: 0 auto;
padding: 1.6rem 0 0 .8rem;
font: 1.2rem/1.6 var(--font-ui);
}
.filename {
display: inline-block;
padding: 1.6rem 0 0 1rem;
font: var(--h6) var(--font-ui);
}
.box {
padding: 2.4rem 3.2rem;
border-radius: var(--border-r);
}
.open-in-repl {
position: absolute;
margin-top: 4rem;
margin-left: -2.5rem;
width: 3.6rem;
height: 3.6rem;
padding: .9rem;
background-color: var(--back-light);
border-radius: 50%;
border-left: .1rem solid #c7c6c6;
}
/* theme colors --------------------------- */
.prime { color: var(--prime) !important }
.second { color: var(--second) !important }
.flash { color: var(--flash) !important }
.black { color: black !important }
.white { color: white !important }
.back { background-color: var(--back) !important }
.back-light { background-color: var(--back-light) !important }
.bg-prime { background-color: var(--prime) !important }
.bg-second { background-color: var(--second) !important }
.bg-flash { background-color: var(--flash) !important }
/*
-----------------------------------------------
inputs
-----------------------------------------------
*/
input[type="checkbox"] {
/* display: block; */
position: relative;
height: 1em;
width: calc(100% - 0.6em);
max-width: 2em;
top: -2px;
border-radius: 0.5em;
-webkit-appearance: none;
outline: none;
margin: 0 0.6em 0 0;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
display: block;
height: 100%;
width: 100%;
border-radius: 1em;
top: 0px;
left: 0px;
background: var(--second);
box-sizing: border-box;
-webkit-transition: .25s ease-out;
padding: 2px;
box-sizing: content-box;
}
input[type="checkbox"]:checked::before {
background: var(--prime);
}
input[type="checkbox"]::after {
content: "";
position: absolute;
display: block;
height: 1em;
width: 1em;
top: 2px;
left: 2px;
border-radius: 1em;
background: white;
box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1);
-webkit-transition: .2s ease-out;
}
input[type="checkbox"]:checked::after {
left: calc(100% - 9px);
}
/*
-----------------------------------------------
media-queries
-----------------------------------------------
*/
@media screen and (min-width: 768px) {
:root {
--side-page: 14vw;
--top-offset: 10rem;
--side-nav: 4.8rem;
}
}
@media screen and (min-width: 840px) {
.grid.half,
.grid { grid-template-columns: repeat(2, 1fr) }
.grid > .cols-2,
.grid > .cols-3 { grid-column: span 2 }
}
@media screen and (min-width: 1100px) {
.grid { grid-template-columns: repeat(3, 1fr) }
.grid > .cols-2 { grid-column: span 2 }
.grid > .cols-3 { grid-column: span 3 }
}