167 lines
2.9 KiB
CSS
167 lines
2.9 KiB
CSS
/**
|
||
* Module: Basic styling setup.
|
||
*/
|
||
|
||
@import './constants.css' layer(base);
|
||
|
||
/*
|
||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||
so we've added these compatibility styles to make sure everything still
|
||
looks the same as it did with Tailwind CSS v3.
|
||
|
||
If we ever want to remove these styles, we need to add an explicit border
|
||
color utility to any element that depends on these defaults.
|
||
*/
|
||
@layer base {
|
||
*,
|
||
::after,
|
||
::before,
|
||
::backdrop,
|
||
::file-selector-button {
|
||
border-color: var(--color-gray-200, currentColor);
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
*,
|
||
*::after,
|
||
*::before {
|
||
box-sizing: border-box;
|
||
|
||
/* Uncomment to debug layering and overflow */
|
||
/* background: hsla(135, 50%, 50%, 0.05); */
|
||
/* outline: 2px solid hotpink; */
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: none;
|
||
-moz-text-size-adjust: none;
|
||
text-size-adjust: none;
|
||
|
||
hanging-punctuation: first last;
|
||
color-scheme: dark light;
|
||
|
||
interpolate-size: allow-keywords;
|
||
}
|
||
|
||
body {
|
||
margin: 0px;
|
||
padding: 0px;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
[data-color-scheme='dark'] {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
[data-color-scheme='light'] {
|
||
color-scheme: light;
|
||
}
|
||
|
||
/* Default scroll behavior */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
:has(:target) {
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: var(--scroll-padding);
|
||
}
|
||
}
|
||
|
||
:root {
|
||
interpolate-size: allow-keywords;
|
||
|
||
font-size: var(--font-size-base);
|
||
line-height: var(--line-height);
|
||
font-family: var(--font-main);
|
||
|
||
color: var(--clr-prim-999);
|
||
border-color: var(--clr-prim-400);
|
||
background-color: var(--clr-prim-100);
|
||
}
|
||
|
||
@media only screen and (max-width: 639px) {
|
||
:root {
|
||
font-size: var(--font-size-sm);
|
||
}
|
||
}
|
||
|
||
:focus,
|
||
:focus-visible,
|
||
:focus-within {
|
||
outline-width: 2px;
|
||
outline-style: solid;
|
||
outline-color: transparent;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--clr-sec-100);
|
||
tr :hover& {
|
||
background: var(--clr-warn-100);
|
||
}
|
||
}
|
||
|
||
::placeholder {
|
||
color: var(--clr-prim-600);
|
||
}
|
||
|
||
/* Wrapping headers */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* Limit text lines and setup wrapping */
|
||
p,
|
||
li {
|
||
max-width: var(--text-max-width);
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
div:not(.dense) > p:not(:last-child) {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
h1 {
|
||
font-weight: 600;
|
||
font-size: 1.125rem;
|
||
line-height: 1.75rem;
|
||
text-align: center;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
text-align: center;
|
||
|
||
&:not(:first-child) {
|
||
:not([role='manuals']) & {
|
||
margin-top: 0.5rem;
|
||
}
|
||
[role='manuals'] & {
|
||
margin-top: 0.75rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
b {
|
||
font-weight: 600;
|
||
}
|
||
|
||
code {
|
||
font-family: var(--font-math);
|
||
}
|
||
|
||
li {
|
||
list-style-position: inside;
|
||
}
|
||
|
||
li::marker {
|
||
content: '–\2009';
|
||
}
|
||
}
|