add modern reset

janvt · janvt · commit 712e213847e5 · 2024-02-14T10:51:10.000+01:00
diff --git a/cv/index.html b/cv/index.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="../reset.css">
     <link rel="stylesheet" href="styles.css">
 </head>
 
diff --git a/cv/styles.css b/cv/styles.css
@@ -1,40 +1,3 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-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,
-b, u, i, center,
-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-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-/* page styles */
 html {
     font-family: Georgia, "Cambria", serif;
 }
@@ -60,12 +23,6 @@ h1 {
     }
 }
 
-@media print {
-    .links, .links * {
-        display: none;
-    }
-}
-
 h2 {
     font-size: 1.6em;
     font-weight: 600;
@@ -112,7 +69,7 @@ li {
 }
 
 strong {
-    text-size: 110%;
+    font-size: 110%;
     font-weight:bold;
 }
 
@@ -142,5 +99,7 @@ a, a:visited, a:hover, a:active {
 }
 
 @media print {
-    .pagebreak { page-break-before: always; }
+    .pagebreak {
+        page-break-before: always;
+    }
 }
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
 <title>Hi! I'm Jan van Thoor</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="reset.css">
 <link rel="stylesheet" href="styles.css">
 <meta property="og:url" content="https://janvt.dev" />
 <meta property="og:type" content="website" />
diff --git a/reset.css b/reset.css
@@ -0,0 +1,46 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+    font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+    isolation: isolate;
+}
diff --git a/styles.css b/styles.css
@@ -1,42 +1,3 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-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,
-b, u, i, center,
-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-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-    background: #FAFAFA;
-}
-ol, ul {
-    list-style: none;
-}
-
-/* page styles */
 html {
     font-family: Georgia, "Cambria", serif;
 }
