183 lines
2.7 KiB
CSS
183 lines
2.7 KiB
CSS
/**
|
||
* Module: Basic styling setup.
|
||
*/
|
||
|
||
@import './constants.css';
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind 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-app-999);
|
||
border-color: var(--clr-app-400);
|
||
background-color: var(--clr-app-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-prim-800);
|
||
tr :hover& {
|
||
background: var(--clr-warn-100);
|
||
}
|
||
}
|
||
|
||
::placeholder {
|
||
color: var(--clr-app-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';
|
||
}
|
||
|
||
.border {
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
.border,
|
||
.border-x,
|
||
.border-y,
|
||
.border-b,
|
||
.border-t,
|
||
.border-l,
|
||
.border-r,
|
||
.border-2,
|
||
.border-x-2,
|
||
.border-y-2,
|
||
.border-b-2,
|
||
.border-t-2,
|
||
.border-l-2,
|
||
.border-r-2,
|
||
.divide-x,
|
||
.divide-y,
|
||
.divide-x-2,
|
||
.divide-y-2 {
|
||
border-color: var(--clr-app-400);
|
||
& > :not([hidden]) ~ :not([hidden]) {
|
||
border-color: inherit;
|
||
}
|
||
}
|
||
|
||
.sticky {
|
||
z-index: 20;
|
||
}
|
||
}
|