styling improved and removed dependacy for tailwind out the box

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.

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);
+  }
+}

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.

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: [],

web/views/templates/#layout.html

@@ -1,18 +1,16 @@
 {{define "layout"}}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GO Web App - {{.Title}}</title>
-    <link rel="stylesheet" href="/static/output.css" />
     <link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
+    <link href="/static/tailwind.min.css" rel="stylesheet" />
     <script src="/static/htmx.min.js"></script>
   </head>
-  <body class="text-center text-blue-300 bg-gray-800">
+  <body class="font-mono text-center text-textPrimary bg-bgPrimary">
-    {{template "header" .}}
+    {{template "header" .}} {{template "view" .}} {{template "footer" .}}
-    {{template "view" .}}
-    {{template "footer" .}}
   </body>
 </html>
 {{end}}

web/views/templates/footer.html

@@ -1,5 +1,5 @@
 {{define "footer"}}
-<footer>
+<footer class="text-textMuted">
-    <p>&copy; 2024 My Web App</p>
+  <p>&copy; 2024 My Web App</p>
-  </footer>
+</footer>
-  {{end}}
+{{end}}

web/views/templates/header.html

@@ -1,7 +1,7 @@
 {{define "header"}}
 <header>
-    <h1 class="mt-8 mb-8 text-3xl font-bold text-blue-400">
+  <h1 class="mt-8 mb-8 text-3xl font-bold text-textSecondary">
-      Welcome to My GO Web App Framework {{.Title}}
+    Welcome to My GO Web App Framework {{.Title}}
-    </h1>
+  </h1>
-  </header>
+</header>
-  {{end}}
+{{end}}