From c1f6dc323d8992f12c6aa6b6b448ee95534d2a72 Mon Sep 17 00:00:00 2001
From: etherware-novice <73374039+etherware-novice@users.noreply.github.com>
Date: Sat, 10 Aug 2024 12:37:34 -0500
Subject: [PATCH] complete and utter redesign to use hmtlgrid

---
 _layouts/default.html | 52 +++++++++++++------------
 _sass/main.scss       |  7 ----
 _sass/sidebar.scss    | 90 ++++++++++++++++++++++++++-----------------
 3 files changed, 83 insertions(+), 66 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index ace2ed8..50fe00d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -19,40 +19,44 @@ navbar: topnav
 
 		{% include background.html %}
 		{% include mplayer.html %}
-		<div class="vcol">
-			<div class="columns">
-				<div class="left-sidebar">
-					{% if layout.navbar != "" %}
-						{% include {{layout.navbar}}.html %}
-					{% endif %}
-				</div>
-				<div class="main-content">{{ content }}</div>
-				<div class="right-sidebar">
-					time:
-					<span id="swatchClock"></span>
-					<script src="/assets/js/swatch.js"></script>
-					
-					<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%">
-					<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto" id="cbox"></iframe>
+		<div class="container">
+			<div class="navigation">
+				{% if layout.navbar != "" %}
+					{% include {{layout.navbar}}.html %}
+				{% endif %}
+			</div>
+			<marquee class="name">{{ page.name }}</marquee>
+			<div class="main">{{ content }}</div>
+			<div class="pets">
+				time:
+				<span id="swatchClock"></span>
+				<script src="/assets/js/swatch.js"></script>
+				{% include statuscafe.html %}
+				<img src="/assets/images/blinkers/cc-by-sa.gif">
+			</div>
+			<marquee class="quotes">
+				quotes will go here when i get back to working on this
+			</marquee>
+				
+			<img src="https://slimepondcount.goatcounter.com/counter/{{ page.url }}.png" style="width: 100%" class="sitecount">
+			<iframe src="https://www3.cbox.ws/box/?boxid=3539632&boxtag=JU8HaS" width="100%" height="450" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="5" marginwidth="5" scrolling="auto" id="cbox"></iframe>
 
-					
-					{% include statuscafe.html %}
+			<marquee id="blinkerscroll">
+			{% for blink in site.data.blinkers %}
+				<img src="/assets/images/blinkers/{{ blink.name }}" class="blinkers"></img>
+			{% endfor %}
+			</marquee>
+			
 
-					<img src="/assets/images/blinkers/cc-by-sa.gif">
-				</div>
 			</div>
 		</div>
+	</div>
 
 	{% unless jekyll.environment == "local" %}
 		<link href="https://melonking.net/styles/flood.css" rel="stylesheet" type="text/css" media="all" />
 		<script src="https://melonking.net/scripts/flood.js"></script>
 	{% endunless %}
 
-	<marquee id="blinkerscroll">
-		{% for blink in site.data.blinkers %}
-			<img src="/assets/images/blinkers/{{ blink.name }}" class="blinkers"></img>
-		{% endfor %}
-	</marquee>
             
 	</body>
 </html>
diff --git a/_sass/main.scss b/_sass/main.scss
index ddf49d6..bad3634 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -52,13 +52,6 @@ img {
 	z-index: 9999999999 !important;
 }
 
-#blinkerscroll {
-	position: absolute;
-	left: 0;
-	bottom: 3vh;
-	z-index: -2
-}
-
 .blinkers {
 	max-height: 7vh;
 	min-height: 32px;
diff --git a/_sass/sidebar.scss b/_sass/sidebar.scss
index abece25..3214611 100644
--- a/_sass/sidebar.scss
+++ b/_sass/sidebar.scss
@@ -1,44 +1,64 @@
-.columns {
+.container {  
   position: relative;
-  max-width: 80%;
-  max-height: 80vh;
-  display: flex;
-  margin-top: 20px; margin-bottom: 0px;
+  width: 80vw;
+  height: 90vh;
+  margin-top: 5vh;
   margin-left: auto; margin-right: auto;
-  justify-content: space-around;
-  border: 1px solid black;
-  overflow-x: scroll;
-  overflow-y: scroll;
+
+  display: grid;
+  grid-template-columns: 1.5fr 4fr 2fr auto;
+  grid-template-rows: 1fr 1.5em 5fr auto 1fr;
+  grid-auto-rows: 1fr;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "name name pets pets"
+    "quotes quotes quotes quotes"
+    "cbox main main navigation"
+    "cbox main main sitecount"
+    "blinker blinker blinker blinker";
+
+  grid-gap: 10px;
 }
 
-.left-sidebar {
-  background: darkgray;
-  padding: 10px;
-  overflow-x: scroll;
-  overflow-y: scroll;
-  width: max-content;
-  text-align: left;
+.container>* {
+  background-color: #ccc;
+  border: 2px black solid;
+  overflow: scroll;
 }
 
-.main-content {
-  overflow-x: scroll;
-  overflow-y: scroll;
-  width: 60%;
-  flex: 5;
-  margin: 10px;
-  border: 1px solid black;
-  max-height: 89vh;
-  background-color: #cccccc
+.main { grid-area: main; }
+
+#cbox {
+	grid-area: cbox;
+	height: 100%;
 }
 
-.right-sidebar {
-  background: darkgray;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: sticky;
-  margin: 5px;
-  overflow-x: clip;
-  overflow-y: scroll;
-  align-items: flex-start;
+.navigation {
+	grid-area: navigation;
+	padding: 5px;
 }
+
+.sitecount { grid-area: sitecount; }
+
+#blinkerscroll {
+	grid-area: blinker;
+	background-color: transparent;
+	border: transparent;
+}
+
+.quotes {
+	grid-area: quotes;
+	background-color: black;
+	color: white;
+}
+
+.name {
+	display: inline;
+	grid-area: name;
+	background: linear-gradient(90deg, red, blue) !important;
+	font-size: 5em;
+	vertical-align: middle;
+}
+
+.pets { grid-area: pets; }
+