From f5bb72f54a0f4e70d81d449c0720d04278655827 Mon Sep 17 00:00:00 2001 From: wagslane Date: Wed, 3 Jan 2024 13:28:32 -0700 Subject: [PATCH] add css --- cmd/app/main.go | 12 +-- cmd/app/public/styles.css | 212 ++++++++++++++++++++++++++++++++++++++ tailwind.config.js | 2 +- 3 files changed, 219 insertions(+), 7 deletions(-) diff --git a/cmd/app/main.go b/cmd/app/main.go index 91065a0..c6d9021 100644 --- a/cmd/app/main.go +++ b/cmd/app/main.go @@ -21,13 +21,13 @@ import ( ) //go:embed pages/*.html -var pages embed.FS +var pagesFS embed.FS //go:embed partials/*.html -var partials embed.FS +var partialsFS embed.FS //go:embed public/* -var public embed.FS +var publicFS embed.FS //go:embed sqlc/schema/*.sql var embedMigrations embed.FS @@ -62,11 +62,11 @@ func main() { } queries := sqlcdb.New(db) - templates, err := template.New("").ParseFS(pages, "pages/*.html") + templates, err := template.New("").ParseFS(pagesFS, "pages/*.html") if err != nil { log.Fatal("error parsing templates: ", err) } - templates, err = templates.ParseFS(partials, "partials/*.html") + templates, err = templates.ParseFS(partialsFS, "partials/*.html") if err != nil { log.Fatal("error parsing templates: ", err) } @@ -82,7 +82,7 @@ func main() { r := chi.NewRouter() r.Use(middleware.Logger) - fileServer := http.FileServer(http.FS(public)) + fileServer := http.FileServer(http.FS(publicFS)) r.Handle("/public/*", fileServer) r.HandleFunc("/devreload", handlerDevReload) diff --git a/cmd/app/public/styles.css b/cmd/app/public/styles.css index ffc47f6..e624baf 100644 --- a/cmd/app/public/styles.css +++ b/cmd/app/public/styles.css @@ -729,6 +729,213 @@ select { --tw-backdrop-sepia: ; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.flex { + display: flex; +} + +.hidden { + display: none; +} + +.w-full { + width: 100%; +} + +.max-w-2xl { + max-width: 42rem; +} + +.max-w-xl { + max-width: 36rem; +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-4 { + gap: 1rem; +} + +.gap-8 { + gap: 2rem; +} + +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.overflow-y-auto { + overflow-y: auto; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.border { + border-width: 1px; +} + +.border-gray-500 { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.bg-gray-800 { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +} + +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.p-2 { + padding: 0.5rem; +} + +.p-4 { + padding: 1rem; +} + +.p-6 { + padding: 1.5rem; +} + +.text-center { + text-align: center; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.font-semibold { + font-weight: 600; +} + +.italic { + font-style: italic; +} + +.leading-none { + line-height: 1; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + +.text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.underline { + text-decoration-line: underline; +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .textlink { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); @@ -739,3 +946,8 @@ select { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity)); } + +.hover\:bg-blue-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} diff --git a/tailwind.config.js b/tailwind.config.js index f4f9618..129c754 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,7 @@ /** @type {import('tailwindcss').Config} */ module.exports = { mode: 'jit', - content: ['./partials/*.html', './pages/*.html'], + content: ['./cmd/app/partials/*.html', './cmd/app/pages/*.html'], theme: { extend: {}, },