168 lines
2.6 KiB
CSS
168 lines
2.6 KiB
CSS
/* inspired by: */
|
|
/* https://piccalil.li/blog/a-modern-css-reset/ */
|
|
/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
|
|
/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */
|
|
/* https://github.com/mayank99/reset.css/blob/main/package/index.css */
|
|
/* Box sizing rules */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Typography */
|
|
* {
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Scroll behavior */
|
|
html:focus-within {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Body defaults */
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
text-rendering: optimizeSpeed;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Margins */
|
|
body,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
figure,
|
|
blockquote,
|
|
dl,
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
/* List styles */
|
|
ul[role='list'],
|
|
ol[role='list'] {
|
|
list-style: none;
|
|
}
|
|
|
|
/* Padding for lists */
|
|
[role='list'] {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Anchor styles */
|
|
a:not([class]) {
|
|
text-decoration-skip-ink: auto;
|
|
}
|
|
|
|
/* Image styles */
|
|
img,
|
|
picture,
|
|
svg,
|
|
canvas {
|
|
max-inline-size: 100%;
|
|
block-size: auto;
|
|
vertical-align: middle;
|
|
font-style: italic;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
shape-margin: 0.75rem;
|
|
}
|
|
|
|
/* Button styles */
|
|
button {
|
|
all: unset;
|
|
}
|
|
|
|
/* Inherit fonts for inputs and buttons */
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Textarea styles */
|
|
textarea {
|
|
resize: vertical;
|
|
resize: block;
|
|
}
|
|
|
|
/* Textarea height */
|
|
textarea:not([rows]) {
|
|
min-height: 10em;
|
|
}
|
|
|
|
/* Cursor styles */
|
|
button,
|
|
label,
|
|
select,
|
|
summary,
|
|
[role='button'],
|
|
[role='option'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Scroll margin above anchor links */
|
|
:target {
|
|
scroll-margin-block-start: 2ex;
|
|
}
|
|
|
|
/* Scroll margin below focused elements */
|
|
:focus {
|
|
scroll-margin-block-end: 8vh;
|
|
}
|
|
|
|
dialog {
|
|
border: none;
|
|
background: none;
|
|
inset: unset;
|
|
max-width: unset;
|
|
max-height: unset;
|
|
}
|
|
|
|
[popover] {
|
|
border: none;
|
|
background: none;
|
|
inset: unset;
|
|
color: inherit;
|
|
}
|
|
|
|
/* hide dialog elements without open or popover attributes, and elements with a popover attribute that are not in an open state. */
|
|
dialog:not([open], [popover]),
|
|
[popover]:not(:popover-open) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
|
|
html:has(dialog[open]:modal) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html:focus-within {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
::after,
|
|
::before {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|