✨feature: Set up Tailwind and automate dev process to watch all files for changes and rebuild as needed

2025-04-20 17:01:14 -05:00
parent 3fe75e9ad5
commit 9957a5c116
24 changed files with 3319 additions and 76 deletions
--- a/.air.toml
+++ b/.air.toml
@@ -0,0 +1,33 @@
+root = "."
+
+[build]
+  cmd = "go run main.go"
+  delay = 1000
+  exclude_dir = ["assets", "tmp", "vendor", "bak", "node_modules", "public"]
+  include_ext = ["go", "md", "html"]
+  kill_delay = "0s"
+  log = "build-errors.log"
+
+[color]
+  app = ""
+  build = "yellow"
+  main = "magenta"
+  runner = "green"
+  watcher = "cyan"
+
+[log]
+  main_only = false
+  silent = false
+  time = false
+
+[misc]
+  clean_on_exit = false
+
+[proxy]
+  app_port = 0
+  enabled = false
+  proxy_port = 0
+
+[screen]
+  clear_on_rebuild = false
+  keep_scroll = true
--- a/content/about.md
+++ b/content/about.md
@@ -4,6 +4,4 @@ description: More About My Go SSG Site.
 date: 2025-04-19
 ---

-# About
-
 Experimenting with Go.  Seems pretty cool so far!
--- a/content/blog/another-blog-post.md
+++ b/content/blog/another-blog-post.md
@@ -7,7 +7,7 @@ categories:
  - anger
 ---

-# Why isn't this working?! 😭
+## Why isn't this working?! 😭

 This is my first Go SSG blog post.

--- a/content/blog/my-first-blog-post.md
+++ b/content/blog/my-first-blog-post.md
@@ -7,7 +7,7 @@ categories:
  - go
 ---

-# *Tap Tap Tap* Is this thing on?
+## *Tap Tap Tap* Is this thing on?

 This is my first Go SSG blog post.

--- a/content/index.md
+++ b/content/index.md
@@ -4,6 +4,4 @@ description: My Go SSG Site.
 date: 2025-04-19
 ---

