Switching to a single stylesheet.

Also bumped the bard version.

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