diff --git a/internal/site/auth.go b/internal/site/auth.go index 0883be0..f82cb30 100644 --- a/internal/site/auth.go +++ b/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 diff --git a/internal/site/server.go b/internal/site/server.go index 4165919..4b4966f 100644 --- a/internal/site/server.go +++ b/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")) diff --git a/internal/site/styles/backgrounds.css b/internal/site/styles/backgrounds.css index 49514df..0aae400 100644 --- a/internal/site/styles/backgrounds.css +++ b/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); } } diff --git a/internal/site/styles/borders.css b/internal/site/styles/borders.css index 80e2e1e..c3dc870 100644 --- a/internal/site/styles/borders.css +++ b/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); + } } diff --git a/internal/site/styles/index.css b/internal/site/styles/index.css index e3369e5..b6d9a69 100644 --- a/internal/site/styles/index.css +++ b/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 { - flex-grow: 1; + .max-w-\[50\%\] { + max-width: 50%; + } + .max-w-full { + max-width: 100%; } .grow { flex-grow: 1; @@ -211,14 +216,11 @@ .items-stretch { align-items: stretch; } - .gap-\[1em\] { - gap: 1em; + .justify-center { + justify-content: center; } - .overflow-auto { - overflow: auto; - } - .overflow-x-auto { - overflow-x: auto; + .gap-y-\[2em\] { + row-gap: 2em; } .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 { - background-color: var(--base-200); + .bg-card { + 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; } } diff --git a/internal/site/styles/typography.css b/internal/site/styles/typography.css index 3c18caa..a77c4ff 100644 --- a/internal/site/styles/typography.css +++ b/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); } diff --git a/internal/site/templates/layout.html.tmpl b/internal/site/templates/layout.html.tmpl index 084529a..8feb211 100644 --- a/internal/site/templates/layout.html.tmpl +++ b/internal/site/templates/layout.html.tmpl @@ -19,9 +19,11 @@
-
+
{{/* This is where the page_body template will be inserted into the page */}} {{- block "body" . }}{{ end }}
diff --git a/internal/site/templates/page_bodies/index.html.tmpl b/internal/site/templates/page_bodies/index.html.tmpl index cf64c12..4b20423 100644 --- a/internal/site/templates/page_bodies/index.html.tmpl +++ b/internal/site/templates/page_bodies/index.html.tmpl @@ -1,8 +1,26 @@ -

Home

+
+

+ Inventory++ +

+ +
{{- if and .Identity.User.UserID (not .Identity.Account) }}

New Account

{{- end }} +
+

+ Synchronize inventory automatically! +

-Test Auth +
+ + Create an Account + +
+ +

+ ...and start syncing your shops today! +

+