natenom-websites/scss/import/blog.scss

//
// main
//

body {
  position: relative;
  top: 32px !important; // WordPress nach unten verlegen, damit Topbar besser wird
  h1,
  h2 {
    font-size: 3rem !important; // smaller
  }
  h3 {
    font-size: 2.5rem !important; // smaller
  }
  h4 {
    font-size: 2rem !important; // smaller
  }
  h5 {
    font-size: 1.5rem !important; // smaller
  }
  header {
    .header-inner {
      .header-navigation-wrapper {
        nav.primary-menu-wrapper {
          ul.primary-menu {
            li.menu-item {
              a {
                color: $blau-light !important;
              }
            }
          }
        }
      }
    }
    .search-modal {
      top: 32px; // Suchleiste nach unten versetzen, damit sie unter der Topbar angezeigt werden
    }
  }
  .menu-modal {
    top: 32px; // Menu oben nach unten versetzen, damit sie unter der Topbar angezeigt werden
    .menu-modal-inner {
      .menu-wrapper {
        .menu-top, 
        .menu-bottom {
          nav.expanded-menu {
            ul.modal-menu {
              li.menu-item {
                .ancestor-wrapper {
                  a {
                    color: $blau-light !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  main {
    article {
      header.entry-header {
        padding-bottom: 40px; // Abstand zw. Artikelbildern und Überschrit verkleinern
        .entry-header-inner {
          .entry-categories {
            .entry-categories-inner {
              a {
                color: $blau-light;
              }
            }
          }
          .post-meta-wrapper {
            ul.post-meta {
              li.post-author {
                display: none; // Autor im Beitragsheader ausblenden
              }
            }
          }
        }
      }
      .featured-media {
        margin-top: 0;
        .featured-media-inner {
          .wp-caption-text {
            display: none; // Bildbeschreibungen nur unter Artikelbildern werden ausgeblendet
          }
        }
      }
      .post-inner {
        padding-top: 40px; // Abstand zw. Artikelbildern und Inhalt verkleinern
        .entry-content {
          a {
            color: $blau-light !important;
          }
          .wp-block-quote {
            border-color: $blau-light;
          }
          .read-more-button-wrap {
            a.more-link {
              .faux-button { // Button: "Weiterlesen"
                background: $blau;
                color: rgb(245, 245, 255);
                font-weight: initial;
                padding: 10px 40px; // Groesse aendern
                text-transform: none; // nicht unterstrichen
                transition: background .2s;
                &:hover {
                  text-decoration: none;
                  background: $blau-dark;
                }
              }
            }
          }
        }
      }
    }
    .pagination-wrapper {
      nav.pagination {
        .nav-links {
          a {
            color: $blau-light;
          }
        }
      }
    }
  }
  .footer-nav-widgets-wrapper {
    .footer-inner {
      .footer-menu-wrapper {
        .footer-menu {
          .menu-item {
            a {
              color: $blau-light !important;
            }
          }
        }
      }
      .footer-widgets-outer-wrapper {
        .footer-widgets-wrapper {
          .footer-widgets {
            .widget.widget_tag_cloud {
              .widget-content {
                .tagcloud {
                  a.tag-cloud-link {
                    color: $grau !important;
                  }
                }
              }
            }
            .widget_nav_menu {
              .widget-content {
                .menu-datenschutz-impressum-faq-container {
                  .menu {
                    .menu-item {
                      a {
                        color: $blau-light !important;
                      }
                    }
                  }
                }
              }
            }
            .widget_archive {
              .widget-content {
                select {
                  background: rgb(58, 66, 89);
                  border: 0;
                  color: rgb(245, 245, 255);
                  padding: 5px 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

//
// article / post
//

body.post-template, 
body.post-template-default {
  main {
    article.post {
      .post-inner {
        .entry-content {
          .yarpp-related {
            margin: 3em auto 0 auto !important;
            ol {
              color: rgb(155, 155, 170);
              list-style: none;
              margin: 0;
              li {
                border-bottom: 1px solid rgb(53, 59, 68);
                margin: 15px 0;
                a {
                  font-weight: normal !important;
                }
              }
            }
          }
        }
        .post-meta-wrapper {
          .post-meta {
            .post-tags {
              .meta-text {
                color: $grau !important;
              }
            }
          }
        }
      }
      .pagination-single {
        .pagination-single-inner {
          .previous-post, 
          .next-post {
            color: $blau-light !important;
          }
        }
      }
      .comments-wrapper {
        .comments {
          .comments-inner {
            article.comment-body {
              footer.comment-footer-meta {
                .comment-reply {
                  a.comment-reply-link { // Button: "Kommentieren"
                    background: $blau ;
                    color: rgb(245, 245, 255);
                    font-weight: initial;
                    text-transform: none;
                    transition: background .2s;
                    &:hover {
                      background: $blau-dark;
                      text-decoration: none;
                    }
                  }
                }
              }
            }
          }
        }
        .comment-respond {
          .section-inner {
            .comment-form-comment {
              textarea#comment {
                background: rgb(37, 45, 57);
                border: 0;
                color: rgb(255, 255, 255);
              }
            }
            .comment-form-author, 
            .comment-form-email, 
            .comment-form-url {
              input {
                &#author,
                &#email,
                &#url {
                  background: rgb(37, 45, 57);
                  border: 0;
                  color: rgb(255, 255, 255);
                }
              }
            }
            .form-submit {
              .submit { // Button "Kommentar abschicken"
                background: $blau;
                color: rgb(245, 245, 255);
                font-weight: initial;
                padding: 10px 40px; // Groesse aendern
                text-transform: none; // nicht unterstrichen
                transition: background .2s;
                &:hover {
                  background: $blau-dark;
                  text-decoration: none;
                }
              } 
            }
          }
        }
      }
    }
  }
}

//
// article / post: cover template
//

body.post-template.template-cover {
  header {
    .header-inner {
      .header-navigation-wrapper {
        nav.primary-menu-wrapper {
          ul.primary-menu {
            li.menu-item {
              a {
                color: rgb(255, 255, 255) !important;
              }
            }
          }
        }
      }
    }
  }
  main {
    article.post {
      .cover-header {
        background-position: center -182.5px;
        .cover-header-inner-wrapper {
          min-height: 60vh; // Cover Hoehe bei Cover Template nur noch 6/10 statt 10/10
          .cover-header-inner {
            .cover-color-overlay {
              color: rgb(37, 45, 57); // Cover-Farbe (falls kein Hex-Code angegeben werden kann)
            }
            header.entry-header {
              .entry-header-inner {
                .entry-categories {
                  .entry-categories-inner {
                    a {
                      color: rgb(255, 255, 255);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

//
// page (e.g. https://blog.natenom.com/natenom/)
//

body.page-template {
  main {
    article.page {
      .post-inner {
      }
    }
  }
}

//
// category (e.g. https://blog.natenom.com/category/allgemein/)
//

body.category {
  main {
    article.post {
      .featured-media {
      }
    }
  }
}

//
// tag (e.g. https://blog.natenom.com/tag/fahrrad/)
//

body.tag {
  main {
    article.post {
      .featured-media {
      }
    }
  }
}

//
// tag (e.g. https://blog.natenom.com/2020/08/)
//

body.archive {
  main {
    header.archive-header {
      .archive-header-inner {
        h1.archive-title {
          .color-accent {
            color: rgb(255, 255, 255);
          }
        }
      }
    }
  }
}

//
// 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 {
              .slb_data_content {
                .slb_data_title {
                  margin: 10px 20px 5px 20px; // gleichmaessiger Rand
                }
              }
            }
          }
        }
      }
    }
  }
}