mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
372 lines
9.2 KiB
CSS
372 lines
9.2 KiB
CSS
@import "tailwindcss";
|
|
@import "./shiki-transformers.css";
|
|
@import "./docsearch.css";
|
|
|
|
/**
|
|
* @license
|
|
* MyFonts Webfont Build ID 3867246
|
|
*
|
|
* The fonts listed in this notice are subject to the End User License
|
|
* Agreement(s) entered into by the website owner. All other parties are
|
|
* explicitly restricted from using the Licensed Webfonts(s).
|
|
*
|
|
* Webfont: Eurostile LT Pro Bold by Linotype
|
|
* Webfont: Eurostile LT Pro Extended #2 by Linotype
|
|
* Webfont: Eurostile LT Pro Bold Extended #2 by Linotype
|
|
*/
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro";
|
|
src:
|
|
url("https://static.mux.com/fonts/EurostileLTProBold/font.woff2") format("woff2"),
|
|
url("https://static.mux.com/fonts/EurostileLTProBold/font.woff") format("woff");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro Fallback";
|
|
src: local("Arial");
|
|
font-weight: bold;
|
|
ascent-override: 88.67%;
|
|
descent-override: 25.22%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 109.85%;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro Extended";
|
|
src:
|
|
url("https://static.mux.com/fonts/EurostileLTProExtended2/font.woff2") format("woff2"),
|
|
url("https://static.mux.com/fonts/EurostileLTProExtended2/font.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: auto;
|
|
}
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro Extended";
|
|
src:
|
|
url("https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff2") format("woff2"),
|
|
url("https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff") format("woff");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: auto;
|
|
}
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro Extended Fallback";
|
|
src: local("Arial");
|
|
font-weight: normal;
|
|
ascent-override: 71.41%;
|
|
descent-override: 19.47%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 146.9%;
|
|
}
|
|
@font-face {
|
|
font-family: "Eurostile LT Pro Extended Fallback";
|
|
src: local("Arial");
|
|
font-weight: bold;
|
|
ascent-override: 71.41%;
|
|
descent-override: 19.47%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 146.9%;
|
|
}
|
|
|
|
/* theme inline tells tailwind to reference the value of these properties */
|
|
/* biome-ignore assist/source/useSortedProperties: Tailwind theme namespace resets are order-sensitive. */
|
|
@theme inline {
|
|
--font-*: initial;
|
|
/* --font-instrument-sans and --font-ibm-plex-mono are defined in Base.astro */
|
|
--font-sans: var(--font-instrument-sans);
|
|
--font-mono: var(--font-ibm-plex-mono);
|
|
--font-display-compact: "Eurostile LT Pro", "Eurostile LT Pro Fallback", sans-serif;
|
|
--font-display: "Eurostile LT Pro Extended", "Eurostile LT Pro Extended Fallback", sans-serif;
|
|
}
|
|
|
|
/* biome-ignore assist/source/useSortedProperties: Tailwind theme namespace resets are order-sensitive. */
|
|
@theme {
|
|
--color-*: initial;
|
|
|
|
--color-white: white;
|
|
--color-black: black;
|
|
|
|
--color-faded-black: #1e1d1d;
|
|
--color-soot: #32302f;
|
|
--color-warm-gray: #403c38;
|
|
--color-manila-dark: #bfb39e;
|
|
--color-manila-75: #ccc3ab;
|
|
--color-manila-50: #dcd2bb;
|
|
--color-manila-25: #e7ddc6;
|
|
--color-manila-light: #f3e7d2;
|
|
|
|
--color-bright-yellow: #ffca18;
|
|
--color-gold: #ffa81b;
|
|
--color-orange: #ff6200;
|
|
--color-red: #eb3132;
|
|
--color-magenta: #cc3566;
|
|
--color-magenta-dark: #922e4f;
|
|
|
|
/* Typography */
|
|
--tracking-*: initial;
|
|
--tracking-tightest: -0.03em;
|
|
--tracking-tighter: -0.02em;
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0;
|
|
|
|
--text-*: initial;
|
|
|
|
--text-h1: 3.75rem; /* 60px */
|
|
--text-h1--line-height: 1.1;
|
|
--text-h1--letter-spacing: var(--tracking-tightest);
|
|
--text-h1--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h15: 2.375rem; /* 38px */
|
|
--text-h15--line-height: 1.1;
|
|
--text-h15--letter-spacing: var(--tracking-tightest);
|
|
--text-h15--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h2: 1.75rem; /* 28px */
|
|
--text-h2--line-height: 1;
|
|
--text-h2--letter-spacing: var(--tracking-tighter);
|
|
--text-h2--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h25: 1.5rem; /* 24px */
|
|
--text-h25--line-height: 1;
|
|
--text-h25--letter-spacing: var(--tracking-tighter);
|
|
--text-h25--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h3: 1.125rem; /* 18px */
|
|
--text-h3--line-height: 1;
|
|
--text-h3--letter-spacing: var(--tracking-normal);
|
|
--text-h3--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h4: 0.875rem; /* 14px */
|
|
--text-h4--line-height: 1;
|
|
--text-h4--letter-spacing: var(--tracking-normal);
|
|
--text-h4--font-weight: var(--font-weight-bold);
|
|
|
|
--text-h5: 0.875rem; /* 14px */
|
|
--text-h5--line-height: 1;
|
|
--text-h5--letter-spacing: var(--tracking-normal);
|
|
--text-h5--font-weight: var(--font-weight-normal);
|
|
|
|
--text-p1: 1.375rem; /* 22px */
|
|
--text-p1--line-height: 1.5;
|
|
--text-p1--letter-spacing: var(--tracking-tight);
|
|
--text-p1--font-weight: var(--font-weight-normal);
|
|
|
|
--text-p15: 1.125rem; /* 18px */
|
|
--text-p15--line-height: 1.5;
|
|
--text-p15--letter-spacing: var(--tracking-normal);
|
|
--text-p15--font-weight: var(--font-weight-normal);
|
|
|
|
--text-p2: 1rem; /* 16px */
|
|
--text-p2--line-height: 1.5;
|
|
--text-p2--letter-spacing: var(--tracking-normal);
|
|
--text-p2--font-weight: var(--font-weight-normal);
|
|
|
|
--text-p3: 0.875rem; /* 14px */
|
|
--text-p3--line-height: 1.5;
|
|
--text-p3--letter-spacing: var(--tracking-normal);
|
|
--text-p3--font-weight: var(--font-weight-normal);
|
|
|
|
--text-code: 0.875em; /* 14px */
|
|
--text-code--line-height: inherit;
|
|
--text-code--letter-spacing: var(--tracking-normal);
|
|
--text-code--font-weight: var(--font-weight-normal);
|
|
|
|
/* animations */
|
|
--animate-marquee: marquee 30s linear infinite;
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@custom-variant intent (&:hover,
|
|
&:focus-within);
|
|
@custom-variant supports-container {
|
|
@supports (container: size) {
|
|
@slot;
|
|
}
|
|
}
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
@custom-variant banner-dismissed (&:where(.banner-dismissed, .banner-dismissed *));
|
|
|
|
@layer base {
|
|
.list-decimal .list-decimal {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
* {
|
|
text-decoration-thickness: max(0.05em, 0.05rem);
|
|
}
|
|
|
|
.font-display,
|
|
.font-display-compact {
|
|
text-underline-offset: 0.25em;
|
|
}
|
|
|
|
.font-sans {
|
|
text-underline-offset: 0.25em;
|
|
}
|
|
|
|
.font-mono {
|
|
font-variant-ligatures: none;
|
|
text-underline-offset: 0.125em;
|
|
}
|
|
|
|
[id] {
|
|
/* this only works where nav-h is defined. currently, docs */
|
|
scroll-margin-top: calc(var(--nav-h) + var(--spacing) * 5 + var(--scroll-mt, 0px));
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
mark {
|
|
color: var(--color-faded-black);
|
|
background-color: var(--color-bright-yellow);
|
|
}
|
|
|
|
.dark * {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
* {
|
|
scrollbar-color: var(--color-manila-dark) transparent;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--color-manila-dark);
|
|
border-radius: 9999px;
|
|
}
|
|
}
|
|
|
|
@utility data-bar {
|
|
width: var(--data-bar-width, 100%);
|
|
height: 2.5rem;
|
|
background-image: url("/data-bar-white.svg");
|
|
background-repeat: repeat-x;
|
|
background-size: auto 100%;
|
|
animation: grow-bar var(--data-bar-duration, 1.5s) ease-out forwards;
|
|
animation-play-state: paused;
|
|
|
|
[data-animate] & {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
|
|
@utility data-bar-orange {
|
|
background-image: url("/data-bar-orange.svg");
|
|
}
|
|
|
|
@utility horizontal-bars {
|
|
width: 2.5rem;
|
|
background-image: url("/horizontal-bar-white.svg");
|
|
background-repeat: repeat-y;
|
|
background-size: 100% 6px;
|
|
animation: horizontal-grow-bar 1.5s ease-out forwards;
|
|
animation-play-state: paused;
|
|
|
|
[data-animate] & {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
|
|
@utility horizontal-bars-orange {
|
|
background-image: url("/horizontal-bar-orange.svg");
|
|
}
|
|
|
|
@utility built-bg-gray {
|
|
padding: 8px 10px 0 10px;
|
|
background-image: url("/built-bg-horizontal-line-gray.svg");
|
|
background-repeat: repeat-y;
|
|
background-clip: content-box;
|
|
background-size: 100% 9px;
|
|
}
|
|
|
|
@utility built-bg-black {
|
|
padding: 8px 10px 0 10px;
|
|
background-image: url("/built-bg-horizontal-line-black.svg");
|
|
background-repeat: repeat-y;
|
|
background-clip: content-box;
|
|
background-size: 100% 9px;
|
|
}
|
|
|
|
@utility text-stroke-faded-black {
|
|
color: transparent;
|
|
-webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
|
|
|
|
&::selection {
|
|
color: transparent;
|
|
-webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
|
|
}
|
|
}
|
|
|
|
@utility text-stroke-manila-light {
|
|
color: transparent;
|
|
-webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-manila-light);
|
|
|
|
&::selection {
|
|
color: transparent;
|
|
-webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
|
|
}
|
|
}
|
|
|
|
@utility grid-separator-container {
|
|
position: relative;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0%;
|
|
z-index: 1000;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
content: "";
|
|
border: 10px solid;
|
|
border-color: inherit;
|
|
}
|
|
}
|
|
|
|
@utility grid-separators {
|
|
border-color: inherit;
|
|
border-style: solid;
|
|
border-width: 0 1px 1px 0;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
z-index: 10;
|
|
width: 10px;
|
|
height: 10px;
|
|
content: "";
|
|
background: inherit;
|
|
}
|
|
}
|
|
|
|
@keyframes grow-bar {
|
|
from {
|
|
width: 0%;
|
|
}
|
|
to {
|
|
width: var(--data-bar-width, 100%);
|
|
}
|
|
}
|
|
|
|
@keyframes horizontal-grow-bar {
|
|
from {
|
|
height: 0%;
|
|
}
|
|
to {
|
|
height: 100%;
|
|
}
|
|
}
|