diff --git a/src/assets/css/root.css b/src/assets/css/root.css index 2815a336..16f05fb5 100644 --- a/src/assets/css/root.css +++ b/src/assets/css/root.css @@ -22,77 +22,54 @@ /* CSS Reset */ /* ------------------- */ -/* Box sizing rules */ -*, -*::before, -*::after { - box-sizing: border-box; -} +@layer reset { + *, *::before, *::after { + box-sizing: border-box; + } -/* Prevent font size inflation */ -html { - -moz-text-size-adjust: none; - -webkit-text-size-adjust: none; - text-size-adjust: none; -} + * { + margin: 0; + } -/* Remove default margin in favour of better control in authored CSS */ -body, h1, h2, h3, h4, p, -figure, blockquote, dl, dd { - margin: 0; -} + body { + min-height: 100vh; + line-height: 1.5; + } -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ -ul[role='list'], -ol[role='list'] { - list-style-type: ""; -} + h1, h2, h3, h4, h5, h6, + button, input, label { + line-height: 1.1; + } -/* Set core body defaults */ -body { - min-height: 100vh; - line-height: 1.5; -} + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } -/* Set shorter line heights on headings and interactive elements */ -h1, h2, h3, h4, -button, input, label { - line-height: 1.1; -} + h1, h2, h3, h4, h5, h6 { + text-wrap: balance; + } -/* Balance text wrapping on headings */ -h1, h2, -h3, h4 { - text-wrap: balance; -} + img, picture, video, audio, canvas { + max-width: 100%; + height: auto; + display: block; + } -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; - color: currentColor; -} + input, button, textarea, select { + font: inherit; + } -/* Make images easier to work with */ -img, -picture { - max-width: 100%; - display: block; -} + textarea:not([rows]) { + min-height: 10em; + } -/* Inherit fonts for inputs and buttons */ -input, button, -textarea, select { - font: inherit; -} + :target { + scroll-margin-block: 5ex; + } -/* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { - min-height: 10em; -} - -/* Anything that has been anchored to should have extra scroll margin */ -:target { - scroll-margin-block: 5ex; + [popover] { + margin: auto; + } } /* ------------------- */ @@ -155,4 +132,4 @@ p { font-size: var(--fs-p); } .index__link:focus { outline: 0.1em solid var(--clr-body-txt); outline-offset: -0.15em; -} \ No newline at end of file +}