tavernworks/bard/assets/css/blog_nav.css

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