173 lines
2.4 KiB
CSS
173 lines
2.4 KiB
CSS
/**
|
||
* Module: Basic styling setup.
|
||
*/
|
||
|
||
@import './constants.css';
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
html,
|
||
body {
|
||
-webkit-text-size-adjust: 100%;
|
||
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0px;
|
||
padding: 0px;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
html {
|
||
hanging-punctuation: first last;
|
||
color-scheme: dark light;
|
||
}
|
||
|
||
[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: 3rem;
|
||
}
|
||
}
|
||
|
||
:root {
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
font-family: var(--font-main);
|
||
|
||
color: var(--cl-fg-100);
|
||
border-color: var(--cl-bg-40);
|
||
background-color: var(--cl-bg-100);
|
||
|
||
&.dark {
|
||
color: var(--cd-fg-100);
|
||
border-color: var(--cd-bg-40);
|
||
background-color: var(--cd-bg-100);
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 639px) {
|
||
:root {
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
:focus,
|
||
:focus-visible,
|
||
:focus-within {
|
||
outline-width: 2px;
|
||
outline-style: solid;
|
||
outline-color: transparent;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--cl-prim-bg-60);
|
||
.dark & {
|
||
background: var(--cd-prim-bg-60);
|
||
}
|
||
tr :hover& {
|
||
background: var(--cl-red-bg-100);
|
||
.dark & {
|
||
background: var(--cd-red-bg-100);
|
||
}
|
||
}
|
||
}
|
||
|
||
::placeholder {
|
||
color: var(--cl-fg-60);
|
||
.dark & {
|
||
color: var(--cd-fg-60);
|
||
}
|
||
}
|
||
|
||
/* Wrapping headers */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* Limit text lines and setup wrapping */
|
||
p,
|
||
li {
|
||
max-width: 75ch;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
div:not(.dense) > p {
|
||
@apply [&:not(:last-child)]:mb-2;
|
||
}
|
||
|
||
@layer components {
|
||
h1 {
|
||
@apply text-lg font-semibold text-center;
|
||
}
|
||
|
||
h2 {
|
||
@apply [&:not(:first-child)]:mt-2 font-semibold text-center;
|
||
}
|
||
|
||
b {
|
||
@apply font-semibold;
|
||
}
|
||
|
||
code {
|
||
font-family: var(--font-math);
|
||
}
|
||
|
||
li {
|
||
list-style-position: inside;
|
||
}
|
||
|
||
li::marker {
|
||
content: '–\2009';
|
||
}
|
||
|
||
.border {
|
||
@apply rounded;
|
||
}
|
||
|
||
.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(--cl-bg-40);
|
||
@apply divide-inherit;
|
||
.dark & {
|
||
border-color: var(--cd-bg-40);
|
||
}
|
||
}
|
||
|
||
.sticky {
|
||
z-index: 20;
|
||
}
|
||
}
|