-# Welcome
-
-This is your first static site built with Go!
+Welcome to my static site built with Go!
--- a/css/base.css
+++ b/css/base.css
@@ -0,0 +1,30 @@
+@import "tailwindcss";
+
+@import './global.css';
+@import './colors.css';
+@import './typography.css';
+@import './prose.css';
+
+/* Import Tailwind typography plugin */
+@plugin "@tailwindcss/typography";
+
+body {
+  @apply bg-background text-text font-sans;
+}
+
+header#site_head {
+  @apply bg-primary text-white flex items-center justify-between;
+  @apply py-4 px-60;
+
+  nav ul {
+    @apply flex space-x-4 justify-end-safe;
+  }
+}
+
+main {
+  @apply prose container mx-auto px-4 py-8 max-w-5xl;
+}
+
+footer#site_foot {
+  @apply bg-secondary text-white text-center;
+}
--- a/css/colors.css
+++ b/css/colors.css
@@ -0,0 +1,38 @@
+/* Theme color definitions */
+
+@theme {
+  --color-black:      oklch(0% 0 0);
+  --color-white:      oklch(100% 0 0);
+
+  --color-background: oklch(89.75% 0 0);
+  --color-text:       oklch(0% 0 0);
+
+  --color-primary:     oklch(60.48% 0.2166 257.2);
+  --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
+  --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
+  --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
+  --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
+  --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
+  --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
+  --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
+  --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
+  --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
+
+  --color-secondary:     oklch(55.75% 0.0165 244.9);
+  --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
+  --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
+  --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
+  --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
+  --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
+  --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
+  --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
+  --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
+  --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
+
+  --color-success: oklch(64.01% 0.1751 146.7);
+  --color-info:    oklch(65.52% 0.1105 212.2);
+  --color-warning: oklch(84.42% 0.1722 84.93);
+  --color-danger:  oklch(59.15% 0.202 21.24);
+  --color-light:   oklch(98.16% 0.0017 247.8);
+  --color-dark:    oklch(34.51% 0.0133 248.2);
+}
--- a/css/global.css
+++ b/css/global.css
@@ -0,0 +1,84 @@
+/* Miscellaneous custom styles */
+@theme {
+  --spacing-menu-top:     calc(100% + .9375rem);
+  --spacing-section:      2rem;
+
+  --shadow-menu-shadow:   0 .25rem .375rem rgba(0,0,0,0.1);
+
+  /** Breakpoints
+   * The breakpoints are set to match the default Tailwind breakpoints.
+   * You can override them here if you want to use different breakpoints.
+   *
+   * @see https://tailwindcss.com/docs/breakpoints
+   */
+  --breakpoint-*:   initial;
+  --breakpoint-xxs: 22.5rem;    /* 360px */
+  --breakpoint-xs:  29.6875rem; /* 475px */
+  --breakpoint-sm:  40rem;      /* 640px */
+  --breakpoint-md:  48rem;      /* 768px */
+  --breakpoint-lg:  64rem;      /* 1024px */
+  --breakpoint-xl:  80rem;      /* 1280px */
+  --breakpoint-2xl: 96rem;      /* 1536px */
+}
+
+/* Basic layout styles */
+body, html {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.section {
+  @apply relative my-section px-section;
+
+  &:first-child {
+    @apply mt-0;
+  }
+
+  &:last-child, p:last-child {
+    @apply mb-0;
+  }
+
+  &.has-background {
+    @apply py-section bg-cover bg-no-repeat;
+  }
+}
+
+/** Allows containers inside containers
+  *
+  * .container .wp-block-section {
+  * @apply mx-break-out;
+  * }
+  */
+
+.content-wrapper {
+  .alignfull {
+    @apply max-w-full;
+  }
+
+  .alignwide {
+    @apply max-w-full;
+  }
+
+  .alignleft {
+    @apply ml-0 mr-auto float-none;
+  }
+
+  .alignright {
+    @apply ml-auto mr-0 float-none;
+  }
+
+  .aligncenter {
+    @apply mx-auto;
+  }
+}
+
+/* Responsive embeds */
+.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
+.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
--- a/css/prose.css
+++ b/css/prose.css
@@ -0,0 +1,36 @@
+/* Theme prose styles */
+
+@theme {
+  --tw-prose-body:                 var(--color-primary);
+  --tw-prose-headings:             var(--color-primary);
+  --tw-prose-lead:                 var(--color-primary);
+  --tw-prose-links:                var(--color-info);
+  --tw-prose-bold:                 var(--color-primary);
+  --tw-prose-counters:             var(--color-primary);
+  --tw-prose-bullets:              var(--color-secondary);
+  --tw-prose-hr:                   var(--color-secondary);
+  --tw-prose-quotes:               var(--color-primary);
+  --tw-prose-quote-borders:        var(--color-primary);
+  --tw-prose-captions:             var(--color-secondary);
+  --tw-prose-code:                 var(--color-primary);
+  --tw-prose-pre-code:             var(--color-primary);
+  --tw-prose-pre-bg:               var(--color-secondary);
+  --tw-prose-th-borders:           var(--color-secondary);
+  --tw-prose-td-borders:           var(--color-secondary);
+  --tw-prose-invert-body:          var(--color-primary);
+  --tw-prose-invert-headings:      var(--color-primary);
+  --tw-prose-invert-lead:          var(--color-primary);
+  --tw-prose-invert-links:         var(--color-secondary);
+  --tw-prose-invert-bold:          var(--color-primary);
+  --tw-prose-invert-counters:      var(--color-primary);
+  --tw-prose-invert-bullets:       var(--color-primary);
+  --tw-prose-invert-hr:            var(--color-secondary);
+  --tw-prose-invert-quotes:        var(--color-primary);
+  --tw-prose-invert-quote-borders: var(--color-primary);
+  --tw-prose-invert-captions:      var(--color-primary);
+  --tw-prose-invert-code:          var(--color-secondary);
+  --tw-prose-invert-pre-code:      var(--color-primary);
+  --tw-prose-invert-pre-bg:        oklch(0% 0 0 / 50%);
+  --tw-prose-invert-th-borders:    var(--color-primary);
+  --tw-prose-invert-td-borders:    var(--color-primary);
+}
--- a/css/typography.css
+++ b/css/typography.css
@@ -0,0 +1,154 @@
+/* Basic typographical styles */
+
+/**
+ * All font sizes are based on 16px base font size and 1920px wide screen
+ * Default size is expressed as percentage of screen width.
+ * text-14px: 12px-27px, default: 14px
+ * text-16px: 14px-28px, default: 16px
+ * text-18px: 14px-30px, default: 18px
+ * text-20px: 16px-32px, default: 20px
+ * text-22px: 17px-33px, default: 22px
+ * text-25px: 18px-35px, default: 25px
+ * text-30px: 19px-37px, default: 30px
+ * text-35px: 20px-40px, default: 35px
+ * text-38px: 22px-48px, default: 38px
+ * text-40px: 24px-56px, default: 40px
+ * text-45px: 25px-64px, default: 45px
+ * text-50px: 27px-72px, default: 50px
+ * text-55px: 28px-76px, default: 55px
+ * text-60px: 30px-80px, default: 60px
+ * text-70px: 30px-76px, default: 70px
+ * text-75px: 32px-80px, default: 75px
+*/
+
+@theme {
+  --font-sans:   "Raleway", sans-serif;
+  --line-height: 1.6;
+
+  --text-base: 1rem;
+  --text-14px: clamp(0.75rem,  0.7292vw, 1.7rem);
+  --text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
+  --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
+  --text-20px: clamp(1rem,     1.0417vw, 2rem);
+  --text-22px: clamp(1.1rem,   1.15vw,   2.1rem);
+  --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
+  --text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
+  --text-35px: clamp(1.25rem,  1.8229vw, 2.5rem);
+  --text-38px: clamp(1.4rem,   1.9791vw, 3rem);
+  --text-40px: clamp(1.5rem,   2.0834vw, 3.5rem);
+  --text-45px: clamp(1.6rem,   2.3438vw, 4rem);
+  --text-50px: clamp(1.7rem,   2.6042vw, 4.5rem);
+  --text-70px: clamp(1.9rem,   3.6458vw, 4.8rem);
+  --text-75px: clamp(2rem,     3.9063vw, 5rem);
+
+  --h1: calc(var(--text-base) * 2.25);
+  --h2: calc(var(--text-base) * 1.75);
+  --h3: calc(var(--text-base) * 1.5);
+  --h4: calc(var(--text-base) * 1.25);
+  --h5: calc(var(--text-base) * 1.125);
+  --h6: calc(var(--text-base) * 1.05);
+}
+
+body {
+  background-color: white;
+  color: black;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--line-height);
+}
+
+::selection { background: var(--color-warning); }
+
+@layer components {
+  h1, h2, h3,
+  h4, h5, h6 {
+    font-weight: 700;
+    margin: 0 0 1rem;
+  }
+
+  h1, .h1 {
+    font-size: var(--h1);
+    line-height: 1.2;
+  }
+
+  h2, .h2 {
+    font-size: var(--h2);
+    line-height: 1.3;
+  }
+
+  h3, .h3 {
+    font-size: var(--h3);
+    line-height: 1.4;
+  }
+
+  h4, .h4 {
+    font-size: var(--h4);
+    line-height: 1.5;
+  }
+
+  h5, .h5 { font-size: var(--h5); }
+
+  h6, .h6 { font-size: var(--h6); }
+}
+
+a, .link {
+  color: var(--color-info);
+  text-decoration: none;
+  transition: color 200ms;
+  cursor: pointer;
+
+  &:hover { color: var(--color-primary); }
+}
+
+h1 a, .h1 a,
+h2 a, .h2 a,
+h3 a, .h3 a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+li ul, li ol { margin: 0 1rem; }
+
+ul { list-style-type: disc; }
+
+ol { list-style-type: decimal; }
+
+ol ol { list-style: lower-alpha; }
+
+ol ol ol { list-style: lower-roman; }
+
+ol ol ol ol { list-style: lower-alpha; }
+
+pre, code,
+samp, style { font-family: monospace; }
+
+pre {
+  font-size: 0.875rem;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+pre code {
+  background-color: inherit;
+  border-radius: 0;
+  color: inherit;
+  padding: 0;
+}
+
+code {
+  @apply bg-black/40 px-[3px] py-[2px] font-mono text-light text-xs rounded-sm;
+}
+
+hr {
+  background-color: black;
+  border: none;
+  display: block;
+  height: 1px;
+  margin: 1rem 0;
+  width: 100%;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "ssg",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "concurrently -k -n TAILWIND,GO,SERVE -c blue,green,magenta \"npm run tailwind\" \"npm run go\" \"npm run serve\"",
+    "tailwind": "npx @tailwindcss/cli -i ./css/base.css -o ./public/assets/style.css --watch",
+    "go": "air",
+    "serve": "live-server public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "concurrently": "^9.1.2",
+    "tailwindcss": "^4.1.4"
+  }
+}
--- a/public/about/index.html
+++ b/public/about/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Go SSG - About</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -26,16 +31,14 @@
  <main>
 <article>
  <h1>Go SSG - About</h1>
