first draft of home page

internal/site/auth.go

@@ -17,13 +17,6 @@ import (
 	"ruben/inventory2/internal/site/response"
 )
 
-// just keep this around long enough for testing auth middleware..
-func (s *Server) testAuthEndpoint(r *http.Request) (response.Response, error) {
-	fmt.Println("AUTH TEST SUCCESS:", getIdentity(r.Context()))
-
-	return response.TemporaryRedirect("/"), nil
-}
-
 type identity struct {
 	AccessToken string
 	Claims      authentication.AccessTokenClaims

internal/site/server.go

@@ -100,9 +100,6 @@ func NewServer(
 	// TODO: eliminate once no longer used.
 	mux.HandleFunc("POST /login", response.Handler(s.login))
 
-	// TODO: get rid of this, once we're confident this isn't needed...
-	mux.Handle("GET /test-auth", response.Handler(s.authenticateAndAddIdentity(s.testAuthEndpoint)))
-
 	// webpage content
 
 	scfs := http.FileServer(http.Dir(contentDir + "/scripts"))

internal/site/styles/backgrounds.css

@@ -1,6 +1,10 @@
-@layer theme {
+@layer component {
 	header,
 	footer {
-		background-color: var(--base-200);
+		background-color: var(--sidebar);
+	}
+
+	a.selected {
+		background-color: var(--sidebar-accent);
 	}
 }

internal/site/styles/borders.css

@@ -6,9 +6,29 @@
 }
 
 @layer base {
+	header,
+	footer {
+		border-color: var(--sidebar-border);
+	}
+
+	header {
+		border-bottom-width: 1px
+	}
+	footer {
+		border-top-width: 1px;
+	}
+
 	select {
 		border-width: 2px;
 		border-color: var(--border);
 		border-radius: var(--radius-lg);
 	}
+
+	.border-thin {
+	   	border-width: 1px;
+	}
+	.border-button {
+	   	border-width: 2px;
+		border-radius: var(--radius-lg);
+	}
 }

internal/site/styles/index.css

@@ -18,7 +18,6 @@
     --text-4xl: 2.25rem;
     --text-5xl: 3rem;
     --font-weight-bold: 700;
-    --font-weight-black: 900;
     --radius-lg: var(--radius);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
@@ -178,23 +177,29 @@
   .mt-\[1em\] {
     margin-top: 1em;
   }
+  .mt-\[3em\] {
+    margin-top: 3em;
+  }
+  .mb-\[1em\] {
+    margin-bottom: 1em;
+  }
+  .mb-\[3em\] {
+    margin-bottom: 3em;
+  }
   .block {
     display: block;
   }
   .flex {
     display: flex;
   }
-  .h-\[100\%\] {
-    height: 100%;
-  }
-  .min-h-\[100\%\] {
-    min-height: 100%;
-  }
   .min-h-full {
     min-height: 100%;
   }
-  .flex-grow-1 {
+  .max-w-\[50\%\] {
-    flex-grow: 1;
+    max-width: 50%;
+  }
+  .max-w-full {
+    max-width: 100%;
   }
   .grow {
     flex-grow: 1;
@@ -211,14 +216,11 @@
   .items-stretch {
     align-items: stretch;
   }
-  .gap-\[1em\] {
+  .justify-center {
-    gap: 1em;
+    justify-content: center;
   }
-  .overflow-auto {
+  .gap-y-\[2em\] {
-    overflow: auto;
+    row-gap: 2em;
-  }
-  .overflow-x-auto {
-    overflow-x: auto;
   }
   .overflow-x-scroll {
     overflow-x: scroll;
@@ -226,21 +228,37 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
+  .border-\[1px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-sidebar-border {
+    border-color: var(--sidebar-border);
+  }
   .bg-background {
     background-color: var(--background);
   }
-  .bg-header {
+  .bg-card {
-    background-color: var(--base-200);
+    background-color: var(--card);
   }
   .p-\[1em\] {
     padding: 1em;
   }
+  .p-\[2em\] {
+    padding: 2em;
+  }
   .pt-\[1em\] {
     padding-top: 1em;
   }
   .pb-\[1em\] {
     padding-bottom: 1em;
   }
+  .text-center {
+    text-align: center;
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -249,10 +267,6 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .font-black {
-    --tw-font-weight: var(--font-weight-black);
-    font-weight: var(--font-weight-black);
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -341,6 +355,44 @@
   --sidebar-accent-foreground: var(--base-800);
   --sidebar-border: var(--base-200);
   --sidebar-ring: var(--primary-300);
+  --display-color: var(--foreground);
+  --text-color: var(--foreground);
+  @media (prefers-color-scheme: dark) {
+    --background: var(--base-950);
+    --foreground: var(--base-200);
+    --card: var(--base-900);
+    --card-foreground: var(--base-200);
+    --popover: var(--base-900);
+    --popover-foreground: var(--base-200);
+    --primary: var(--primary-300);
+    --primary-foreground: var(--color-black);
+    --secondary: var(--secondary-500);
+    --secondary-foreground: var(--color-black);
+    --muted: var(--base-800);
+    --muted-foreground: var(--base-300);
+    --accent: var(--base-800);
+    --accent-foreground: var(--base-200);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: var(--base-800);
+    --input: var(--base-700);
+    --ring: var(--primary-300);
+    --chart-1: var(--primary-300);
+    --chart-2: var(--secondary-500);
+    --chart-3: var(--primary-400);
+    --chart-4: var(--secondary-300);
+    --chart-5: var(--primary-300);
+    --sidebar: var(--base-900);
+    --sidebar-foreground: var(--base-200);
+    --sidebar-primary: var(--primary-300);
+    --sidebar-primary-foreground: var(--color-black);
+    --sidebar-accent: var(--base-800);
+    --sidebar-accent-foreground: var(--base-200);
+    --sidebar-border: var(--base-800);
+    --sidebar-ring: var(--primary-300);
+  }
+}
+* {
+  color: var(--foreground);
 }
 .dark {
   --background: var(--base-950);
@@ -417,17 +469,41 @@
     font-weight: var(--text-weight);
   }
 }
-@layer theme {
+@layer component {
   header,	footer {
-    background-color: var(--base-200);
+    background-color: var(--sidebar);
+  }
+  a.selected {
+    background-color: var(--sidebar-accent);
   }
 }
 @layer base {
+  header,	footer {
+    border-color: var(--sidebar-border);
+  }
+  header {
+    border-bottom-width: 1px;
+  }
+  footer {
+    border-top-width: 1px;
+  }
   select {
     border-width: 2px;
     border-color: var(--border);
     border-radius: var(--radius-lg);
   }
+  .border-thin {
+    border-width: 1px;
+  }
+  .border-button {
+    border-width: 2px;
+    border-radius: var(--radius-lg);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
 }
 @property --tw-font-weight {
   syntax: "*";
@@ -436,6 +512,7 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
       --tw-font-weight: initial;
     }
   }

internal/site/styles/typography.css

@@ -79,8 +79,48 @@
 	--sidebar-accent-foreground: var(--base-800);
 	--sidebar-border: var(--base-200);
 	--sidebar-ring: var(--primary-300);
+
+	--display-color: var(--foreground);
+	--text-color: var(--foreground);
+
+	@media (prefers-color-scheme: dark) {
+		--background: var(--base-950);
+		--foreground: var(--base-200);
+		--card: var(--base-900);
+		--card-foreground: var(--base-200);
+		--popover: var(--base-900);
+		--popover-foreground: var(--base-200);
+		--primary: var(--primary-300);
+		--primary-foreground: var(--color-black);
+		--secondary: var(--secondary-500);
+		--secondary-foreground: var(--color-black);
+		--muted: var(--base-800);
+		--muted-foreground: var(--base-300);
+		--accent: var(--base-800);
+		--accent-foreground: var(--base-200);
+		--destructive: oklch(0.704 0.191 22.216);
+		--border: var(--base-800);
+		--input: var(--base-700);
+		--ring: var(--primary-300);
+		--chart-1: var(--primary-300);
+		--chart-2: var(--secondary-500);
+		--chart-3: var(--primary-400);
+		--chart-4: var(--secondary-300);
+		--chart-5: var(--primary-300);
+		--sidebar: var(--base-900);
+		--sidebar-foreground: var(--base-200);
+		--sidebar-primary: var(--primary-300);
+		--sidebar-primary-foreground: var(--color-black);
+		--sidebar-accent: var(--base-800);
+		--sidebar-accent-foreground: var(--base-200);
+		--sidebar-border: var(--base-800);
+		--sidebar-ring: var(--primary-300);
+	}
 }
 
+* {
+	color: var(--foreground);
+}
 
 .dark {
 	--background: var(--base-950);
@@ -191,9 +231,6 @@
 	--color-popover: var(--popover);
 	--color-card-foreground: var(--card-foreground);
 	--color-card: var(--card);
-
-	--color-header: var(--base-200);
-	--color-footer: var(--base-200);
 }
 
 

internal/site/templates/layout.html.tmpl

@@ -19,9 +19,11 @@
 	<body class="basis-full grow bg-background flex flex-col items-stretch">
 		<header>
 			<nav class="flex flex-col items-center text-xl overflow-x-scroll overflow-y-hidden ">
+				{{- $path := or .Request.URL.Path "/" }}
+
 				<ul class="flex text-nowrap overflow-x-scroll overflow-y-hidden">
 					<li class="pt-[1em] pb-[1em]">
-						<a href="/" class="p-[1em] font-bold">
+						<a href="/" class="p-[1em] font-bold {{ if eq $path "/" }}selected{{ end }}">
 							Home
 						</a>
 					</li>
@@ -37,7 +39,7 @@
 				{{- if not $userID }}
 
 					<li class="pt-[1em] pb-[1em]">
-						<a href="/login" class="p-[1em] font-bold">
+						<a href="/login" class="p-[1em] font-bold {{ if eq $path "/login" }}selected{{ end }}">
 							Log In / Sign Up
 						</a>
 					</li>
@@ -45,19 +47,19 @@
 				{{- else if $acctID }}
 
 					<li class="pt-[1em] pb-[1em]">
-						<a href="/accounts/{{$acctID}}" class="p-[1em] font-bold">
+						<a href="/accounts/{{$acctID}}" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d" $acctID) }}selected{{ end }}">
 							Account
 						</a>
 					</li>
 
 					<li class="pt-[1em] pb-[1em]">
-						<a href="/accounts/{{$acctID}}/reports" class="p-[1em] font-bold">
+						<a href="/accounts/{{$acctID}}/reports" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/reports" $acctID) }}selected{{ end }}">
 							Reports
 						</a>
 					</li>
 
 					<li class="pt-[1em] pb-[1em]">
-						<a href="/accounts/{{$acctID}}/inventory" class="p-[1em] font-bold">
+						<a href="/accounts/{{$acctID}}/inventory" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/inventory" $acctID) }}selected{{ end }}">
 							Inventory
 						</a>
 					</li>
@@ -73,7 +75,7 @@
 			</nav>
 		</header>
 
-		<main class="basis-full grow p-[1em]">
+		<main class="basis-full grow p-[1em] max-w-full">
 			{{/* This is where the page_body template will be inserted into the page */}}
 			{{- block "body" . }}{{ end }}
 		</main>

internal/site/templates/page_bodies/index.html.tmpl

@@ -1,8 +1,26 @@
-<h1>Home</h1>
+<section class="flex justify-center max-w-full mt-[3em] mb-[3em]">
+	<h1 class="bg-card max-w-full p-[2em] border-[1px] border-sidebar-border rounded-lg text-nowrap">
+		Inventory++
+	</h1>
+
+</section>
 
 {{- if and .Identity.User.UserID (not .Identity.Account) }}
 	<h2><a href="/account-creation">New Account</a></h2>
 {{- end }}
 
+<section class="flex flex-col items-center max-w-full mt-[1em] mb-[1em] gap-y-[2em]">
+	<p class="text-lg text-center max-w-[50%]">
+		Synchronize inventory automatically!
+	</p>
 
-<a href="/test-auth">Test Auth</a>
+	<div class="border-button border-sidebar-border bg-card text-lg text-center max-w-[50%]">
+		<a href="/login" class="block p-[1em] font-bold">
+			Create an Account
+		</a>
+	</div>
+
+	<p class="text-lg text-center max-w-[50%]">
+		...and start syncing your shops today!
+	</p>
+</section>