<!DOCTYPE html>
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
      .main-screen {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        max-width: 100%;
        padding: 0px 10px;
        gap: 2rem;
      }

      .side-screen {
        height: 100vh;
        overflow-y: hidden;
        width: 400px;
        min-width: 400px;
      }

      .main-content {
        position: relative;
        flex-grow: 2;
        width: 100%;
        max-width: 750px;
      }

      .site-title {
        width: 100%;
        text-align: center;
      }

      .icon-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 2rem;
      }

      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }

      @media (max-width: 1380px) {
        .side-screen {
          display: none;
        }

        .main-screen {
          justify-content: center;
        }
      }
    </style>
</head>

<body>
    <div class="main-screen">
      <div class="side-screen">
        {{ partial "posts-defile.html" (dict "context" . "direction" "up") }}
      </div>
      <div class="main-content">
        <h1 class="site-title">{{ .Title }}</h1>
        {{ .Content }}
        <div class="icon-row">
          <a class="icon-item" href="/blog">
            <img src="/icon_work.webp" alt="Work icon by Shar"></img>
            <span>Blog</span>
          </a>
          <a class="icon-item" href="/recettes">
            <img src="/icon_work.webp" alt="Work icon by Shar"></img>
            <span>Recettes</span>
          </a>
          <a class="icon-item" href="/livres">
            <img src="/icon_work.webp" alt="Work icon by Shar"></img>
            <span>Livres</span>
          </a>
        </div>
      </div>
      <div class="side-screen">
        {{ partial "posts-defile.html" (dict "context" . "direction" "down") }}
      </div>
    </div>
</body>
</html>
