Initial commit
This commit is contained in:
Lewis Dale
commit
bf20024ff9
|
|
@ -0,0 +1,587 @@
|
|||
.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)));
|
||||
top: 92%;
|
||||
color: white;
|
||||
text-align: left;
|
||||
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:not(:has(#mono:checked)) .e-content {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
/*
|
||||
* Pojoaque Style by Jason Tate
|
||||
* http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
|
||||
* Based on Solarized Style from http://ethanschoonover.com/solarized
|
||||
* http://softwaremaniacs.org/media/soft/highlight/test.html
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
hyphens: none;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #dccf8f;
|
||||
text-shadow: 0;
|
||||
}
|
||||
|
||||
pre > code[class*="language-"] {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre[class*="language-"],
|
||||
:not(pre) > code[class*="language-"] {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #000;
|
||||
color: #DCCF8F;
|
||||
background: #181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #586e75;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.number,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #468966;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #b89859;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #dccf8f;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.regex {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.keyword {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
.token.attr-value {
|
||||
color: #468966;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.variable,
|
||||
.token.placeholder {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #b89859;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #ffb03b;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.statement,
|
||||
.token.deleted {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #dccf8f;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
.pojoaque-colors {
|
||||
color: #586e75;
|
||||
color: #b64926;
|
||||
color: #468966;
|
||||
color: #ffb03b;
|
||||
color: #b58900;
|
||||
color: #b89859;
|
||||
color: #dccf8f;
|
||||
color: #d3a60c;
|
||||
color: #cb4b16;
|
||||
color: #dc322f;
|
||||
color: #073642;
|
||||
color: #181914;
|
||||
}
|
||||
*/
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<?php
|
||||
|
||||
add_theme_support( 'title-tag' );
|
||||
|
||||
function zxs_add_themes() {
|
||||
wp_enqueue_style('zxs_globals', get_stylesheet_directory_uri() . "/style.css", array(), wp_get_theme()->get( 'Version' ), 'all');
|
||||
wp_enqueue_style('zxs_cubeCSS', get_stylesheet_directory_uri() . "/assets/css/cube.css", array(), wp_get_theme()->get( 'Version' ), 'all');
|
||||
}
|
||||
|
||||
add_action('wp_enqueue_scripts', 'zxs_add_themes');
|
||||
|
||||
function zxs_add_class( $classes ) {
|
||||
$classes = array_diff( $classes, array( 'flow' ) );
|
||||
if ( ! is_singular() ) {
|
||||
if ( 'page' !== get_post_type() ) {
|
||||
$classes[] = 'flow';
|
||||
}
|
||||
}
|
||||
return $classes;
|
||||
}
|
||||
add_filter('post_class', 'zxs_add_class');
|
||||
|
||||
add_action('after_setup_theme', function() {
|
||||
|
||||
// remove SVG and global styles
|
||||
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
|
||||
|
||||
// remove wp_footer actions which add's global inline styles
|
||||
remove_action('wp_footer', 'wp_enqueue_global_styles', 1);
|
||||
|
||||
// remove render_block filters which adding unnecessary stuff
|
||||
remove_filter('render_block', 'wp_render_duotone_support');
|
||||
remove_filter('render_block', 'wp_restore_group_inner_container');
|
||||
remove_filter('render_block', 'wp_render_layout_support_flag');
|
||||
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
|
||||
|
||||
});
|
||||
|
||||
function zxs_remove_block_library_css() {
|
||||
wp_dequeue_style( 'wp-block-library' );
|
||||
wp_dequeue_style( 'wp-block-library-theme' );
|
||||
wp_dequeue_style( 'wc-blocks-style' ); // Remove WooCommerce block CSS
|
||||
// wp_dequeue_style( 'classic-theme-styles' );
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'zxs_remove_block_library_css', 100 );
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<?php wp_head(); ?>
|
||||
<link type="application/rss+xml" rel="alternate" href="<?php bloginfo('rss2_url'); ?>" title="Lewis Dale's Blog" />
|
||||
<link type="application/atom+xml" rel="alternate" href="<?php bloginfo('atom_url'); ?>" title="Lewis Dale's Blog" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body <?= body_class() ?>>
|
||||
<?php wp_body_open(); ?>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<?php
|
||||
get_header();
|
||||
?>
|
||||
<?php
|
||||
if ( is_front_page() ) {
|
||||
get_template_part( 'parts/home' );
|
||||
} else if ( is_home() ) {
|
||||
get_template_part( 'parts/blog' );
|
||||
} else if ( false ) {
|
||||
// This is a bad idea
|
||||
echo 'Microblog';
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
get_footer();
|
||||
?>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?php get_header(); ?>
|
||||
|
||||
<?php
|
||||
$args = array('post_type' => 'microblog', 'posts_per_page'=> 6, 'paged' => get_query_var('paged') ?? 1 );
|
||||
$myQuery = new WP_Query($args);
|
||||
|
||||
$post = $wp_query->get_queried_object();
|
||||
|
||||
?>
|
||||
<main class="bg-lightGrey max-w-screen min-h-screen">
|
||||
<section class="wrapper-md p-none pt-size-0">
|
||||
<h1 class="headerbar"><?= $post->post_name ?></h1>
|
||||
<div class="h-[90vh] h-[90dvh] overflow-y-scroll">
|
||||
<ul class="stack-xl text-size-0">
|
||||
<?php if ($myQuery->have_posts()) : ?>
|
||||
<?php while ($myQuery->have_posts()) : $myQuery->the_post(); ?>
|
||||
<li class="micro">
|
||||
<time><?= get_the_date() ?> <?= the_time() ?></time>
|
||||
<div><?= the_content() ?></div>
|
||||
</li>
|
||||
<?php endwhile; ?>
|
||||
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<div class="row items-between py-size-0">
|
||||
<?php next_posts_link( '< Older', $myQuery->max_num_pages ); ?>
|
||||
<?php previous_posts_link('Newer >'); ?>
|
||||
</div>
|
||||
|
||||
<?php wp_reset_postdata(); ?>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<main class="bg-lightGrey max-w-screen min-h-screen flex flex-col justify-center items-center">
|
||||
<section class="wrapper-sm">
|
||||
<h1 class="text-center">Blog</h1>
|
||||
<div class="basic-select">
|
||||
<ul class="h-feed">
|
||||
<?php while ( have_posts() ) {
|
||||
the_post();
|
||||
?>
|
||||
<li class="h-entry">
|
||||
<?= the_title(sprintf('<a href="%s" class="u-url">', esc_url(get_permalink())), '</a>') ?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><?php next_posts_link('< Older') ?></li>
|
||||
<li><?php previous_posts_link('> Newer') ?></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="pt-size-2 text-center">
|
||||
© 2023 Lewis Dale
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<main class="bg-lightGrey max-w-screen">
|
||||
<section class="wrapper-sm h-screen h-[100dvh] flex flex-col justify-center items-center">
|
||||
<h1>LewisDale.dev</h1>
|
||||
|
||||
<nav class="basic-select w-full">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="/micro">Microblog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<footer class="pt-size-2">
|
||||
© 2023 Lewis Dale
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<?= get_header() ?>
|
||||
<main class="bg-white max-w-screen max-h-[90vh] max-h-[90dvh] overflow-y-scroll">
|
||||
<article class="blogpost wrapper-lg flow mx-auto h-entry py-size-0">
|
||||
<a class="" href="/blog">Back to blog</a>
|
||||
<div class="row w-content">
|
||||
<input type="checkbox" id="mono" />
|
||||
<label for="mono">
|
||||
Use ZX Spectrum font
|
||||
</label>
|
||||
</div>
|
||||
<h1 class="headerbar"><?= the_title() ?></h1>
|
||||
|
||||
<div class="flow-1l">
|
||||
<?= the_content() ?>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section id="responses" class="wrapper-lg mx-auto flow-1l">
|
||||
<?php
|
||||
if ( comments_open() || get_comments_number() ) {
|
||||
comments_template();
|
||||
}
|
||||
?>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<link href="<?= get_stylesheet_directory_uri() . "/assets/css/prism-pojoaque.css" ?>" rel="stylesheet" />
|
||||
<script defer src="<?= get_stylesheet_directory_uri() . "/assets/js/prism.js" ?>"></script>
|
||||
|
||||
<?= get_footer() ?>
|
||||
|
|
@ -0,0 +1,561 @@
|
|||
@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: "Zx Spectrum", ui-monospace, SFMono-Regular, Menlo, Monaco,
|
||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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;
|
||||
}
|
||||
Loading…
Reference in New Issue