Adding components and assets.

Commiting to try the library with the target dioxus project.

bard/assets/css/blog_post.css

@@ -0,0 +1,117 @@
+.blog_post_style
+{
+   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);
+      }
+   }
+}