Global styles

assets/css/components/global.css

@@ -1,283 +1,64 @@
 /* Reset
 /* ---------------------------------------------------------- */
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    vertical-align: baseline;
-}
-body {
-    line-height: 1;
-}
-ol,
-ul {
-    list-style: none;
-}
-blockquote,
-q {
-    quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-    content: "";
-    content: none;
-}
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-img {
-    max-width: 100%;
-}
-html {
-    box-sizing: border-box;
-    font-family: sans-serif;
-
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-}
 *,
-*:before,
-*:after {
-    box-sizing: inherit;
-}
-a {
-    background-color: transparent;
-}
-a:active,
-a:hover {
-    outline: 0;
-}
-b,
-strong {
-    font-weight: bold;
-}
-i,
-em,
-dfn {
-    font-style: italic;
-}
-h1 {
-    margin: 0.67em 0;
-    font-size: 2em;
-}
-small {
-    font-size: 80%;
-}
-sub,
-sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
-}
-sup {
-    top: -0.5em;
-}
-sub {
-    bottom: -0.25em;
-}
-img {
-    border: 0;
-}
-svg:not(:root) {
-    overflow: hidden;
-}
-mark {
-    background-color: #fdffb6;
-}
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, monospace;
-    font-size: 1em;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-    margin: 0;
-    color: inherit;
-    font: inherit;
-}
-button {
-    overflow: visible;
-    border: none;
-}
-button,
-select {
-    text-transform: none;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-    cursor: pointer;
-    -webkit-appearance: button;
-}
-button[disabled],
-html input[disabled] {
-    cursor: default;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-}
-input {
-    line-height: normal;
-}
-input:focus {
-    outline: none;
-}
-input[type="checkbox"],
-input[type="radio"] {
+*::before,
+*::after {
     box-sizing: border-box;
-    padding: 0;
 }
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    height: auto;
-}
-input[type="search"] {
-    box-sizing: content-box;
-
-    -webkit-appearance: textfield;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-legend {
-    padding: 0;
-    border: 0;
-}
-textarea {
-    overflow: auto;
-}
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-td,
-th {
-    padding: 0;
-}
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
 
 html {
     overflow-x: hidden;
     overflow-y: scroll;
     font-size: 62.5%;
-
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
 body {
-    overflow-x: hidden;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
     color: color(var(--color-base) l(+20%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 1.5rem;
     line-height: 1.6em;
     font-weight: 400;
     font-style: normal;
-    letter-spacing: 0;
-    text-rendering: optimizeLegibility;
     background: #fff;
-
+    scroll-behavior: smooth;
+    overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: "liga" on;
 }
 
-::selection {
-    text-shadow: none;
-    background: #cbeafb;
+p,
+ul,
+ol,
+li,
+dl,
+dd,
+figure,
+figcaption,
+blockquote {
+    margin: 0;
+}
+
+ul[class],
+ol[class] {
+    padding: 0;
+    list-style: none;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
 }
 
 hr {
@@ -291,20 +72,6 @@ hr {
     border-top: 1px solid color(var(--color-border) l(+10%));
 }
 
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-    vertical-align: middle;
-}
-
-p,
-blockquote {
-    margin: 0 0 1.5em 0;
-}
-
 blockquote {
     margin: 1.5em 0;
     padding: 0 1.6em 0 1.6em;
@@ -323,26 +90,28 @@ blockquote small {
     font-size: 0.9em;
     opacity: 0.8;
 }
-/* Quotation marks */
-blockquote small:before {
-    content: "\2014 \00A0";
+
+::selection {
+    text-shadow: none;
+    background: #cbeafb;
 }
 
-blockquote cite {
-    font-weight: bold;
-}
-blockquote cite a {
-    font-weight: normal;
+mark {
+    background-color: #fdffb6;
 }
 
-a {
+a:not([class]) {
     color: color(var(--color-primary) l(-5%));
+    text-decoration-skip-ink: auto;
+}
+
+a[class] {
+    color: inherit;
     text-decoration: none;
     transition: 0.4s ease;
 }
 
-a:hover {
-    text-decoration: underline;
+a[class]:hover {
     transition: 0.2s ease;
 }
 
@@ -352,10 +121,9 @@ h3,
 h4,
 h5,
 h6 {
-    margin-top: 0;
-    line-height: 1.4;
+    margin: 0;
+    line-height: 1.1em;
     font-weight: 700;
-    text-rendering: optimizeLegibility;
 }
 
 h1 {
@@ -404,3 +172,12 @@ h6 {
     font-size: 2.2rem;
 }
 
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}