ZX-Spectrum/assets/css/global.css

@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);
}