diff --git a/readme.md b/readme.md
index 0ca7356..6f941f5 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,7 @@
# GoStart
-This is a basic starter project for building web applications using Go, Tailwind CSS, and htmx. It provides a foundation for creating interactive and responsive web applications without relying on any third-party dependencies, utilizing only the packages included with the Go language by default.
+This is a basic starter project for building web applications using Go, Tailwind CSS, and htmx. It provides a foundation for creating interactive and responsive web applications without relying on any third-party dependencies, utilizing only the packages included with the Go language by default. This module includes a minified version of HTMX and a Custom Tailwind css, so it does not depend on having ANY external programs or CDNs. If you would like to change the default styling of the app beyond the default tailwind components, you will need the standalone Tailwind Executable to rebuild the CSS to your liking.
+-_More information on custom styling can be found in the [Style readme](/web/style/readme.md)_
## Features
@@ -28,15 +29,11 @@ This is a basic starter project for building web applications using Go, Tailwind
```bash
cp config.example.json config.json
```
-4. Rebuild the css styling with tailwind
-```bash
-tailwindcss -i web/style/input.css -o web/static/output.css --watch
-```
-5. Build and run the application:
+4. Build and run the application:
```bash
- go run main.go
+ go run .
```
The application will be accessible at `http://localhost:8787`, or whatever port you set in your configuration.
diff --git a/web/static/tailwind.min.css b/web/static/tailwind.min.css
new file mode 100644
index 0000000..1ce349d
--- /dev/null
+++ b/web/static/tailwind.min.css
@@ -0,0 +1 @@
+/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root{--color-bgPrimary:#101010;--color-bgSecondary:#282828;--color-bgInverted:#e1e1e1;--color-textPrimary:#fff;--color-textSecondary:#ebebeb;--color-textMuted:#c8c8c8;--color-textInverted:#101010}:root[data-theme=light]{--color-bgPrimary:#c8c8c8;--color-bgSecondary:#e6e6e6;--color-bgInverted:#505050;--color-textPrimary:#000;--color-textSecondary:#141414;--color-textMuted:#646464;--color-textInverted:#fff}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.mb-8{margin-bottom:2rem}.mt-8{margin-top:2rem}.block{display:block}.table{display:table}.rounded-md{border-radius:.375rem}.bg-bgPrimary{background-color:var(--color-bgPrimary)}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-bold{font-weight:700}.text-textMuted{color:var(--color-textMuted)}.text-textPrimary{color:var(--color-textPrimary)}.text-textSecondary{color:var(--color-textSecondary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\[a-zA-Z\:\\-\\\.\]{a-z-a--z:\-\.}
\ No newline at end of file
diff --git a/web/style/input.css b/web/style/input.css
index 598cc07..e286950 100644
--- a/web/style/input.css
+++ b/web/style/input.css
@@ -3,3 +3,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ :root {
+ --color-bgPrimary: rgb(16, 16, 16);
+ --color-bgSecondary: rgb(40, 40, 40);
+ --color-bgInverted: rgb(225, 225, 225);
+ --color-textPrimary: rgb(255, 255, 255);
+ --color-textSecondary: rgb(235, 235, 235);
+ --color-textMuted: rgb(200, 200, 200);
+ --color-textInverted: rgb(16, 16, 16);
+ }
+ :root[data-theme="light"] {
+ --color-bgPrimary: rgb(200, 200, 200);
+ --color-bgSecondary: rgb(230, 230, 230);
+ --color-bgInverted: rgb(80, 80, 80);
+ --color-textPrimary: rgb(0, 0, 0);
+ --color-textSecondary: rgb(20, 20, 20);
+ --color-textMuted: rgb(100, 100, 100);
+ --color-textInverted: rgb(255, 255, 255);
+ }
+}
diff --git a/web/style/readme.md b/web/style/readme.md
index b192f8d..7ee29c3 100644
--- a/web/style/readme.md
+++ b/web/style/readme.md
@@ -1,9 +1,25 @@
-# Development
+# Information
-For Tailwind to Rebuild the Output CSS, a watcher must be run to compile the new styling as pages are edited.
+This repository INCLUDES a minified version of the css used to style the web views. If you want to change anything about the configuration or the input, you will need to rebuild the minified tailwindcss by using the [Tailwind standalone CLI Tool](https://github.com/tailwindlabs/tailwindcss/releases).
+
+For Tailwind to Rebuild the CSS, Tailwind must be run to compile the new styling.
To do this run:
```bash
-tailwindcss -i web/style/input.css -o web/static/output.css --watch
+tailwindcss -i /web/style/input.css -o /web/static/tailwind.min.css --minify
```
+
+## Development
+
+You can run a watcher while in development to automatically rebuild the `tailwind.min.css` whenever a file in the project directory is modified.
+
+To do this run:
+
+```bash
+tailwindcss -i /web/style/input.css -o /web/static/tailwind.min.css --watch --minify
+```
+
+### Dark Mode
+
+Yes... This framework is designed with "Dark Mode" as the default theme. As all things should be.
diff --git a/web/style/tailwind.config.js b/web/style/tailwind.config.js
index 439baba..b905a14 100644
--- a/web/style/tailwind.config.js
+++ b/web/style/tailwind.config.js
@@ -3,7 +3,15 @@ module.exports = {
content: ["./**/*.{html,js}"],
theme: {
extend: {
- colors: {},
+ colors: {
+ bgPrimary: "var(--color-bgPrimary)",
+ bgSecondary: "var(--color-bgSecondary)",
+ bgInverted: "var(--color-bgInverted)",
+ textPrimary: "var(--color-textPrimary)",
+ textSecondary: "var(--color-textSecondary)",
+ textMuted: "var(--color-textMuted)",
+ textInverted: "var(--color-textInverted)",
+ },
},
},
plugins: [],
diff --git a/web/views/templates/#layout.html b/web/views/templates/#layout.html
index 884f5d3..3ba84ab 100644
--- a/web/views/templates/#layout.html
+++ b/web/views/templates/#layout.html
@@ -1,18 +1,16 @@
{{define "layout"}}
-
+
GO Web App - {{.Title}}
-
+
-
- {{template "header" .}}
- {{template "view" .}}
- {{template "footer" .}}
+
+ {{template "header" .}} {{template "view" .}} {{template "footer" .}}
{{end}}
diff --git a/web/views/templates/footer.html b/web/views/templates/footer.html
index 0a66b30..ce57334 100644
--- a/web/views/templates/footer.html
+++ b/web/views/templates/footer.html
@@ -1,5 +1,5 @@
{{define "footer"}}
-
- {{end}}
\ No newline at end of file
+
+{{end}}
diff --git a/web/views/templates/header.html b/web/views/templates/header.html
index 91b34c5..7317f16 100644
--- a/web/views/templates/header.html
+++ b/web/views/templates/header.html
@@ -1,7 +1,7 @@
{{define "header"}}
-