123 lines
3.2 KiB
CSS
123 lines
3.2 KiB
CSS
|
/* RESET */
|
||
|
|
* {
|
||
|
|
/* Remove default margin on everything */
|
||
|
|
margin: 0;
|
||
|
|
/* Remove default padding on everything */
|
||
|
|
padding: 0;
|
||
|
|
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
|
||
|
|
line-height: calc(0.25rem + 1em + 0.25rem);
|
||
|
|
}
|
||
|
|
/* Use a more-intuitive box-sizing model on everything */
|
||
|
|
*,
|
||
|
|
::before,
|
||
|
|
::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
|
||
|
|
*:where(:not(fieldset, progress, meter)) {
|
||
|
|
border-width: 0;
|
||
|
|
border-style: solid;
|
||
|
|
background-origin: border-box;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
html {
|
||
|
|
/* Allow percentage-based heights in the application */
|
||
|
|
block-size: 100%;
|
||
|
|
/* Making sure text size is only controlled by font-size */
|
||
|
|
-webkit-text-size-adjust: none;
|
||
|
|
/* Improve text rendering */
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
}
|
||
|
|
/* Smooth scrolling for users that don't prefer reduced motion */
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
html:focus-within {
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
overflow-x: hidden;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
font-weight: normal;
|
||
|
|
/* Allow percentage-based heights in the application */
|
||
|
|
min-block-size: 100%;
|
||
|
|
/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
|
||
|
|
-webkit-marquee-increment: 0vw;
|
||
|
|
}
|
||
|
|
/* Improve media defaults */
|
||
|
|
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
:where(img, svg, video) {
|
||
|
|
block-size: auto;
|
||
|
|
max-inline-size: 100%;
|
||
|
|
}
|
||
|
|
/* Smaller line height for titles */
|
||
|
|
:where(h1, h2, h3, h1 a, h2 a, h3 a) {
|
||
|
|
line-height: 1.1;
|
||
|
|
}
|
||
|
|
/* Avoid text overflows */
|
||
|
|
:where(p, h1, h2, h3, h4, h5, h6) {
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
}
|
||
|
|
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||
|
|
:where(ul, ol)[role="list"] {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
|
||
|
|
a:not([class]) {
|
||
|
|
text-decoration-skip-ink: auto;
|
||
|
|
}
|
||
|
|
/* Make it clear that interactive elements are interactive */
|
||
|
|
:where(
|
||
|
|
a[href],
|
||
|
|
area,
|
||
|
|
button,
|
||
|
|
input,
|
||
|
|
label[for],
|
||
|
|
select,
|
||
|
|
summary,
|
||
|
|
textarea,
|
||
|
|
[tabindex]:not([tabindex*="-"])
|
||
|
|
) {
|
||
|
|
cursor: pointer;
|
||
|
|
touch-action: manipulation;
|
||
|
|
}
|
||
|
|
:where(input[type="file"]) {
|
||
|
|
cursor: auto;
|
||
|
|
}
|
||
|
|
:where(input[type="file"])::-webkit-file-upload-button,
|
||
|
|
:where(input[type="file"])::file-selector-button {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make sure users can't select button text */
|
||
|
|
:where(
|
||
|
|
button,
|
||
|
|
button[type],
|
||
|
|
input[type="button"],
|
||
|
|
input[type="submit"],
|
||
|
|
input[type="reset"]
|
||
|
|
),
|
||
|
|
:where(input[type="file"])::-webkit-file-upload-button,
|
||
|
|
:where(input[type="file"])::file-selector-button {
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
-webkit-touch-callout: none;
|
||
|
|
user-select: none;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
/* Disabled cursor for disabled buttons */
|
||
|
|
:where(
|
||
|
|
button,
|
||
|
|
button[type],
|
||
|
|
input[type="button"],
|
||
|
|
input[type="submit"],
|
||
|
|
input[type="reset"]
|
||
|
|
)[disabled] {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
/* END RESET */
|