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
{
   display: flex;
   flex-direction: column;
   width: 100%;
   order: 5;

   .blog_title
   {
      margin-top: 0px;
      color: var(--accent-color);
   }

   .blog_title_image
   {
      width: 23rem;
      align-self: center;
      margin-bottom: 25px;
   }

   .blog_item
   {
      margin-bottom: 30px;

      h2
      {
         margin: 0px;
         color: var(--accent-color);

         a:link, a:visited
         {
            color: var(--accent-color);
         }

         a:hover
         {
            color: var(--text-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;
   }

   .blog_post_tale
   {
      pre
      {
         padding-left: 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: 185px;
   margin-right: 70px;
   position:sticky;
   top: 150px;
   height: 50vh;

   fieldset
   {
      border: none;
      padding: 0;
      margin: 0;
      min-inline-size: unset;
   }

   legend
   {
      min-width: 130px;
      padding: 0;
      margin: 0;
      font-weight: bold;
   }

   .tag_list
   {
      display: flex;
      flex-direction: column;
   }

.toggle_button {
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
  padding: 0px 6px;
  border: 2px solid var(--text-color);
  border-radius: 5px;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  transition: 0.1s ease-in;
}

.toggle_button:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.toggle_button input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Checked state using :has() — modern browsers only */
.toggle_button:has(input:checked) {
  color: var(--accent-color);
  border-color: var(--accent-color);
}


   @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: inline-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);
         }
      }
   }
}