symbiosis.css

@@ -1,25 +1,20 @@
-/*
-  Use a more-intuitive box-sizing model.
-*/
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-/*
-  Remove default margin
-*/
-* {
-  margin: 0;
-}
-
 /*
   Typographic tweaks!
   Add accessible line-height
   Improve text rendering
 */
 body {
-  line-height: 1.5;
+  /* Common: Standardizes typography */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  /* Common: Sets in common the way of rendering the text */
+  text-rendering: optimizeLegibility;
+  /* Common: Optimize load font. */
+  font-display: swap;
+  /* Common: Smooth the font on the level of the pixel */
   -webkit-font-smoothing: antialiased;
+  /* Common: correct the line height */
+  line-height: 1.5;
+  margin: 0;
 }
 
 /*
@@ -28,7 +23,9 @@ body {
 img, picture, video, canvas, svg {
   display: block;
   width: 100%;
+  height: auto;
 }
+
 /*
   Remove built-in form typography styles
 */
@@ -37,51 +34,40 @@ input, button, textarea, select {
 }
 
 /*
-  Avoid text overflows
+  Avoid text overflows and add hyphenation when needed
 */
 p, h1, h2, h3, h4, h5, h6 {
+  word-wrap: break-word;
   overflow-wrap: break-word;
-}
-
-html {
-    /* Common: Improved accessibility */
-    font-size: 1rem;
-}
-
-body {
-    /* Common: Sets in common the way of rendering the text */
-    text-rendering: optimizeLegibility;
-    /* Common: Standardizes typography */
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    /* Common: Optimize load font. */
-    font-display: swap;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
 }
 
 a {
-    /* Hyperlink: Remove the bottom line. */
+  /* Remove the bottom line */
   text-decoration: none;
-    /* Hyperlink: Remove default color */
+  /* Remove default color */
   color: unset;
   /* iOS: remove the color of the highlight that appears over a link while it's being tapped */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Table: Standardize and modernize the appearance */
+/*
+  Table: Standardize and modernize the appearance
+*/
 table {
   border-collapse: collapse;
   margin-bottom: 10px;
   width: 100%;
 }
-
-/* Table: Add border */
-td,
-th {
+td, th {
   padding: .4rem;
   border: 1px solid black;
 }
 
-/* Input: remove border radius */
 input {
+  /* Remove border radius */
   border-radius: 0;
 }