css: add reset, fixes box sizing issues

voodoos · Apr 28, 2024 · fd18105 · fd18105
1 parent f4c871f
commit fd18105
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/web/index.html b/web/index.html
@@ -3,6 +3,7 @@
 
 <head>
 	<title>OCAMIX</title>
+	<link rel="stylesheet" href="./reset.css">
 	<link rel="stylesheet" href="./main.css">
 	<link rel="stylesheet" href="./theme.css">
 	<link rel="stylesheet" href="./app.css">

diff --git a/web/main.css b/web/main.css
@@ -3,6 +3,7 @@
 body {
     font-family: 'Bungee Spice', sans-serif;
     color: #ffc334;
+    isolation: isolate;
 }
 
 .on {
@@ -84,6 +85,7 @@ body {
     background-color: #3c4146;
     overflow: hidden;
 }
+
 .lwdui-lazy-table>.row_spacer {
     padding: 0;
 }
@@ -113,4 +115,4 @@ body {
 audio {
 
     width: 100%;
-}
+}
diff --git a/web/reset.css b/web/reset.css
@@ -0,0 +1,61 @@
+/* CSS reset inspired by https://www.joshwcomeau.com/css/custom-css-reset /
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+
+/*
+  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;
+}