finished major foundations

2026-03-17 18:59:02 -07:00 · 2026-03-17 18:59:02 -07:00 · 7537c67e43
commit 7537c67e43
parent 086d160b28
5 changed files with 134 additions and 20 deletions
--- a/www/about.html
+++ b/www/about.html
@ -1,12 +1,88 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <title></title>
-  </head>
-  <body>
-    <header></header>
-    <main></main>
-    <footer></footer>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>WA2000 - About</title>
+<link rel="icon" type="image/x-icon" href="./favicon.ico">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">
+<link type="text/css" rel="stylesheet" href="./style.css">
+</head>
+<body>
+
+<div class="banner">
+  <img src="banner.png" alt="banner"/>
+  
+</div>
+
+<div class="nav-wrap">
+
+  <a href="https://www.youtube.com/@universebow"
+   target="_blank" rel="noopener noreferrer">
+  <img src="./youtube.svg" target="_blank" alt="Icon description">
+  </a>
+
+  <div style="width: 2%;"></div>
+
+  <div class="nav-pill" id="nav-pill">
+    <div class="nav-pill-bar" id="nav-pill-bar">
+      <span class="nav-logo">About</span>
+      <svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+    <div class="nav-dropdown" id="nav-dropdown">
+      <div class="nav-divider"></div>
+      <a href="index.html" class="nav-link">WA2000</a>
+      <a href="" class="nav-link">About</a>
+      <a href="#" class="nav-link">Gallery</a>
+      <a href="#" class="nav-link">Contact</a>
+    </div>
+  </div>
+
+
+
+  <div style="width: 2%;"></div>
+
+  <a href="https://www.youtube.com/@universebow"
+   target="_blank" rel="noopener noreferrer">
+  <img src="./youtube.svg" target="_blank" alt="Icon description" width="43" height="43">
+  </a>
+
+</div>
+
+<div class="nav-placeholder" id="nav-placeholder"></div>
+
+<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
+<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
+  <defs>
+    <filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <feImage id="nav-disp-img" result="disp_map" />
+      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
+      <feImage id="nav-spec-img" result="spec_map" />
+      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+    </filter>
+    <filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <feImage id="displacement-map-img" result="disp_map" />
+      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
+      <feImage id="specular-map-img" result="spec_map" />
+      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+    </filter>
+  </defs>
+</svg>
+
+<div class="card" id="card">
+  <h1>waff waff!</h1>
+  <div class="divider"></div>
+  <p>tiny text!!!</p>
+  <p>wuff</p>
+</div>
+
+<script src="./script.js"></script>
+
+</body>
+</html>
--- a/www/background.png
+++ b/www/background.png
--- a/www/index.html
+++ b/www/index.html
@ -13,7 +13,7 @@
 <body>

 <div class="banner">
-  <img src="banner.png" alt="banner" />
+  <img src="banner.png" alt="banner"/>
  
 </div>

@ -35,7 +35,7 @@
    </div>
    <div class="nav-dropdown" id="nav-dropdown">
      <div class="nav-divider"></div>
-      <a href="" class="nav-link">Home</a>
+      <a href="" class="nav-link">------</a>
      <a href="about.html" class="nav-link">About</a>
      <a href="#" class="nav-link">Gallery</a>
      <a href="#" class="nav-link">Contact</a>
--- a/www/style.css
+++ b/www/style.css
@ -13,17 +13,18 @@ body {
 .banner {
    position: relative;
    width: 99%;
-    max-height: 280px;
    overflow: hidden;
    margin: 5px 5px 10px 5px;
    border-radius: 25px;
    display: flex;
-    border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
-    align-items: center; /* Vertically centre the image within the container */
+    border: 4px solid rgba(196, 214, 226, 0.9);
+    align-items: center;
+    max-height: 30vh; /* % of the viewport height */
 }

 .banner img {
    width: 100%;
+    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
@ -255,6 +256,6 @@ p {
 }

 .nav-link:hover {
-    color: rgba(137, 180, 250, 1); /* eww $primary-neon on hover */
+    color: rgb(0, 0, 0); /* eww $primary-neon on hover */
    background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */
 }
--- a/www/youtube.svg
+++ b/www/youtube.svg
@ -5,11 +5,19 @@
   height="571.19171"
   version="1.1"
   id="svg6"
+   sodipodi:docname="youtube.svg"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   inkscape:export-filename="youtube.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
   id="defs10"><linearGradient
-     id="linearGradient56"><stop
+     id="linearGradient56"
+     inkscape:collect="always"><stop
       style="stop-color:#f4f4f4;stop-opacity:1;"
       offset="0"
       id="stop56" /><stop
@ -17,6 +25,7 @@
       offset="1"
       id="stop57" /></linearGradient><filter
     style="color-interpolation-filters:sRGB"
+     inkscape:label="Drop Shadow"
     id="filter47"
     x="-0.31564095"
     y="-0.31564095"
@ -47,6 +56,7 @@
       in2="comp1"
       id="feComposite47" /></filter><filter
     style="color-interpolation-filters:sRGB"
+     inkscape:label="Drop Shadow"
     id="filter54"
     x="-0.16529255"
     y="-0.2361939"
@ -76,6 +86,7 @@
       in="SourceGraphic"
       in2="comp1"
       id="feComposite54" /></filter><linearGradient
+     inkscape:collect="always"
     xlink:href="#linearGradient56"
     id="linearGradient57"
     x1="-10.367967"
@ -85,6 +96,7 @@
     gradientUnits="userSpaceOnUse"
     gradientTransform="matrix(0.9700025,0,0,0.9700025,-134.70136,66.356612)" /><filter
     style="color-interpolation-filters:sRGB"
+     inkscape:label="Blur"
     id="filter57"
     x="-0.069346031"
     y="-0.069346031"
@ -92,7 +104,32 @@
     height="1.1386921"><feGaussianBlur
       stdDeviation="5.7687512"
       result="blur"
-       id="feGaussianBlur57" /></filter></defs>
+       id="feGaussianBlur57" /></filter></defs><sodipodi:namedview
+   id="namedview8"
+   pagecolor="#ffffff"
+   bordercolor="#000000"
+   borderopacity="0.25"
+   inkscape:showpageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   showgrid="false"
+   inkscape:zoom="2.5"
+   inkscape:cx="150.4"
+   inkscape:cy="252.6"
+   inkscape:window-width="2560"
+   inkscape:window-height="1397"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg6"><inkscape:page
+     x="0"
+     y="0"
+     width="571.19171"
+     height="571.19171"
+     id="page2"
+     margin="0"
+     bleed="0" /></sodipodi:namedview>
  <rect
   width="319.73596"
   height="319.73596"