From 80980ee1838d3f02243aaa2da2eeb533df060478 Mon Sep 17 00:00:00 2001
From: southerntofu <southerntofu@thunix.net>
Date: Sun, 29 Mar 2020 19:17:37 +0200
Subject: [PATCH] Do some SASS-fu and import water.css for semantic markup
 styling

---
 sass/style.scss        | 26 ++++++++++++++++++++++++++
 sass/widgets/menu.scss | 40 ++++++++++++++++++++++++++++++++++++++++
 static/style.css       |  1 -
 static/water.css       |  2 ++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 sass/style.scss
 create mode 100644 sass/widgets/menu.scss
 delete mode 100644 static/style.css
 create mode 100644 static/water.css

diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..e22c139
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,26 @@
+@import 'widgets/menu.scss';
+
+.nav-menu {
+    font-weight: bold;
+    > a { margin: 0 1rem; } // Spacing entries
+    background-color: rgb(239, 239, 239);
+    color: black;
+    padding: 0.5rem; // Leaving background space around entries
+}
+
+header { text-align: center; font-weight: bold; }
+
+article > h1:first-child {
+    text-align: center;
+    font-size: 2.6em;
+}
+
+main {
+    margin-top: 1rem;
+}
+
+.source {
+    background-color: rgb(239, 239, 239);
+    text-align: center;
+    font-weight: bold;
+}
diff --git a/sass/widgets/menu.scss b/sass/widgets/menu.scss
new file mode 100644
index 0000000..8679b66
--- /dev/null
+++ b/sass/widgets/menu.scss
@@ -0,0 +1,40 @@
+/************************************************************
+*************************************************************
+*******************     SQUAT THEME     *********************
+********** Javascript-free attempt at a better web **********
+*************************************************************
+************************************************************/
+
+/* Menu widget styles */
+.widget-menu {
+    width: 100%; white-space: nowrap; box-sizing: border-box;
+    ul {
+        list-style: none; margin: 0; padding: 0;
+        display: inline-block; 
+        @media screen and (max-width: 62em) { display: none; }
+        li { display: inline-block; padding: 0; margin: 0; position: relative; }
+    }
+}
+
+
+#menu-nav-main { text-align: center; font-size: 1.2rem; }
+.pure-menu-link, .pure-menu-open { display: block; padding: 0.5em 1em; }
+#menu-nav-main .pure-menu-children { left: 50% !important; transform: translateX(-50%); }
+
+.pure-menu-open {
+    display: none;
+    @media screen and (max-width: 62em) {
+        display: block;
+        &:target {
+            display: none;
+            & ~ .pure-menu-close { display: inline-block; }
+            & ~ ul {
+                display: block;
+                li { display: block; position: relative; }
+            }
+        }
+    }
+}
+
+/* Making pureCSS menu responsive without Javascript */
+.pure-menu-close { display: none; }
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index d4eac7c..0000000
--- a/static/style.css
+++ /dev/null
@@ -1 +0,0 @@
-header { text-align: center; font-weight: bold; }
diff --git a/static/water.css b/static/water.css
new file mode 100644
index 0000000..8ce73eb
--- /dev/null
+++ b/static/water.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
+/*# sourceMappingURL=light.min.css.map */