-  <h1>About</h1>
-
  <p>Experimenting with Go.  Seems pretty cool so far!</p>

 </article>
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/assets/style.css
+++ b/public/assets/style.css
--- a/public/blog/another-blog-post/index.html
+++ b/public/blog/another-blog-post/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Go SSG - Another Blog Post</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -41,7 +46,7 @@
    </p>
  

-  <h1>Why isn&rsquo;t this working?! 😭</h1>
+  <h2>Why isn&rsquo;t this working?! 😭</h2>

 <p>This is my first Go SSG blog post.</p>

@@ -59,8 +64,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/blog/category/anger/index.html
+++ b/public/blog/category/anger/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Category: Anger</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -33,8 +38,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/blog/category/go/index.html
+++ b/public/blog/category/go/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Category: Go</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -35,8 +40,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/blog/category/progrmming/index.html
+++ b/public/blog/category/progrmming/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Category: Progrmming</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -33,8 +38,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/blog/index.html
+++ b/public/blog/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Blog Index</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -35,8 +40,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/blog/my-first-blog-post/index.html
+++ b/public/blog/my-first-blog-post/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Go SSG - My First Blog Post</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -41,7 +46,7 @@
    </p>
  

-  <h1><em>Tap Tap Tap</em> Is this thing on?</h1>
+  <h2><em>Tap Tap Tap</em> Is this thing on?</h2>

 <p>This is my first Go SSG blog post.</p>

