tavernworks/bard/assets/css/blog.css

.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;
   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_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);
            }
         }
      }
   }