lewis
/
ZX-Spectrum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ZX-Spectrum/style.css

563 lines
15 KiB
CSS
Raw Blame History

@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);
}
Reference in New Issue View Git Blame Copy Permalink