Added svg favicon and reworked the max-width handling of many elements

3 files changed, 10 insertions, 18 deletions

diff --git a/static/all.css b/static/all.css
index e5e49f3..4ccb7c2 100644
--- a/static/all.css
+++ b/static/all.css
@@ -11,7 +11,7 @@
     --color-link: #b58900;
     --color-secondary: #eee8d5;
     --color-secondary-accent: #fdf6e3;
-    --color-shadow: #eee8d5;
+    --color-shadow: #93a1a1;
     --color-table: #859900;
     --color-text: #839496;
     --color-text-secondary: #93a1a1;
@@ -20,10 +20,6 @@
     --justify-important: center;
     --justify-normal: left;
     --line-height: 1.5;
-    --width-card: 285px;
-    --width-card-medium: 460px;
-    --width-card-wide: 800px;
-    --width-content: 1080px;
 }
 
 * {
@@ -42,7 +38,8 @@ body {
     color: var(--color-text);
     font-family: var(--font-family);
     line-height: var(--line-height);
-    margin: 0;
+    margin: 0 auto;
+    max-width: 60rem;
     overflow-x: hidden;
     padding: 0;
     font-feature-settings: "kern" 1;
@@ -64,7 +61,7 @@ header {
 }
 
 hr {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-accent);
     border: none;
     height: 1px;
     margin: 1rem 0;
@@ -92,7 +89,6 @@ section aside {
     box-shadow: var(--box-shadow) var(--color-shadow);
     margin: 1rem;
     padding: 1.25rem;
-    width: var(--width-card);
 }
 
 section aside:hover {
@@ -122,10 +118,6 @@ header a strong {
     margin-right: 0.5rem;
 }
 
-header nav img {
-    margin: 1rem 0;
-}
-
 section header {
     padding-top: 0;
     width: 100%;
@@ -227,21 +219,23 @@ ul li {
 }
 
 p {
+    hyphens: auto;
     margin: 0.75rem 0;
+    overflow-wrap: anywhere;
     padding: 0;
+    text-align: justify;
+    text-justify: inter-character;
     width: 100%;
 }
 
 pre {
     margin: 1rem 0;
-    max-width: var(--width-card-wide);
     padding: 1rem 0;
 }
 
 pre code,
 pre samp {
     display: block;
-    max-width: var(--width-card-wide);
     padding: 0.5rem 2rem;
     white-space: pre-wrap;
 }
@@ -361,8 +355,6 @@ form {
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow) var(--color-shadow);
     display: block;
-    max-width: var(--width-card-wide);
-    min-width: var(--width-card-wide);
     padding: 1.5rem;
     text-align: var(--justify-normal);
 }
@@ -381,7 +373,6 @@ select,
 textarea {
     display: block;
     font-size: inherit;
-    max-width: var(--width-card-wide);
 }
 
 input[type="checkbox"],
@@ -467,7 +458,6 @@ blockquote {
     font-size: x-large;
     line-height: var(--line-height);
     margin: 1rem auto;
-    max-width: var(--width-card-medium);
     padding: 1.5rem 1rem;
     text-align: var(--justify-important);
 }
diff --git a/static/favicon.ico b/static/favicon.ico
index 216330f..21d3f00 100755
--- a/static/favicon.ico
+++ b/static/favicon.ico
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 0000000..185129b
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg height='300px' width='300px'  fill="#839496" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" x="0px" y="0px"><title>Copy, Link, Web Page, Href, interface</title><path d="M25,28H11a3,3,0,0,1-3-3V11a3,3,0,0,1,3-3H25a3,3,0,0,1,3,3V25A3,3,0,0,1,25,28ZM11,10a1,1,0,0,0-1,1V25a1,1,0,0,0,1,1H25a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1Z"></path><path d="M9,24H7a3,3,0,0,1-3-3V7A3,3,0,0,1,7,4H21a3,3,0,0,1,3,3V9a1,1,0,0,1-2,0V7a1,1,0,0,0-1-1H7A1,1,0,0,0,6,7V21a1,1,0,0,0,1,1H9a1,1,0,0,1,0,2Z"></path><path d="M15,24a3,3,0,0,1-2.12-5.12l1-1a3.07,3.07,0,0,1,4.24,0,3,3,0,0,1,0,4.24l-1,1A3,3,0,0,1,15,24Zm1-5a1,1,0,0,0-.71.29h0l-1,1a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l1-1A1,1,0,0,0,16,19Zm-1.41-.41h0Z"></path><path d="M20,19a3,3,0,0,1-2.12-5.12l1-1a3.07,3.07,0,0,1,4.24,0,3,3,0,0,1,0,4.24l-1,1A3,3,0,0,1,20,19Zm1-5a1,1,0,0,0-.71.29h0l-1,1a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l1-1A1,1,0,0,0,21,14Zm-1.41-.41h0Z"></path><path d="M17,20a1,1,0,0,1-.71-1.71l2-2a1,1,0,0,1,1.41,1.41l-2,2A1,1,0,0,1,17,20Z"></path></svg>