From 3f4440ec2f25e9f5024cf73bf7ada657c651e05a Mon Sep 17 00:00:00 2001
From: Myrddin Dundragon <myrddin@cybermages.tech>
Date: Sat, 27 Sep 2025 13:29:08 -0400
Subject: [PATCH] Switching to a single stylesheet.

Also bumped the bard version.
---
 Cargo.lock                      |   8 +-
 bard/Cargo.toml                 |   2 +-
 bard/assets/css/blog.css        | 175 ++++++++++++++++++++++++
 bard/assets/css/blog_author.css | 230 --------------------------------
 bard/assets/css/blog_list.css   |  27 ----
 bard/assets/css/blog_nav.css    | 117 ----------------
 bard/assets/css/blog_post.css   | 119 -----------------
 bard/assets/css/blog_tag.css    |  54 --------
 8 files changed, 180 insertions(+), 552 deletions(-)
 delete mode 100644 bard/assets/css/blog_author.css
 delete mode 100644 bard/assets/css/blog_list.css
 delete mode 100644 bard/assets/css/blog_nav.css
 delete mode 100644 bard/assets/css/blog_post.css
 delete mode 100644 bard/assets/css/blog_tag.css

diff --git a/Cargo.lock b/Cargo.lock
index 65cda9e..69021ff 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -224,7 +224,7 @@ dependencies = [
 
 [[package]]
 name = "bard"
-version = "0.0.23"
+version = "0.3.1"
 dependencies = [
  "dioxus",
  "tavern",
@@ -263,7 +263,7 @@ dependencies = [
 
 [[package]]
 name = "blog_test"
-version = "0.1.0"
+version = "0.3.0"
 dependencies = [
  "axum",
  "axum-server",
@@ -1941,7 +1941,7 @@ checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
 
 [[package]]
 name = "loreweaver"
-version = "0.1.0"
+version = "0.3.0"
 dependencies = [
  "clap",
  "tavern",
@@ -3104,7 +3104,7 @@ dependencies = [
 
 [[package]]
 name = "tavern"
-version = "0.2.9"
+version = "0.3.0"
 dependencies = [
  "chrono",
  "pulldown-cmark",
diff --git a/bard/Cargo.toml b/bard/Cargo.toml
index 3d96536..58887d8 100644
--- a/bard/Cargo.toml
+++ b/bard/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "bard"
-version = "0.3.0"
+version = "0.3.1"
 edition = "2024"
 description = "Dioxus components that will display a Tavern blogging system Blog."
 repository = "/CyberMages/tavern"
diff --git a/bard/assets/css/blog.css b/bard/assets/css/blog.css
index b4b9bde..a01c3a3 100644
--- a/bard/assets/css/blog.css
+++ b/bard/assets/css/blog.css
@@ -1,3 +1,16 @@
+.visually_hidden
+{
+   position: absolute !important;
+   width: 1px !important;
+   height: 1px !important;
+   padding: 0 !important;
+   margin: -1px !important;
+   overflow: hidden !important;
+   clip: rect(0, 0, 0, 0) !important;
+   border: 0 !important;
+   white-space: nowrap !important;
+}
+
 .blog_style
 {
    display: flex;
@@ -17,3 +30,165 @@
       container-type: inline-size;
    }
 }
+
+
+
+.blog_list
+{
+   order: 5;
+
+   .blog_title
+   {
+      margin-top: 0px;
+   }
+
+   .blog_item
+   {
+      margin-bottom: 30px;
+
+      h2
+      {
+         margin: 0px;
+         color: var(--accent-color);
+      }
+
+      p
+      {
+         margin: 5px 0px 0px 0px;
+         display: block;
+      }
+   }
+}
+
+
+
+.blog_post
+{
+   order: 5;
+
+   h1
+   {
+      margin: 0px;
+      color: var(--accent-color);
+   }
+
+   h4
+   {
+      margin-top: 10px;
+      margin-bottom: 30px;
+   }
+
+   li
+   {
+      margin-bottom: 5px;
+   }
+
+   p
+   {
+      margin-top: 0px;
+      margin-bottom: 20px;
+   }
+
+   .embeded_video
+   {
+      margin-top: 50px;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+
+      iframe
+      {
+         box-shadow: 0 0 80px var(--accent-color);
+      }
+   }
+}
+
+
+
+/* Tags will have a class of "tag_{tag_name}" that allows specific
+ * customization.
+ *
+ * .tag_easy
+ * {
+ *    background-color: #248721;
+ * }
+ *
+ * */
+.blog_tag
+{
+   display: flex;
+   flex-direction: row;
+
+   .tag_list
+   {
+      display: flex;
+      flex-direction: row;
+   }
+}
+
+.blog_nav
+{
+   order: 1;
+   display: flex;
+   flex-direction: column;
+   margin-top: 70px;
+   margin-right: 70px;
+
+   fieldset
+   {
+      border: none;
+      padding: 0;
+      margin: 0;
+      min-inline-size: unset;
+   }
+
+   legend
+   {
+      min-width: 120px;
+      padding: 0;
+      margin: 0;
+   }
+
+   .tag_list
+   {
+      display: flex;
+      flex-direction: column;
+   }
+
+   @container site (max-width: 1230px)
+   {
+      display: none;
+   }
+}
+
+   .tag_list
+   {
+      list-style: none;
+      padding: 0px;
+      margin: 0px;
+
+      .tag_item
+      {
+         margin-top: 5px;
+         margin-right: 5px;
+
+         a
+         {
+            display: block;
+            padding: 0px 4px;
+            text-decoration: none;
+            border: 2px solid var(--text-color);
+            border-radius: 5px;
+
+            color: var(--text-color);
+            transition: 0.1s ease-in;
+
+            &:hover
+            {
+               color: var(--accent-color);
+               border: 2px solid var(--accent-color);
+               transform: translateY(-2px);
+            }
+         }
+      }
+   }
diff --git a/bard/assets/css/blog_author.css b/bard/assets/css/blog_author.css
deleted file mode 100644
index 573a8a5..0000000
--- a/bard/assets/css/blog_author.css
+++ /dev/null
@@ -1,230 +0,0 @@
-.blog_style
-{
-   display: flex;
-   width: 100%;
-   height: 100%;
-   background: var(--bg-color);
-   padding: 50px 0px;
-   justify-content: center;
-   container-name: site;
-   container-type: inline-size;
-
-   .page_content
-   {
-      display: flex;
-      width: 67%;
-      container-name: page;
-      container-type: inline-size;
-   }
-}
-
-
-
-.blog_nav
-{
-   width: 15%;
-   padding: 0px 20px;
-
-   h3
-   {
-      margin-bottom: 10px;
-   }
-
-   ul
-   {
-      list-style: none;
-
-      li
-      {
-      }
-   }
-
-   @container site (max-width: 1230px)
-   {
-      display: none;
-   }
-
-   .social
-   {
-      /* Hide .social until the font is loaded */
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      margin: 25px 0;
-      font-family: cm_social;
-
-      a
-      {
-         color: var(--text-color);
-         font-size: 46px;
-         text-decoration: none;
-         background: transparent;
-         width: 65px;
-         height: 65px;
-         border-radius: 50%;
-         display: flex;
-         align-items: flex-end;
-         justify-content: center;
-         transition: 0.4s ease;
-         border: 4px solid var(--text-color);
-
-         &:hover
-         {
-            color: var(--accent-color);
-            border: 4px solid var(--accent-color);
-            transform: translateY(-7px);
-         }
-      }
-   }
-}
-}
-
-
-
-.blog_item_area
-{
-   .blog_list
-   {
-      list-style: none;
-
-      .blog_item
-      {
-         margin-bottom: 50px;
-
-         h1
-         {
-            color: var(--accent-color);
-         }
-
-         h4
-         {
-            margin: 10px 0px;
-         }
-
-         p
-         {
-            display: block;
-         }
-      }
-   }
-}
-
-
-
-.blog_article
-{
-   h1
-   {
-      color: var(--accent-color);
-   }
-
-   h4
-   {
-      margin-top: 10px;
-      margin-bottom: 30px;
-   }
-
-   p
-   {
-      margin-bottom: 20px;
-   }
-
-   .embeded_video
-   {
-      margin-top: 50px;
-      display: flex;
-      align-content: center;
-      justify-content: center;
-
-      iframe
-      {
-         box-shadow: 0 0 80px var(--accent-color);
-      }
-   }
-}
-
-
-
-.tag_style
-{
-   display: block;
-
-   .tag_list
-   {
-      list-style: none;
-
-      .tag_item
-      {
-         display: inline-block;
-         margin: 5px 5px 0px 0px;
-
-         a
-         {
-            display: block;
-            padding: 0px 4px;
-            text-decoration: none;
-            border: 2px solid var(--text-color);
-            border-radius: 5px;
-
-            color: var(--text-color);
-            transition: 0.1s ease-in;
-
-            &:hover
-            {
-               color: var(--accent-color);
-               border: 2px solid var(--accent-color);
-               transform: translateY(-2px);
-            }
-         }
-      }
-   }
-}
-
-
-
-.easy
-{
-   background-color: #248721;
-}
-
-.medium
-{
-   background-color: #d6a318;
-}
-
-.hard
-{
-   background-color: #d92121;
-}
-
-
-
-.social
-{
-   background: transparent;
-   font-family: cm_social;
-   margin: 15px 0px;
-
-   a
-   {
-      color: var(--text-color);
-      font-size: 30px;
-      text-decoration: none;
-      background: transparent;
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      transition: 0.4s ease;
-      border: 4px solid var(--text-color);
-
-      &:hover
-      {
-         color: var(--accent-color);
-         border: 4px solid var(--accent-color);
-         transform: translateY(-7px);
-      }
-   }
-}
diff --git a/bard/assets/css/blog_list.css b/bard/assets/css/blog_list.css
deleted file mode 100644
index c7a3af5..0000000
--- a/bard/assets/css/blog_list.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.blog_list_style
-{
-   .blog_list
-   {
-      list-style: none;
-
-      .blog_item
-      {
-         margin-bottom: 50px;
-
-         h1
-         {
-            color: var(--accent-color);
-         }
-
-         h4
-         {
-            margin: 10px 0px;
-         }
-
-         p
-         {
-            display: block;
-         }
-      }
-   }
-}
diff --git a/bard/assets/css/blog_nav.css b/bard/assets/css/blog_nav.css
deleted file mode 100644
index 5b9bd02..0000000
--- a/bard/assets/css/blog_nav.css
+++ /dev/null
@@ -1,117 +0,0 @@
-.blog_style
-{
-   display: flex;
-   width: 100%;
-   height: 100%;
-   background: var(--bg-color);
-   padding: 50px 0px;
-   justify-content: center;
-   container-name: site;
-   container-type: inline-size;
-
-   .page_content
-   {
-      display: flex;
-      width: 67%;
-      container-name: page;
-      container-type: inline-size;
-   }
-}
-
-
-
-.blog_nav_style
-{
-   width: 15%;
-   padding: 0px 20px;
-   order: 5;
-
-   h3
-   {
-      margin-bottom: 10px;
-   }
-
-   ul
-   {
-      list-style: none;
-
-      li
-      {
-      }
-   }
-
-   @container site (max-width: 1230px)
-   {
-      display: none;
-   }
-
-   .social
-   {
-      /* Hide .social until the font is loaded */
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      margin: 25px 0;
-      font-family: cm_social;
-
-      a
-      {
-         color: var(--text-color);
-         font-size: 22px;
-         text-decoration: none;
-         background: transparent;
-         width: 35px;
-         height: 35px;
-         border-radius: 50%;
-         display: flex;
-         align-items: flex-end;
-         justify-content: center;
-         transition: 0.4s ease;
-         border: 4px solid var(--text-color);
-
-         &:hover
-         {
-            color: var(--accent-color);
-            border: 4px solid var(--accent-color);
-            transform: translateY(-7px);
-         }
-      }
-   }
-
-.tag_style
-{
-   display: block;
-
-   .tag_list
-   {
-      display: inline-flex;
-      flex-direction: column;
-      list-style: none;
-
-      .tag_item
-      {
-         display: inline-block;
-         margin: 5px 5px 0px 0px;
-
-         a
-         {
-            display: inline-flex;
-            padding: 0px 4px;
-            text-decoration: none;
-            border: 2px solid var(--text-color);
-            border-radius: 5px;
-
-            color: var(--text-color);
-            transition: 0.1s ease-in;
-
-            &:hover
-            {
-               color: var(--accent-color);
-               border: 2px solid var(--accent-color);
-               transform: translateY(-2px);
-            }
-         }
-      }
-   }
-}
-}
diff --git a/bard/assets/css/blog_post.css b/bard/assets/css/blog_post.css
deleted file mode 100644
index 3f28a14..0000000
--- a/bard/assets/css/blog_post.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.blog_post_style
-{
-   order: 1;
-
-   h1
-   {
-      color: var(--accent-color);
-   }
-
-   h4
-   {
-      margin-top: 10px;
-      margin-bottom: 30px;
-   }
-
-   p
-   {
-      margin-bottom: 20px;
-   }
-
-   .embeded_video
-   {
-      margin-top: 50px;
-      display: flex;
-      align-content: center;
-      justify-content: center;
-
-      iframe
-      {
-         box-shadow: 0 0 80px var(--accent-color);
-      }
-   }
-}
-
-
-
-.tag_style
-{
-   display: block;
-
-   .tag_list
-   {
-      list-style: none;
-
-      .tag_item
-      {
-         display: inline-block;
-         margin: 5px 5px 0px 0px;
-
-         a
-         {
-            display: block;
-            padding: 0px 4px;
-            text-decoration: none;
-            border: 2px solid var(--text-color);
-            border-radius: 5px;
-
-            color: var(--text-color);
-            transition: 0.1s ease-in;
-
-            &:hover
-            {
-               color: var(--accent-color);
-               border: 2px solid var(--accent-color);
-               transform: translateY(-2px);
-            }
-         }
-      }
-   }
-}
-
-
-
-.easy
-{
-   background-color: #248721;
-}
-
-.medium
-{
-   background-color: #d6a318;
-}
-
-.hard
-{
-   background-color: #d92121;
-}
-
-
-
-.social
-{
-   background: transparent;
-   font-family: cm_social;
-   margin: 15px 0px;
-
-   a
-   {
-      color: var(--text-color);
-      font-size: 30px;
-      text-decoration: none;
-      background: transparent;
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      transition: 0.4s ease;
-      border: 4px solid var(--text-color);
-
-      &:hover
-      {
-         color: var(--accent-color);
-         border: 4px solid var(--accent-color);
-         transform: translateY(-7px);
-      }
-   }
-}
diff --git a/bard/assets/css/blog_tag.css b/bard/assets/css/blog_tag.css
deleted file mode 100644
index 1f12a6d..0000000
--- a/bard/assets/css/blog_tag.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.blog_tag_style
-{
-   display: block;
-
-   .tag_list
-   {
-      list-style: none;
-
-      .tag_item
-      {
-         display: inline-block;
-         margin: 5px 5px 0px 0px;
-
-         a
-         {
-            display: block;
-            padding: 0px 4px;
-            text-decoration: none;
-            border: 2px solid var(--text-color);
-            border-radius: 5px;
-
-            color: var(--text-color);
-            transition: 0.1s ease-in;
-
-            &:hover
-            {
-               color: var(--accent-color);
-               border: 2px solid var(--accent-color);
-               transform: translateY(-2px);
-            }
-         }
-      }
-   }
-
-   .none
-   {
-      background-color: var(--bg-color);
-   }
-
-   .easy
-   {
-      background-color: #248721;
-   }
-
-   .medium
-   {
-      background-color: #d6a318;
-   }
-
-   .hard
-   {
-      background-color: #d92121;
-   }
-}