sefaria
1094 lines
24 KiB
CSS
1094 lines
24 KiB
CSS
/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
|
|
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
|
|
|
@font-face {
|
|
font-family: "Perfectly Nineties";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/PerfectlyNineties-Regular.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Perfectly Nineties";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/PerfectlyNineties-Italic.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "MD UI";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/MDUI-Regular.woff2") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "MD UI";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/MDUI-Italic.woff2") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "MD IO";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/MDIO-Regular.woff2") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "MD IO";
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url("../fonts/MDIO-Italic.woff2") format("woff");
|
|
}
|
|
|
|
/* =======================
|
|
Base styles
|
|
======================= */
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
background-color: light-dark(#F7F7F7, #121212);
|
|
|
|
/* Primitive tokens: raw design values */
|
|
--color-neutral-100: #F7F7F7;
|
|
--color-neutral-200: #D4D4D4;
|
|
--color-neutral-300: #B4B4B4;
|
|
--color-neutral-400: #959595;
|
|
--color-neutral-500: #777777;
|
|
--color-neutral-600: #5B5B5B;
|
|
--color-neutral-700: #3D3D3D;
|
|
--color-neutral-800: #292929;
|
|
--color-neutral-900: #121212;
|
|
|
|
--color-orange-red-100: #FFE7CC;
|
|
--color-orange-red-200: #FFC999;
|
|
--color-orange-red-300: #FFA466;
|
|
--color-orange-red-400: #FF803F;
|
|
--color-orange-red-500: #FF4500;
|
|
--color-orange-red-600: #DB2C00;
|
|
--color-orange-red-700: #B71800;
|
|
--color-orange-red-800: #930900;
|
|
--color-orange-red-900: #7A0000;
|
|
|
|
--color-orange-100: #FFF1CC;
|
|
--color-orange-200: #FFDE99;
|
|
--color-orange-300: #FFC766;
|
|
--color-orange-400: #FFB13F;
|
|
--color-orange-500: #FF8C00;
|
|
--color-orange-600: #DB6E00;
|
|
--color-orange-700: #B75400;
|
|
--color-orange-800: #933D00;
|
|
--color-orange-900: #7A2C00;
|
|
|
|
--shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
|
|
--shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
|
|
|
|
--gradient-stop-1-light: #f7f7f7;
|
|
--gradient-stop-1-dark: #121212;
|
|
|
|
--gradient-stop-2-light: #f7f7f7;
|
|
--gradient-stop-2-dark: #121212;
|
|
|
|
--gradient-stop-3-light: #f7f7f780;
|
|
--gradient-stop-3-dark: #12121280;
|
|
|
|
--gradient-stop-4-light: #f7f7f700;
|
|
--gradient-stop-4-dark: #12121200;
|
|
|
|
--text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
|
|
--text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
|
|
--text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
|
|
--text-h4: clamp(1.375rem, 1.22rem + 0.45vw, 1.75rem);
|
|
--text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
|
--text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
|
|
|
|
--round-interval: 2px;
|
|
|
|
--text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
|
|
--text-small: 0.875rem;
|
|
--text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
|
|
|
--line-tight: 1.1;
|
|
--line-normal: 1.2;
|
|
--line-relaxed: 1.4;
|
|
--line-loose: 1.6;
|
|
|
|
--spacing-1: 0.125rem;
|
|
--spacing-2: 0.25rem;
|
|
--spacing-3: 0.5rem;
|
|
--spacing-4: 1rem;
|
|
--spacing-5: 1.5rem;
|
|
--spacing-6: 2rem;
|
|
--spacing-7: 2.5rem;
|
|
--spacing-8: 3rem;
|
|
--spacing-9: 3.5rem;
|
|
--spacing-10: 4rem;
|
|
--spacing-11: 4.5rem;
|
|
--spacing-12: 5rem;
|
|
|
|
--border-width-sm: 1px;
|
|
--border-width-md: 1.5px;
|
|
|
|
--radius-xs: 0.25rem;
|
|
--radius-sm: 0.5rem;
|
|
--radius-md: 1rem;
|
|
--radius-lg: 1.5rem;
|
|
--radius-xl: 2rem;
|
|
--radius-xxl: 2.5rem;
|
|
|
|
--header-offset: 6.5rem;
|
|
|
|
|
|
/* Semantic tokens: contextual usage */
|
|
--color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
|
|
|
|
--color-background-content-box: light-dark(var(--color-neutral-200), var(--color-neutral-800));
|
|
|
|
--color-border-content-box-orange-red: color-mix(in srgb, var(--color-orange-red-800) 50%, transparent);
|
|
--color-border-content-box-orange: color-mix(in srgb, var(--color-orange-800) 50%, transparent);
|
|
--color-border-content-box-grey-light: color-mix(in srgb, var(--color-neutral-400) 25%, transparent);
|
|
--color-border-content-box-grey-dark: color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
|
|
|
|
--color-primary: light-dark(var(--color-orange-red-600), var(--color-orange-red-500));
|
|
--color-primary-hover: light-dark(var(--color-orange-red-500), var(--color-orange-500));
|
|
--color-primary-active: light-dark(var(--color-orange-red-700), var(--color-orange-red-600));
|
|
|
|
--color-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
|
|
--color-secondary-hover: light-dark(var(--color-neutral-600), var(--color-neutral-300));
|
|
--color-secondary-active: light-dark(var(--color-neutral-800), var(--color-neutral-500));
|
|
|
|
--color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
|
--color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
|
|
--color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
|
|
--color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
|
|
|
|
--color-button-primary: var(--color-orange-red-500);
|
|
--color-button-primary-hover: var(--color-orange-500);
|
|
--color-button-primary-active: var(--color-orange-red-600);
|
|
|
|
--color-button-secondary: light-dark(var(--color-neutral-200), var(--color-neutral-700));
|
|
--color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
|
|
--color-button-secondary-active: light-dark(var(--color-neutral-300), var(--color-neutral-800));
|
|
|
|
--color-text-button-primary: var(--color-neutral-900);
|
|
--color-text-button-primary-hover: var(--color-neutral-100);
|
|
--color-text-button-primary-active: var(--color-neutral-900);
|
|
|
|
--color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
|
|
--color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
|
--color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
|
|
|
--shadow-box: var(--shadow-light);
|
|
|
|
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
|
|
--shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
|
|
|
|
--border: #d8d8d8;
|
|
--header-offset: 6.5rem;
|
|
--overlay: rgb(12 12 12 / 0.8);
|
|
--panel: rgb(255 255 255 / 0.76);
|
|
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
text-box-trim: trim-both;
|
|
text-box-edge: cap alphabetic;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-background);
|
|
scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
color: var(--color-text-primary);
|
|
font-family: "MD UI", Helvetica, sans;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 100%;
|
|
line-height: var(--line-relaxed);
|
|
letter-spacing: 0.025em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
min-height: 100dvh; /* better on modern mobile browsers */
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--color-orange-red-200);
|
|
text-shadow: none;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-orange-red-200);
|
|
text-shadow: none;
|
|
}
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
border: 0;
|
|
border-top: var(--border-width-sm) solid var(--color-neutral-500);
|
|
margin: var(--spacing-4) 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Remove the gap between audio, canvas, iframes,
|
|
* images, videos and the bottom of their containers:
|
|
* https://github.com/h5bp/html5-boilerplate/issues/440
|
|
*/
|
|
|
|
audio,
|
|
canvas,
|
|
iframe,
|
|
img,
|
|
svg,
|
|
video {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*
|
|
* Remove default fieldset styles.
|
|
*/
|
|
|
|
fieldset {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Allow only vertical resizing of textareas.
|
|
*/
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
/* =======================
|
|
Element styles
|
|
======================= */
|
|
|
|
.spacer {
|
|
display: block;
|
|
width: 100%;
|
|
height: var(--spacing-2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.spacer-sm {
|
|
height: var(--spacing-3);
|
|
}
|
|
|
|
.spacer-lg {
|
|
height: var(--spacing-4);
|
|
}
|
|
|
|
.spacer-xl {
|
|
height: var(--spacing-5);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "Perfectly Nineties", Times, "Times New Roman", serif;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: var(--line-normal);
|
|
text-align: left;
|
|
margin: var(--spacing-6) 0 var(--spacing-6) 0;
|
|
}
|
|
|
|
h1, .size-h1 {
|
|
font-size: round(down, var(--text-h1), var(--round-interval));
|
|
}
|
|
|
|
h2, .size-h2 {
|
|
font-size: round(down, var(--text-h2), var(--round-interval));
|
|
}
|
|
|
|
h3, .size-h3 {
|
|
font-size: round(down, var(--text-h3), var(--round-interval));
|
|
}
|
|
|
|
h4, .size-h4 {
|
|
font-size: round(down, var(--text-h4), var(--round-interval));
|
|
}
|
|
|
|
h5, .size-h5 {
|
|
font-size: round(down, var(--text-h5), var(--round-interval));
|
|
}
|
|
|
|
h6, .size-h6 {
|
|
font-size: round(down, var(--text-h6), var(--round-interval));
|
|
}
|
|
|
|
p, ul, ol, li {
|
|
font-family: "MD UI", Helvetica, sans;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-feature-settings: "ss01" 1, "ss02" 1;
|
|
font-size: round(down, var(--text-body), var(--round-interval));
|
|
line-height: var(--line-relaxed);
|
|
margin: var(--spacing-3) 0 var(--spacing-6) 0;
|
|
text-align: left;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.175rem;
|
|
text-decoration-thickness: 0.075rem;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-hover);
|
|
text-decoration-thickness: 0.175rem;
|
|
}
|
|
|
|
/* a:visited {
|
|
color: var(--color-primary);
|
|
text-decoration-thickness: 0.175rem;
|
|
} */
|
|
|
|
button, .button-primary, .button-secondary, .menu-button, .logo {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
font-family: "MD IO", monospace;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: var(--line-normal);
|
|
letter-spacing: 0.025rem;
|
|
padding: 0.875rem 1rem;
|
|
font-size: round(down, var(--text-button), var(--round-interval));
|
|
border: none;
|
|
border-radius: var(--radius-xxl);
|
|
text-decoration: none;
|
|
transition: transform 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button, .button-primary, .logo {
|
|
background: var(--color-button-primary);
|
|
color: var(--color-text-button-primary);
|
|
box-shadow: var(--shadow-button);
|
|
}
|
|
|
|
.button-secondary {
|
|
background: var(--color-button-secondary);
|
|
color: var(--color-text-button-secondary);
|
|
box-shadow: var(--shadow-button);
|
|
}
|
|
|
|
.logo, .button-secondary {
|
|
padding: 1rem;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.logo svg {
|
|
height: 2em;
|
|
width: 2em;
|
|
flex: none;
|
|
display: block;
|
|
}
|
|
|
|
.logo svg path {
|
|
fill: currentColor;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
|
|
text-decoration: none;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
button:hover, .button-primary:hover, .logo:hover {
|
|
background: var(--color-button-primary-hover);
|
|
color: var(--color-text-button-primary);
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
background: var(--color-button-secondary-hover);
|
|
color: var(--color-text-button-secondary-hover);
|
|
}
|
|
}
|
|
|
|
button:active, .button-primary:active, .button-secondary:active, .logo:active {
|
|
box-shadow: var(--shadow-button-active);
|
|
text-decoration: none;
|
|
transform: scale(1.00);
|
|
}
|
|
|
|
button:active, .button-primary:active, .logo:active {
|
|
background: var(--color-button-primary-active);
|
|
color: var(--color-text-button-primary-active);
|
|
}
|
|
|
|
.button-secondary:active {
|
|
background: var(--color-button-secondary-active);
|
|
color: var(--color-text-button-secondary-active);
|
|
}
|
|
|
|
/* button:visited, .button-primary:visited, .logo:visited {
|
|
background: var(--color-button-primary);
|
|
color: var(--color-text-button-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button-secondary:visited {
|
|
background: var(--color-button-secondary);
|
|
color: var(--color-text-button-secondary);
|
|
text-decoration: none;
|
|
} */
|
|
|
|
.button-primary span {
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
/* =======================
|
|
Layout styles
|
|
======================= */
|
|
|
|
/* Site header */
|
|
|
|
.site-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: sticky;
|
|
top: 0;
|
|
padding-top: max(1px, env(safe-area-inset-top));
|
|
z-index: 100;
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
|
|
6%,
|
|
light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
|
|
44%,
|
|
light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
|
|
76%,
|
|
light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
|
|
);
|
|
/* background: rgb(255 255 255 / 0.88); */
|
|
/* backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px); */
|
|
}
|
|
|
|
.menu-bar {
|
|
width: 900px;
|
|
padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.menu-left, .menu-right {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.desktop-nav {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-self: stretch;
|
|
background: var(--color-button-secondary);
|
|
border-radius: var(--radius-xxl);
|
|
box-shadow: var(--shadow-button);
|
|
}
|
|
|
|
.desktop-nav ul {
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: var(--spacing-2);
|
|
list-style: none;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.desktop-nav li {
|
|
flex: 1 1 0;
|
|
display: flex;
|
|
align-items: stretch;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.desktop-nav .menu-button {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.menu-button {
|
|
background: none;
|
|
color: var(--color-text-button-secondary);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.menu-button:hover,
|
|
.desktop-nav a[aria-current="page"]:hover,
|
|
.mobile-menu a[aria-current="page"]:hover {
|
|
background: var(--color-button-secondary-hover);
|
|
color: var(--color-text-button-seconary-hover);
|
|
text-decoration: none;
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.menu-button:active,
|
|
.desktop-nav a[aria-current="page"]:active,
|
|
.mobile-menu a[aria-current="page"]:active,
|
|
.desktop-nav a[aria-current="page"],
|
|
.mobile-menu a[aria-current="page"] {
|
|
background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
|
|
color: var(--color-text-button-seconary-active);
|
|
}
|
|
|
|
.menu-button:active,
|
|
.desktop-nav a[aria-current="page"]:active,
|
|
.mobile-menu a[aria-current="page"]:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.desktop-nav-secondary ul {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--spacing-4);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.desktop-nav-secondary li {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.desktop-nav-secondary svg {
|
|
color: currentcolor;
|
|
height: 1em;
|
|
width: 1em;
|
|
flex: none;
|
|
display: block;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: none;
|
|
position: relative;
|
|
transition: transform 0.25s ease, opacity 0.25s ease;
|
|
}
|
|
|
|
.menu-toggle.is-open {
|
|
opacity: 0;
|
|
}
|
|
|
|
.menu-overlay {
|
|
position: fixed;
|
|
inset: var(--header-offset) 0 0 0;
|
|
background: var(--overlay);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.25s ease;
|
|
z-index: 200;
|
|
}
|
|
|
|
.mobile-menu {
|
|
position: fixed;
|
|
inset: auto 1rem 1rem 1rem;
|
|
width: auto;
|
|
max-width: 24rem;
|
|
margin-inline: auto;
|
|
background: var(--panel);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgb(255 255 255 / 0.45);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
transform: translateY(1rem) scale(0.98);
|
|
pointer-events: none;
|
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
z-index: 300;
|
|
}
|
|
|
|
.mobile-menu__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mobile-menu ul {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.mobile-menu a {
|
|
display: block;
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 0.75rem;
|
|
background: rgb(255 255 255 / 0.56);
|
|
}
|
|
|
|
/* .page-content {
|
|
padding: 3rem 1.25rem;
|
|
} */
|
|
|
|
.menu-open .menu-overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.menu-open .mobile-menu {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (max-width: 579px) {
|
|
.desktop-nav {
|
|
display: none;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 580px) {
|
|
.menu-overlay,
|
|
.mobile-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* Maint content */
|
|
|
|
main, footer {
|
|
max-width: 900px;
|
|
border: none;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-items: stretch;
|
|
justify-content: space-between;
|
|
row-gap: var(--spacing-4);
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
footer {
|
|
margin-top: var(--spacing-3);
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-7);
|
|
padding-left: var(--spacing-5);
|
|
padding-right: var(--spacing-5);
|
|
font-family: "MD IO", monospace;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: round(down, var(--text-small), var(--round-interval));
|
|
line-height: var(--line-relaxed);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
footer a:hover {
|
|
color: var(--color-secondary-hover);
|
|
}
|
|
|
|
footer a:visited {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.align-left {
|
|
align-items: left;
|
|
align-content: left;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
background: var(--color-background-content-box);
|
|
border-style: solid;
|
|
border-radius: var(--radius-xxl);
|
|
border-width: var(--border-width-sm);
|
|
box-shadow: var(--shadow-box);
|
|
row-gap: var(--spacing-7);
|
|
padding: var(--spacing-6);
|
|
color: var(--color-neutral-900);
|
|
border-color: light-dark(var(--color-border-content-box-grey-light), var(--color-border-content-box-grey-dark));
|
|
}
|
|
|
|
.content-intro {
|
|
background: var(--color-orange-red-500);
|
|
border-color: var(--color-border-content-box-orange-red);
|
|
}
|
|
|
|
.content-text {
|
|
background: var(--color-orange-500);
|
|
border-color: var(--color-border-content-box-orange);
|
|
}
|
|
|
|
.placeholder {
|
|
flex: 1;
|
|
min-height: 120px;
|
|
-webkit-mask-image: linear-gradient(
|
|
to top,
|
|
hsla(0, 0%, 6%, 0) 0%,
|
|
hsla(0, 0%, 6%, 0.1) 13.6%,
|
|
hsla(0, 0%, 6%, 0.199) 24.8%,
|
|
hsla(0, 0%, 6%, 0.296) 33.8%,
|
|
hsla(0, 0%, 6%, 0.391) 41%,
|
|
hsla(0, 0%, 6%, 0.481) 46.8%,
|
|
hsla(0, 0%, 6%, 0.568) 51.5%,
|
|
hsla(0, 0%, 6%, 0.649) 55.4%,
|
|
hsla(0, 0%, 6%, 0.724) 58.8%,
|
|
hsla(0, 0%, 6%, 0.792) 62.2%,
|
|
hsla(0, 0%, 6%, 0.852) 65.9%,
|
|
hsla(0, 0%, 6%, 0.903) 70.1%,
|
|
hsla(0, 0%, 6%, 0.944) 75.3%,
|
|
hsla(0, 0%, 6%, 0.975) 81.8%,
|
|
hsla(0, 0%, 6%, 0.993) 89.9%,
|
|
hsl(0, 0%, 6%) 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to top,
|
|
hsla(0, 0%, 6%, 0) 0%,
|
|
hsla(0, 0%, 6%, 0.1) 13.6%,
|
|
hsla(0, 0%, 6%, 0.199) 24.8%,
|
|
hsla(0, 0%, 6%, 0.296) 33.8%,
|
|
hsla(0, 0%, 6%, 0.391) 41%,
|
|
hsla(0, 0%, 6%, 0.481) 46.8%,
|
|
hsla(0, 0%, 6%, 0.568) 51.5%,
|
|
hsla(0, 0%, 6%, 0.649) 55.4%,
|
|
hsla(0, 0%, 6%, 0.724) 58.8%,
|
|
hsla(0, 0%, 6%, 0.792) 62.2%,
|
|
hsla(0, 0%, 6%, 0.852) 65.9%,
|
|
hsla(0, 0%, 6%, 0.903) 70.1%,
|
|
hsla(0, 0%, 6%, 0.944) 75.3%,
|
|
hsla(0, 0%, 6%, 0.975) 81.8%,
|
|
hsla(0, 0%, 6%, 0.993) 89.9%,
|
|
hsl(0, 0%, 6%) 100%
|
|
);
|
|
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.headline {
|
|
line-height: var(--line-tight);
|
|
margin: 0;
|
|
}
|
|
|
|
.text {
|
|
width: clamp(min(100%, 40ch), 75%, 60ch);
|
|
margin: 0;
|
|
}
|
|
|
|
.text a {
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.text a:hover {
|
|
color: var(--color-neutral-800);
|
|
}
|
|
|
|
.text a:visited {
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: var(--spacing-5);
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
column-gap: var(--spacing-4);
|
|
}
|
|
|
|
/* =======================
|
|
Helper classes
|
|
======================= */
|
|
|
|
/*
|
|
* Adding skipLink styling for screen readers
|
|
*/
|
|
|
|
#skipLink a {
|
|
display: block;
|
|
position: absolute;
|
|
left: -999px;
|
|
top: -999px;
|
|
}
|
|
|
|
#skipLink a:focus {
|
|
left: 0;
|
|
top: 0;
|
|
padding: var(--spacing-2);
|
|
background: var(--color-background-content-box);
|
|
}
|
|
|
|
/*
|
|
* Hide visually and from screen readers
|
|
*/
|
|
|
|
.hidden,
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
* Hide only visually, but have it available for screen readers:
|
|
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
*
|
|
* 1. For long content, line feeds are not interpreted as spaces and small width
|
|
* causes content to wrap 1 word per line:
|
|
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
|
*/
|
|
|
|
.visually-hidden {
|
|
border: 0;
|
|
clip: rect(0, 0, 0, 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
/* 1 */
|
|
}
|
|
|
|
/*
|
|
* Extends the .visually-hidden class to allow the element
|
|
* to be focusable when navigated to via the keyboard:
|
|
* https://www.drupal.org/node/897638
|
|
*/
|
|
|
|
.visually-hidden.focusable:active,
|
|
.visually-hidden.focusable:focus {
|
|
clip: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
overflow: visible;
|
|
position: static;
|
|
white-space: inherit;
|
|
width: auto;
|
|
}
|
|
|
|
/*
|
|
* Hide visually and from screen readers, but maintain layout
|
|
*/
|
|
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
* Clearfix: contain floats
|
|
*
|
|
* The use of `table` rather than `block` is only necessary if using
|
|
* `::before` to contain the top-margins of child elements.
|
|
*/
|
|
|
|
.clearfix::before,
|
|
.clearfix::after {
|
|
content: "";
|
|
display: table;
|
|
}
|
|
|
|
.clearfix::after {
|
|
clear: both;
|
|
}
|
|
|
|
/* =======================
|
|
Media Queries for Responsive Design.
|
|
======================= */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--shadow-box: var(--shadow-dark);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.menu-bar {
|
|
padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
|
|
}
|
|
|
|
main {
|
|
padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
|
|
}
|
|
.footer-content {
|
|
flex-direction: column;
|
|
row-gap: var(--spacing-4);
|
|
}
|
|
.footer-fade {
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:440px) {
|
|
.menu-bar {
|
|
padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
|
|
}
|
|
.footer-links {
|
|
flex-direction: column;
|
|
row-gap: var(--spacing-4);
|
|
}
|
|
.footer-fade {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:375px) {
|
|
main {
|
|
padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
|
|
}
|
|
.menu-bar {
|
|
padding: var(--spacing-4);
|
|
}
|
|
.menu-left, .menu-right {
|
|
gap: var(--spacing-3);
|
|
}
|
|
.desktop-nav-secondary ul {
|
|
gap: var(--spacing-3);
|
|
}
|
|
.menu-bar {
|
|
gap: var(--spacing-3);
|
|
}
|
|
}
|
|
|
|
@media print,
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
|
(min-resolution: 1.25dppx),
|
|
(min-resolution: 120dpi) {
|
|
/* Style adjustments for high resolution devices */
|
|
}
|
|
|
|
/* =======================
|
|
Print styles.
|
|
Inlined to avoid the additional HTTP request:
|
|
https://www.phpied.com/delay-loading-your-print-css/
|
|
======================= */
|
|
|
|
@media print {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
background: #fff !important;
|
|
color: #000 !important;
|
|
/* Black prints faster */
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
|
|
abbr[title]::after {
|
|
content: " (" attr(title) ")";
|
|
}
|
|
|
|
/*
|
|
* Don't show links that are fragment identifiers,
|
|
* or use the `javascript:` pseudo protocol
|
|
*/
|
|
a[href^="#"]::after,
|
|
a[href^="javascript:"]::after {
|
|
content: "";
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
pre,
|
|
blockquote {
|
|
border: var(--border-width-sm) solid #999;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
p,
|
|
h2,
|
|
h3 {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
} |