lunasqu.ee-nuxt/assets/styles/components/_blog.scss

.blog {
  --blog-background: #eeeeee;
  --blog-section-title-color: #4f4f4f;
  --blog-text-color: #555555;
  --blog-link-color: #195f7a;
  --blog-sidebar-link-color: #006891;
  --blog-title-color: #000000;

  width: 100%;
  min-height: 100vh;
  background-color: var(--blog-background);

  a {
    color: var(--blog-link-color);
  }

  &__header {
    text-align: center;
    padding: 1rem 0 0;

    a {
      color: #000;
    }
  }

  &__nav {
    margin-bottom: 1rem;

    &-margin {
      margin-left: auto;
    }

    ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      max-width: calc(80rem + 2.4rem);
      padding: 0;
      margin: 0 auto;

      a {
        padding: 1rem 1.2rem;
        color: var(--blog-sidebar-link-color);

        @media all and (max-width: 768px) {
          padding: 0.8rem 1rem;
        }
      }
    }
  }

  &__content {
    display: flex;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;

    @media all and (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }
  }

  &__main-col {
    @media all and (min-width: 768px) {
      width: 70%;
    }

    @media all and (min-width: 1080px) {
      width: 90%;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: auto;
    }
  }

  &-post {
    margin: 50px 0;

    &__title {
      padding: 20px 20px 0 20px;

      h1 {
        font-size: 2rem;
        color: var(--blog-title-color);
      }

      a {
        color: var(--blog-title-color);
      }
    }

    &__content {
      color: var(--blog-text-color);
      padding: 0 20px;

      line-height: 1.5;

      code {
        background: #eee;
        text-shadow: 0 1px #fff;
        padding: 0 0.3em;
      }

      .codeblock {
        background: #2d2d2d;
        padding: 15px 20px;
        margin: 0 -20px;
        border-style: solid;
        border-color: #ddd;
        border-width: 1px 0;
        overflow: auto;
        color: #ccc;
        line-height: 22px;
        width: calc(100% + 40px);

        pre {
          margin: 0;
        }

        code {
          background: transparent;
          text-shadow: none;
          padding: 0;
        }
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        line-height: 1.1em;
        margin: 1.1em 0;
        font-weight: bold;
      }

      p,
      table {
        margin: 1.6em 0;
      }

      h1 {
        font-size: 2em;
      }

      h2 {
        font-size: 1.5em;
      }

      h3 {
        font-size: 1.3em;
      }

      h4 {
        font-size: 1.2em;
      }

      h5 {
        font-size: 1.1em;
      }

      ul,
      ol,
      dl {
        margin: 1.6em 20px;
        line-height: 1.6em;
        padding: 0;
      }
    }

    &__continue {
      margin: 0 0 20px 20px;
      display: inline-block;
      background-color: #efefef;
      padding: 0.5rem 1.5rem;
      border-radius: 8px;
      color: #000 !important;
    }

    &__inner {
      overflow: hidden;
      background-color: #fff;
      box-shadow: 1px 2px 3px #ddd;
    }

    &__meta {
      margin-bottom: 0.6rem;
      margin-left: 5px;
      font-size: 14px;

      a {
        letter-spacing: 2px;
        color: var(--blog-section-title-color);
        line-height: 1em;
        text-shadow: 0 1px #fff;
        font-weight: bold;
      }
    }

    &__footer {
      font-size: 0.85em;
      line-height: 1.6em;
      border-top: 1px solid #ddd;
      padding-top: 1.6em;
      margin: 0 20px 20px;
    }

    &__tags {
      display: flex;
      gap: 1rem;

      .blog-post__tag {
        color: var(--blog-section-title-color);
      }
    }

    &__page {
      display: flex;
      margin-top: 1.2rem;
      justify-content: space-between;

      &-link {
        display: flex;
        flex-direction: column;

        &--newer {
          margin-left: auto;
          text-align: right;
        }

        &:hover {
          text-decoration: none;

          .blog-post__page-name {
            text-decoration: underline;
          }
        }
      }

      &-title {
        color: var(--blog-section-title-color);
        line-height: 1em;
        text-shadow: 0 1px #fff;
        font-weight: bold;
      }
    }
  }

  &__sidebar {
    &-block {
      margin: 50px 0;
    }

    &-title {
      font-size: 0.85em;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--blog-section-title-color);
      margin-bottom: 1em;
      margin-left: 5px;
      line-height: 1em;
      text-shadow: 0 1px #fff;
      font-weight: bold;
    }

    &-content {
      color: #777;
      text-shadow: 0 1px #fff;
      background: #ddd;
      box-shadow: 0 -1px 4px #ccc inset;
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 3px;
      line-height: 1.6em;
      word-wrap: break-word;
      font-size: 0.9em;
    }

    a {
      color: var(--blog-sidebar-link-color);
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .tag-cloud a {
      margin-right: 5px;
      display: inline-block;
    }
  }

  &-archives {
    margin: 50px 0;

    &__year {
      margin-bottom: 1em;
      font-size: 0.85em;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-left: 5px;
      line-height: 1em;

      a {
        color: var(--blog-section-title-color);
        text-shadow: 0 1px #fff;
        font-weight: bold;
      }
    }

    &__posts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;

      @media all and (max-width: 567px) {
        grid-template-columns: 1fr;
      }
    }

    &__time {
      color: var(--blog-section-title-color);
      text-decoration: none;
      font-size: 0.85em;
      line-height: 1em;
      margin-bottom: 0.5em;
      display: block;
    }

    &__post {
      padding: 20px;
      background-color: #fff;
      box-shadow: 1px 2px 3px #ddd;

      header {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
    }
  }
}