miki

commit af396c28024bc1345812a47cbe0512b13de76e41
parent e449002350b051e7d04bb6602232802f456d3ee6
Author: weetat <wtenison@protonmail.com>
Date:   Thu, 13 Feb 2025 17:17:10 +0000

Sketch out header and subject page layout

Add a header and left/subject/right sections to index.html with styles
for them. Comment out the debug prints in main.

Diffstat:
M
src/miki/miki.go
 | 
7
+++----
M
web/index.html
 | 
30
++++++++++++++++++++++++------
M
web/styles.css
 | 
113
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---

3 files changed, 136 insertions(+), 14 deletions(-)
diff --git a/src/miki/miki.go b/src/miki/miki.go
@@ -90,7 +90,6 @@ type IResourceData interface {
 }
 
 func main() {
-	fmt.Println("MIKI")
 
 	////////// PULL SYSTEM INFO FROM YAML //////////
 
@@ -108,7 +107,7 @@ func main() {
 		fmt.Println(err.Error())
 		return
 	}
-	fmt.Printf("%+v\n", _fs)
+	// fmt.Printf("%+v\n", _fs)
 
 	_siBuffer := bytes.NewBufferString("serverinfo: *si\n")
 
@@ -126,7 +125,7 @@ func main() {
 		fmt.Println(err.Error())
 		return
 	}
-	fmt.Printf("%+v\n", _si)
+	// fmt.Printf("%+v\n", _si)
 
 	////////// CHECK FOR VALID CERT INFO //////////
 
@@ -173,7 +172,7 @@ func main() {
 			return
 		}
 
-		fmt.Printf("INFO:\tmain():mux:Resource(%+v)\n", _rPkg)
+		// fmt.Printf("INFO:\tmain():mux:Resource(%+v)\n", _rPkg)
 	})
 
 	////////// RUN SERVERS //////////
diff --git a/web/index.html b/web/index.html
@@ -8,13 +8,31 @@
 </head>
 
 <body>
-    <section class="_content">
-        <div></div>
-        <div>
-            <h1>HELLO WORLD</h1>
-            <p class="--font-center">Work-in-progess; More coming soon.</p>
+
+    <header>
+        <div class="_content">
+
         </div>
-        <div></div>
+    </header>
+
+    <section class="_content">
+
+        <section id="left"></section>
+
+        <section id="subject_">
+
+            <section id="_card" class="__container_bg-1">
+
+            </section>
+
+            <section id="_body">
+
+            </section>
+
+        </section>
+
+        <section id="right"></section>
+
     </section>
 </body>
 
diff --git a/web/styles.css b/web/styles.css
@@ -1,8 +1,7 @@
-@layer base, primatives, modifiers;
+@layer base, primative, modifier, entity;
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
 
-/* ////////// BASE ////////// */
 @layer base {
 
     *,
@@ -89,6 +88,63 @@
         }
     }
 
+    header {
+        position: fixed;
+        width: 100%;
+        height: var(--miki_header__height);
+        z-index: 1;
+        top: 0;
+        left: 0;
+
+        display: grid;
+
+        color: var(--color__ff);
+        background-color: var(--color__bf);
+
+        >._content {
+            width: min(100vw, var(--miki_page__max-width));
+            display: grid;
+            justify-self: center;
+            justify-items: center;
+            align-items: center;
+            grid-template-columns: auto minmax(0, 100%) auto;
+        }
+
+        a {
+            color: var(--color__bf)
+        }
+
+        #title {
+            font-size: calc(var(--miki_header__height) * .33);
+        }
+
+        .collapsible_ {
+            >._button {
+                padding: var(--miki_padding);
+                margin: 0;
+            }
+
+            >._content {
+                position: fixed;
+                width: 100%;
+                z-index: 1;
+                top: calc(var(--miki_header__height));
+                left: 0;
+
+                display: grid;
+                justify-content: center;
+                text-align: center;
+
+                color: var(--color__bf);
+                background-color: var(--color__ff);
+
+                >* {
+                    padding: var(--miki_padding);
+                }
+            }
+        }
+    }
+
     h1,
     h2,
     h3,
@@ -114,7 +170,7 @@
     }
 }
 
-@layer primatives {
+@layer primative {
 
     @scope (.collapsible_) {
         :scope {
@@ -284,7 +340,7 @@
 
 }
 
-@layer modifiers {
+@layer modifier {
 
     /*//////// BACKGROUND ////////*/
 
@@ -328,4 +384,53 @@
     .--clickable {
         cursor: pointer;
     }
+}
+
+@layer entity {
+
+    @scope (#subject_) {
+        #_card {
+            width: min(75vw);
+
+            display: grid;
+            justify-self: center;
+
+            @media screen and (min-width: 900px) {
+                width: calc(var(--miki_gold) * 12rem);
+                margin-right: var(--miki_margin--double);
+                margin-bottom: var(--miki_margin--double);
+                float: left;
+            }
+
+            >.collapsible_ {
+
+                >._button {
+                    border-radius: 1rem;
+
+                    transition: .33s;
+
+                    &::before {
+                        content: "open\a0";
+                    }
+
+                    &.active {
+                        background-color: var(--color__theme);
+
+                        &::before {
+                            content: "close\a0";
+                        }
+                    }
+                }
+
+                >._content {
+                    padding: 0;
+                    width: 100%;
+
+                    transition: .5s;
+                }
+            }
+        }
+
+        #_body {}
+    }
 }
 \ No newline at end of file