Move source CSS to src directory so it can be excluded from the zip
This commit is contained in:
Lewis Dale committed
1 parent
5e75884965
commit
adf5cc7806
5 files changed
+3
-2
No files matched your search
@@ -1,603 +0,0 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--grid-gutter, var(--space-size-2));
|
||||
grid-template-columns:
|
||||
repeat(var(--grid-placement, auto-fill),
|
||||
minmax(var(--grid-min-item-size, 16rem), 1fr));
|
||||
}
|
||||
|
||||
.grid[data-grid="[20 80]"] {
|
||||
grid-template-columns: 9rem repeat( auto-fill, clamp(10rem,60vw,40rem));
|
||||
}
|
||||
|
||||
.grid[data-grid-cols="2"] {
|
||||
--grid-min-item-size: clamp(10rem, 50%, 25rem);
|
||||
}
|
||||
|
||||
.grid[data-grid-cols="3"] {
|
||||
--grid-min-item-size: clamp(8rem, 33%, 16rem);
|
||||
}
|
||||
|
||||
.grid[data-grid-cols="4"] {
|
||||
--grid-min-item-size: clamp(8rem, 25%, 16rem);
|
||||
|
||||
}
|
||||
|
||||
.grid[data-grid-cols="5"] {
|
||||
--grid-placement: auto-fill;
|
||||
--grid-min-item-size: clamp(9rem, 20%, 10rem);
|
||||
}
|
||||
|
||||
[class*=row] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--row-gutter, var(--space-size-2));
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[class*=row] > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.row-collapse {
|
||||
--row-gutter: 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.row-collapse > * {
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
|
||||
.with-sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-size-1);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-basis: 20rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.with-sidebar > :not(.sidebar) {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-inline-size: 50%;
|
||||
}
|
||||
|
||||
[class*=stack] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stack-sm {
|
||||
--stack-spacing: var(--space-size-0);
|
||||
}
|
||||
|
||||
.stack-md {
|
||||
--stack-spacing: var(--space-size-base);
|
||||
}
|
||||
|
||||
.stack-lg {
|
||||
--stack-spacing: var(--space-size-1);
|
||||
}
|
||||
|
||||
.stack-xl {
|
||||
--stack-spacing: var(--space-size-2);
|
||||
}
|
||||
|
||||
.stack-2xl {
|
||||
--stack-spacing: var(--space-size-3);
|
||||
}
|
||||
|
||||
[class*=stack] > * + * {
|
||||
-webkit-margin-before: var(--stack-spacing, 1.5rem);
|
||||
margin-block-start: var(--stack-spacing, 1.5rem)
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--hero-max-w, var(--screen-lg));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*=wrapper] {
|
||||
margin-left: var(--wrapper-margin, auto);
|
||||
margin-right: var(--wrapper-margin, auto);
|
||||
max-width: var(--wrapper-width, var(--screen-lg));
|
||||
padding: var(--wrapper-padding, var(--space-size-0));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper-lg {
|
||||
--wrapper-width: var(--screen-lg);
|
||||
}
|
||||
|
||||
.wrapper-md {
|
||||
--wrapper-width: var(--screen-md);
|
||||
}
|
||||
|
||||
.wrapper-sm {
|
||||
--wrapper-width: var(--screen-sm);
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.border-secondary {
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.border-accent {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.color-secondary {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.color-accent {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.flow > * + * {
|
||||
margin-top: var(--flow-space, var(--space-size-1));
|
||||
}
|
||||
|
||||
.flow-1l > * > * + * {
|
||||
margin-top: var(--flow-space, var(--space-size-1));
|
||||
}
|
||||
|
||||
.w-paragraph {
|
||||
max-width: 80ch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-content {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.basic-select {
|
||||
border: 2px solid black;
|
||||
border-top: 0px solid;
|
||||
background-color: white;
|
||||
background-image: linear-gradient(0deg, rgba(153, 153, 153, 0.1) 12.50%, #ffffff 12.50%, #ffffff 50%, rgba(153, 153, 153, 0.1) 50%, rgba(153, 153, 153, 0.1) 62.50%, #ffffff 62.50%, #ffffff 100%);
|
||||
background-size: 8.00px 8.00px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.basic-select a {
|
||||
padding: 0.2rem var(--space-size-0);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.basic-select a:hover,
|
||||
.basic-select a:focus {
|
||||
background: var(--color-cyan);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.basic-select::before {
|
||||
content: "128";
|
||||
display: block;
|
||||
background: black;
|
||||
color: white;
|
||||
background-image: linear-gradient(135deg, transparent 30%, red 30%, red 40%, yellow 40%, yellow 50%, #44ff00 50%, #44ff00 60%, #00fff7 60%, #00fff7 70%, transparent 70%);
|
||||
background-size: 15rem 100%;
|
||||
background-position: 110%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 var(--space-size-0);
|
||||
}
|
||||
|
||||
.headerbar {
|
||||
background: black;
|
||||
font-size: var(--text-size-base);
|
||||
position: fixed;
|
||||
max-width: calc(var(--wrapper-width, var(--screen-lg)) - (2 * var(--space-size-0)));
|
||||
bottom: 2%;
|
||||
color: white;
|
||||
text-align: left;
|
||||
text-shadow: -2px -2px 0 #000,
|
||||
0 -2px 0 #000,
|
||||
2px -2px 0 #000,
|
||||
2px 0 0 #000,
|
||||
2px 2px 0 #000,
|
||||
0 2px 0 #000,
|
||||
-2px 2px 0 #000,
|
||||
-2px 0 0 #000;
|
||||
padding: 0 var(--space-size-0);
|
||||
background-image: linear-gradient(135deg, transparent 30%, red 30%, red 40%, yellow 40%, yellow 50%, #44ff00 50%, #44ff00 60%, #00fff7 60%, #00fff7 70%, transparent 70%);
|
||||
background-size: 10rem 100%;
|
||||
background-position: right -1rem top;
|
||||
background-repeat: no-repeat;
|
||||
width: calc(100% - (2 * var(--space-size-0)));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blogpost {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
padding-left: var(--space-size-0);
|
||||
padding-right: var(--space-size-0);
|
||||
}
|
||||
|
||||
.blogpost .e-content {
|
||||
font-family: var(--font-family-mono-base);
|
||||
}
|
||||
|
||||
.blogpost:has(#mono:checked) .e-content {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.post-title a:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.circle {
|
||||
max-width: 4rem;
|
||||
flex: 1 1 4rem;
|
||||
}
|
||||
|
||||
.circle img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.linkback {
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
|
||||
text-decoration-thickness: 0.05rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 90%;
|
||||
border-width: 0px;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
padding-top: clamp(1.20rem, 1.08rem + 0.59vw, 1.50rem);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.comment:first-of-type {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.heading:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.micro {
|
||||
display: block;
|
||||
border: 2px solid black;
|
||||
background-image: linear-gradient(0deg, rgba(153, 153, 153, 0.1) 12.50%, #ffffff 12.50%, #ffffff 50%, rgba(153, 153, 153, 0.1) 50%, rgba(153, 153, 153, 0.1) 62.50%, #ffffff 62.50%, #ffffff 100%);
|
||||
background-size: 8.00px 8.00px;
|
||||
padding: var(--space-size-0);
|
||||
font-size: var(--text-size-1);
|
||||
}
|
||||
|
||||
.micro time {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pixelated {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
pre[class*="language"], code[class*="language"] {
|
||||
margin-top: var(--flow-space, var(--space-size-1)) !important;
|
||||
}
|
||||
|
||||
pre .comment {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.pumpkin {
|
||||
--color-pumpkin-body-fill: black;
|
||||
--color-pumpkin-body-stroke: transparent;
|
||||
--color-pumpkin-accent-fill: #FCEE21;
|
||||
--color-pumpkin-accent-stroke: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
[data-color-scheme="light"] .pumpkin {
|
||||
--color-pumpkin-body-fill: black;
|
||||
--color-pumpkin-body-stroke: transparent;
|
||||
--color-pumpkin-accent-fill: #FCEE21;
|
||||
--color-pumpkin-accent-stroke: transparent;
|
||||
}
|
||||
|
||||
.pumpkin {
|
||||
--color-pumpkin-body-fill: white;
|
||||
--color-pumpkin-body-stroke: black;
|
||||
--color-pumpkin-accent-fill: var(--color-rose);
|
||||
--color-pumpkin-accent-stroke: black;
|
||||
height: auto;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.pumpkin .body {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: var(--color-pumpkin-body-fill);
|
||||
stroke: var(--color-pumpkin-body-stroke);
|
||||
}
|
||||
|
||||
.pumpkin .detail {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: var(--color-pumpkin-accent-fill);
|
||||
stroke: var(--color-pumpkin-accent-stroke);
|
||||
}
|
||||
|
||||
.square {
|
||||
aspect-ratio: 1;
|
||||
-o-object-position: center center;
|
||||
object-position: center center;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mt-size-1 {
|
||||
margin-top: clamp(1.20rem, 1.08rem + 0.59vw, 1.50rem);
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.h-\[90vh\] {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.h-\[90dvh\] {
|
||||
height: 90dvh;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-\[100dvh\] {
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.max-h-\[90vh\] {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.max-h-\[90dvh\] {
|
||||
max-height: 90dvh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-\[60\%\] {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[10\%\] {
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
.max-w-\[40ch\] {
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
.max-w-\[75\%\] {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bg-lightGrey {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-none {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.py-size-0 {
|
||||
padding-top: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
|
||||
padding-bottom: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
|
||||
}
|
||||
|
||||
.pt-size-0 {
|
||||
padding-top: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
|
||||
}
|
||||
|
||||
.pl-none {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pt-size-2 {
|
||||
padding-top: clamp(1.44rem, 1.12rem + 1.58vw, 2.25rem);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-size-0 {
|
||||
font-size: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
|
||||
}
|
||||
|
||||
.text-size-2 {
|
||||
font-size: clamp(1.44rem, 1.12rem + 1.58vw, 2.25rem);
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: clamp(1.00rem, 1.00rem + 0.00vw, 1.00rem);
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.outline {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
.blur {
|
||||
--tw-blur: blur(8px);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.w-content {
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -1,563 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*
|
||||
Theme Name: ZX Spectrum
|
||||
Theme URI: https://lewisdale.dev
|
||||
Author: Lewis Dale
|
||||
Author URI: https://lewisdale.dev/
|
||||
Description: A blast from the paste
|
||||
Requires at least: 5.3
|
||||
Tested up to: 6.0
|
||||
Requires PHP: 5.6
|
||||
Version: 1.7
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: zxs
|
||||
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zx Spectrum';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url('/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff2') format('woff2'),
|
||||
url('/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zx Spectrum';
|
||||
font-style: bold;
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
src: url('/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff2') format('woff2'),
|
||||
url('/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Thin.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Thin.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-ThinItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-ExtraLight.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Light.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Light.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-LightItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-LightItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Regular.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Regular.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Italic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Medium.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Medium.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-MediumItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-SemiBold.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Bold.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Bold.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-BoldItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-ExtraBold.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-Black.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-Black.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("/fonts/inter/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
|
||||
url("/fonts/inter/Inter-BlackItalic.woff?v=3.19") format("woff");
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Variable font.
|
||||
Usage:
|
||||
|
||||
html { font-family: 'Inter', sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
html { font-family: 'Inter var', sans-serif; }
|
||||
}
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("/fonts/inter/Inter-roman.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("/fonts/inter/Inter-italic.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
[EXPERIMENTAL] Multi-axis, single variable font.
|
||||
|
||||
Slant axis is not yet widely supported (as of February 2019) and thus this
|
||||
multi-axis single variable font is opt-in rather than the default.
|
||||
|
||||
When using this, you will probably need to set font-variation-settings
|
||||
explicitly, e.g.
|
||||
|
||||
* { font-variation-settings: "slnt" 0deg }
|
||||
.italic { font-variation-settings: "slnt" 10deg }
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var experimental';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: oblique 0deg 10deg;
|
||||
src: url("/fonts/inter/Inter.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Christmas";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url("/fonts/christmas.ttf") format("ttf");
|
||||
}
|
||||
|
||||
/* VARIABLES GENERATED WITH TAILWIND CONFIG ON 02/01/2023.
|
||||
Tokens location: ./tailwind.config.js */
|
||||
|
||||
:root {
|
||||
--color-black: black;
|
||||
--color-white: white;
|
||||
--color-slate: #475569;
|
||||
--color-light: #f3f3f3;
|
||||
--color-dark: #252525;
|
||||
--color-rose: #9f1239;
|
||||
--color-lime: #84cc16;
|
||||
--color-cyan: #67e8f9;
|
||||
--color-christmas-darkGreen: #165b33;
|
||||
--color-christmas-lightGreen: #146b3a;
|
||||
--color-christmas-yellow: #f8b229;
|
||||
--color-christmas-lightRed: #ea4630;
|
||||
--color-christmas-darkRed: #930c24;
|
||||
--color-lightGrey: #f3f4f6;
|
||||
--color-darkGrey: #374151;
|
||||
--space-size-0: clamp(0.83rem, 0.9rem + -0.32vw, 0.67rem);
|
||||
--space-base: clamp(1rem, 1rem + 0vw, 1rem);
|
||||
--space-size-1: clamp(1.2rem, 1.08rem + 0.59vw, 1.5rem);
|
||||
--space-size-2: clamp(1.44rem, 1.12rem + 1.58vw, 2.25rem);
|
||||
--space-size-3: clamp(1.73rem, 1.09rem + 3.21vw, 3.38rem);
|
||||
--space-size-4: clamp(2.07rem, 0.91rem + 5.83vw, 5.06rem);
|
||||
--space-size-5: clamp(2.49rem, 0.5rem + 9.96vw, 7.59rem);
|
||||
--text-size-0: clamp(0.83rem, 0.9rem + -0.32vw, 0.67rem);
|
||||
--text-base: clamp(1rem, 1rem + 0vw, 1rem);
|
||||
--text-size-1: clamp(1.2rem, 1.08rem + 0.59vw, 1.5rem);
|
||||
--text-size-2: clamp(1.44rem, 1.12rem + 1.58vw, 2.25rem);
|
||||
--text-size-3: clamp(1.73rem, 1.09rem + 3.21vw, 3.38rem);
|
||||
--text-size-4: clamp(2.07rem, 0.91rem + 5.83vw, 5.06rem);
|
||||
--text-size-5: clamp(2.49rem, 0.5rem + 9.96vw, 7.59rem);
|
||||
--font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
||||
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-family-mono-base: ui-monospace, SFMono-Regular, Menlo, Monaco,
|
||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-family-mono: "ZX Spectrum", var(--font-family-mono-base);
|
||||
--font-family-spooky: "Creepy Pumkin", ui-monospace, SFMono-Regular, Menlo,
|
||||
Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-family-christmas: "Christmas", ui-sans-serif, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
||||
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--screen-sm: 640px;
|
||||
--screen-md: 768px;
|
||||
--screen-lg: 1024px;
|
||||
--screen-xl: 1280px;
|
||||
--screen-2xl: 1536px;
|
||||
}
|
||||
|
||||
/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */
|
||||
|
||||
/* Box sizing rules */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
|
||||
ul,
|
||||
ol,
|
||||
[role='list'] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh; /* safari-specific */
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
|
||||
a:not([class]) {
|
||||
-webkit-text-decoration-skip: ink;
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-family-spooky: "Creepy Pumkin", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-family-christmas: "Christmas", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--color-secondary: var(--color-white);
|
||||
--color-primary: var(--color-black);
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-primary);
|
||||
|
||||
font-size: var(--text-size-1);
|
||||
font-family: "Zx Spectrum", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-heading: "Zx Spectrum", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/*
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--color-primary: var(--color-white);
|
||||
--color-secondary: var(--color-dark);
|
||||
--color-accent: var(--color-light);
|
||||
--color-pumpkin-body-fill: var(--color-white);
|
||||
--color-pumpkin-body-stroke: var(--color-black);
|
||||
--color-pumpkin-accent-fill: var(--color-darkrose);
|
||||
--color-pumpkin-accent-stroke: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
body[data-color-scheme="light"] {
|
||||
--color-primary: var(--color-darkGrey);
|
||||
--color-secondary: var(--color-lightGrey);
|
||||
--color-accent: var(--color-slate);
|
||||
--color-pumpkin-body-fill: var(--color-black);
|
||||
--color-pumpkin-body-stroke: transparent;
|
||||
--color-pumpkin-accent-fill: #FCEE21;
|
||||
--color-pumpkin-accent-stroke: transparent;
|
||||
}
|
||||
|
||||
body[data-color-scheme="dark"] {
|
||||
--color-primary: var(--color-white);
|
||||
--color-secondary: var(--color-dark);
|
||||
--color-accent: var(--color-light);
|
||||
--color-pumpkin-body-fill: var(--color-white);
|
||||
--color-pumpkin-body-stroke: var(--color-black);
|
||||
--color-pumpkin-accent-fill: var(--color-darkrose);
|
||||
--color-pumpkin-accent-stroke: var(--color-black);
|
||||
} */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.heading {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight, 600);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1, .heading {
|
||||
font-size: clamp(1.73rem, 1.09rem + 3.21vw, 3.38rem);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.44rem, 1.12rem + 1.58vw, 2.25rem);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.20rem, 1.08rem + 0.59vw, 1.50rem);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
a, [role="link"] {
|
||||
color: inherit;
|
||||
text-decoration-thickness: 0.15rem;
|
||||
text-underline-offset: 0.3rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover, [role="link"]:hover {
|
||||
text-decoration-style: solid;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited, [role="link"]:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-family: var(--font-nav);
|
||||
font-size: var(--text-size-base);
|
||||
}
|
||||
|
||||
[data-color-scheme="spooky"] header nav {
|
||||
font-size: var(--text-size-2);
|
||||
}
|
||||
|
||||
details ul li {
|
||||
font-size: var(--text-size-base);
|
||||
}
|
||||
|
||||
[data-color-scheme="spooky"] details ul li {
|
||||
font-size: var(--text-size-1);
|
||||
}
|
||||
|
||||
summary {
|
||||
font-size: var(--text-size-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-color-scheme="spooky"] summary {
|
||||
font-size: var(--text-size-2);
|
||||
}
|
||||
|
||||
p {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
p a, p [role="link"] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
--row-gutter: var(--space-size-1);
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-size: var(--text-size-1);
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style: disc;
|
||||
padding-left: var(--space-size-1);
|
||||
}
|
||||
|
||||
article ol {
|
||||
list-style: decimal;
|
||||
padding-left: var(--space-size-3);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
border-color: var(--color-accent);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-secondary);
|
||||
padding: 2px 10px;
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-family-mono-base);
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "./global.css";
|
||||
@import "./cube.css";
|
||||
Reference in new issue
Block a user