adding context and flexbox

nheimlich · Oct 12, 2024 · bc3233c · bc3233c
1 parent bab8b9a
commit bc3233c
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 10 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -10,6 +10,30 @@ header {
   padding: 10px;
 }
 
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.container > div:nth-child(-n+3), /* -n (decreasing seq from zero), (+3 is starting point for n) */
+.container > div:nth-child(-n+3) button {
+  font-size: 1.5cqw;
+  flex: 1 1 auto;
+  border-radius: 15px;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+}
+
+#projects,
+#tools {
+  flex 1 1 0;
+  list-style-type: "- ";
+  margin: 5px;
+}
+
 footer {
   background-color: grey;
   color: white;

diff --git a/src/index.html b/src/index.html
@@ -9,17 +9,23 @@
   <body>
     <header>
       <h1>nhlabs</h1>
+      <div class="container">
+        <div class="obj">
+          <a href="{{ '/index.html' | url }}"><button>home</button></a>
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/projects/index.html' | url }}"
+            ><button>projects</button></a
+          >
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/tools/index.html' | url }}"
+            ><button>tools</button></a
+          >
+        </div>
+      </div>
     </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Blog</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-    </nav>
+    <div id="content"></div>
     <footer>
       <p>&copy; 2024 nhlabs</p>
     </footer>

diff --git a/src/pages/projects.html b/src/pages/projects.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>nhlabs.org</title>
+    <link rel="stylesheet" href="{{ '/css/styles.css' | url }}" />
+  </head>
+  <body>
+    <header>
+      <h1>nhlabs</h1>
+      <div class="container">
+        <div class="obj">
+          <a href="{{ '/index.html' | url }}"><button>home</button></a>
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/projects/index.html' | url }}"
+            ><button>projects</button></a
+          >
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/tools/index.html' | url }}"
+            ><button>tools</button></a
+          >
+        </div>
+      </div>
+    </header>
+    <div class="content">
+      <div id="projects">
+        <nav>
+          <p>current-projects:</p>
+          <li>
+            <a href="https://github.com/nheimlich/nheimlich.github.io"
+              >nheimlich.github.io</a
+            >
+          </li>
+          <li>
+            <a href="https://github.com/nheimlich/cloud-init-k8s"
+              >cloud-init-k8s</a
+            >
+          </li>
+          <li>
+            <a href="https://github.com/nheimlich/k8s.nhlabs.org"
+              >k8s.nhlabs.org</a
+            >
+          </li>
+        </nav>
+      </div>
+    </div>
+    <footer>
+      <p>&copy; 2024 nhlabs</p>
+    </footer>
+  </body>
+</html>
diff --git a/src/pages/tools.html b/src/pages/tools.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="{{ '/css/styles.css' | url }}" />
+  </head>
+  <body>
+    <header>
+      <h1>nhlabs</h1>
+      <div class="container">
+        <div class="obj">
+          <a href="{{ '/index.html' | url }}"><button>home</button></a>
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/projects/index.html' | url }}"
+            ><button>projects</button></a
+          >
+        </div>
+        <div class="obj">
+          <a href="{{ '/pages/tools/index.html' | url }}"
+            ><button>tools</button></a
+          >
+        </div>
+      </div>
+    </header>
+    <div class="content">
+      <div id="tools">
+        <nav>
+          <p>tools i use:</p>
+          <li>vim</li>
+          <li><a href="https://github.com/zk-org/zk">zk-vim</a></li>
+        </nav>
+      </div>
+    </div>
+    <footer>
+      <p>&copy; 2024 nhlabs</p>
+    </footer>
+  </body>
+</html>