@@ -59,8 +64,8 @@
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/public/index.html
+++ b/public/index.html
@@ -2,21 +2,26 @@

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>Go SSG - Home</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      
-        <li><a href="/about/">About</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/about/">About</a></li>
      
-        <li><a href="/">Index</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/">Index</a></li>
      
-        <li><a href="/blog/">Blog</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="/blog/">Blog</a></li>
      
    </ul>
  </nav>
@@ -26,16 +31,14 @@
  <main>
 <article>
  <h1>Go SSG - Home</h1>
-  <h1>Welcome</h1>
-
-<p>This is your first static site built with Go!</p>
+  <p>Welcome to my static site built with Go!</p>

 </article>
 </main>

  
-<footer>
-  <p>&copy; 2025 Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; 2025 Keith Solomon - Go SSG</p>
 </footer>

 </body>
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,10 +1,13 @@
 {{ define "base" }}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <title>{{ .Title }}</title>
+  <link rel="stylesheet" href="/assets/style.css">
 </head>
+
 <body>
  {{ template "header" . }}

--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,5 +1,5 @@
 {{ define "footer" }}
-<footer>
-  <p>&copy; {{ .Year }} Keith Solomon - Go SSG</p>
+<footer id="site_foot">
+  <p class="p-0 py-4 m-0 leading-none">&copy; {{ .Year }} Keith Solomon - Go SSG</p>
 </footer>
 {{ end }}
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,9 +1,11 @@
 {{ define "header" }}
-<header>
+<header id="site_head">
+  <h1 class="text-white text-40px hover:text-primary-200"><a href="/">Go SSG</a></h1>
+
  <nav>
-    <ul>
+    <ul class="list-none">
      {{ range .Nav }}
-        <li><a href="{{ .URL }}">{{ .Title }}</a></li>
+        <li class="list-none"><a class="text-white hover:text-primary-200" href="{{ .URL }}">{{ .Title }}</a></li>
      {{ end }}
    </ul>
  </nav>