natenom-websites/scss/import/blog.scss

// :root

:root {
  --branding--title--text-transform: initial !important;
  --global--color-background: #{$white} !important;
  --global--color-dark-gray: #{$blog_body-bg} !important;
  //--global--color-primary: var(--global--color-white) !important;
  --global--font-size-page-title: 39px !important;
  --global--font-size-xl: 30px !important;
  --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 600px) !important;
}

// general

body {
  #page {
    header#masthead {
      padding-top: var(--global--spacing-vertical);
      padding-bottom: var(--global--spacing-vertical);
      row-gap: 10px;
      .site-logo {
        border: 0;
        width: unset;
        margin: unset;
        padding: 0;
        margin-right: 20px;
        img.custom-logo {
          max-width: 32px;
        }
      }
      .site-branding {
        .site-description {
          font-size: .6em;
          font-style: italic;
        }
      }
      nav#site-navigation {
        .primary-menu-container {
          ul#primary-menu-list {
            .menu-item {
              a {
                text-decoration-style: solid;
                text-decoration: underline;
                &:hover {
                  text-decoration-style: dotted;
                }
                p.menu-item-description {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    aside.widget-area {
      margin-top: calc(2 * var(--global--spacing-vertical));
    }
    footer {
      .site-info {
        display: none;
      }
    }
  }
}
@media (max-width: 481px) {
  body {
    #page {
      header#masthead {
        nav#site-navigation {
          top: 32px;
        }
      }
    }
  }
}
@media (min-width: 482px) {
  body {
    #page {
      header#masthead {
        .site-branding {
          display: grid;
          grid-gap: 20px;
          grid-template-columns: auto auto;
          .site-description {
            margin: auto;
          }
        }
      }
    }
  }
}
body:not(.is-dark-theme) {
  #page {
    header#masthead {
      .site-logo {
        filter: invert(80%);
      }
    }
  }
}

// post preview

body {
  &.home,
  &.tag,
  &.category,
  &.search {
    #page {
      #content {
        #primary {
          #main {
            article.post {
              header.entry-header {
                figure.post-thumbnail {
                  max-width: calc(.5 * var(--responsive--alignwide-width));
                  a.post-thumbnail-inner {
                    img.attachment-post-thumbnail {
                      margin-top: 40px;
                    }
                  }
                }
                h2.entry-title {
                  line-height: 42px;
                  max-width: var(--responsive--alignfull-width);
                  text-align: center;
                  width: var(--responsive--alignwide-width);
                  a {
                    font-size: 39px;
                  }
                }
              }
              .entry-content {
                h2 {
                  font-size: 30px;
                  line-height: 35px;
                }
                a.more-link {
                  background: var(--button--color-background);
                  border: var(--button--border-width) solid var(--button--color-background);
                  color: var(--button--color-text);
                  font-weight: var(--button--font-weight);
                  padding: 10px 40px;
                  text-decoration: none;
                  &:hover {
                    background: transparent;
                    color: var(--button--color-text-hover);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// tag / category / search header

body {
  &.tag,
  &.category,
  &.search {
    #page {
      #content {
        #primary {
          #main {
            header.page-header {
              border-bottom: 3px solid $nom-blue;
              h1 {
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
}

// search

body.search {
  #page {
    #content {
      #primary {
        #main {
          article.post {
            .entry-content {
              a.more-link {
                float: left;
                padding: 5.5px 40px;
                margin-top: 30px;
              }
            }
          }
        }
      }
    }
  }
}

// post

body {
  &.post-template-cover,
  &.single-post {
    #page {
      #content {
        #primary {
          #main {
            article.post {
              header.entry-header {
                h1.entry-title {
                  font-size: 39px;
                  font-weight: 400;
                  line-height: 42px;
                  margin-bottom: -20px;
                  text-align: center;
                  text-decoration: none;
                }
              }
              .entry-content {
                p.has-drop-cap::first-letter {
                  font-size: 7.2rem;
                }
                figure {
                  figcaption {
                    color: var(--global--color-primary);
                  }
                }
                .wp-block-quote {
                  border-left: 3px solid $nom-blue;
                  &::before {
                    content: "";
                  }
                  cite {
                    color: var(--global--color-primary);
                  }
                  p {
                    font-weight: normal;
                    font-style: italic;
                  }
                }
                .wp-block-image {
                  margin-top: inherit;
                  margin-bottom: inherit;
                }
                .yarpp-related {
                  margin: 3em auto 0 auto !important;
                  ol {
                    color: rgb(155, 155, 170);
                    list-style: none;
                    margin: 0;
                    padding-left: 0;
                    li {
                      margin: 15px 0;
                      a {
                        font-weight: normal !important;
                        text-decoration: underline;
                        &:hover {
                          text-decoration-style: dotted;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


// lightbox plugin

#slb_viewer_wrap {
  #slb_viewer_slb_default {
    .slb_viewer_layout {
      .slb_container {
        padding: 0 !important; // kein Rand
        box-shadow: none !important; // kein »glow« bzw. Schatten
        .slb_details {
          .inner {
            .slb_data {
              background: var(--global--color-background);
              .slb_data_content {
                display: grid;
                grid-template-areas: "title status" "desc  desc";
                margin: 10px;
                .slb_data_title {
                  color: var(--global--color-primary);
                  font-family: var(--global--font-primary);
                  font-size: var(--global--font-size-xs);
                  font-weight: 500;
                  grid-area: title;
                  letter-spacing: 0;
                  margin: 0;
                }
                .slb_group_status {
                  color: var(--global--color-primary);
                  font-family: var(--global--font-primary);
                  font-size: var(--global--font-size-xss);
                  font-style: unset;
                  grid-area: status;
                  margin: auto 0;
                  text-align: center;
                }
                .slb_data_desc {
                  color: var(--global--color-primary);
                  font-family: var(--global--font-primary);
                  font-size: var(--global--font-size-xss);
                  grid-area: desc;
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}