arc-hive-wordpress-theme/dist/assets/scss/modules/_content.scss

// general styles
//----------------
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h4,.h5,.h6,
button,.button,
header nav,


h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
  font-variant:all-small-caps;
  a {
    color: $body-font-color;
  }
}
.excerpt,.post-excerpt{
  a {
    color: $body-font-color;
    &:hover {
      p {
        color: $anchor-color;
      }
    }
  }
}

//
// main block
//--------------


main {
  article {
    @include xy-grid;
    header {
      @include xy-cell(12);
      .entry-title {
        width: 100%;
        text-align: center;
      }
    }
    .entry-content {
      @include breakpoint(small){
        @include xy-cell(12);
        padding: $global-padding*2 ;
        margin:0 auto;
      }
      @include breakpoint(medium){
        @include xy-cell(12);
        padding: $global-padding*2 $global-padding*3;
        max-width: 50rem;
        margin:0 auto;
      }
      @include breakpoint(xlarge){
        @include xy-cell(12);
        max-width: 50rem;
        padding: $global-padding*2 $global-padding*3;
        font-size: $global-font-size*1.2;
        margin: 0 auto;
      }
    }
  }
}


//
// category view, news,  search results
//--------------

.category-posts,.archive-posts,.search-results-content {
  @include xy-grid;
  header {
    @include breakpoint(small){
      @include xy-cell(12);
      @include flex;
      @include flex-align(center,top);
      flex-direction: column;
      align-items: center;
      padding-top: $global-padding*3;
    }
    @include breakpoint(medium){
    }
  }
  main,aside {
    @include breakpoint(small){
      @include xy-cell(12);
      @include flex;
      @include flex-align(center,top);
      padding-top: $global-padding*3;
    }
    @include breakpoint(medium){
    }
  }
  main {
    @include xy-grid;
    article{
      text-align:center;
      @include card-container();
      @include breakpoint(small){
        @include xy-cell(12);
      }
      @include breakpoint(medium){
        @include xy-cell(6);
      }
      @include breakpoint(large){
        @include xy-cell(4);
      }
      figure {
        @include breakpoint(small){
          @include xy-cell(12);
          height: 58vw;
          max-width: 100%;
          overflow: hidden;
          background-image: url('../img/ARC-HIVE-logo.svg');
          background-color: rgb(240,240,240);
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        @include breakpoint(medium){
          height: 28vw;
        }
        @include breakpoint(large){
          height: 20vw;
        }
      }
      .date {
        height: 1rem;
        padding-top: $global-padding*2;
      }
      .entry-title {
        padding-top: $global-padding*2;
        line-height: 0.7;
        font-size: $global-font-size*1.5;
      }
    }
  }
  aside {
    @include breakpoint(small){
      padding-top:0;
      padding-bottom: $global-padding*3;
    }
    @include breakpoint(medium){
      padding-top: $global-padding*3;
      padding-bottom: 0;

    }
  }
  &.resources {
    @include xy-grid;
    header,main,aside {
    }
    main {
      article{
        @include breakpoint(small){
          @include xy-cell(12);
        }
        @include breakpoint(medium){
          @include xy-cell(1 of 3);
        }
        @include breakpoint(large){
          @include xy-cell(1 of 5);
        }
      }
      figure {
        @include breakpoint(small){
        }
        @include breakpoint(medium){
          height: 18vw;
        }
        @include breakpoint(large){
          height: 10vw;
        }
      }
    }
  }
}
.search-results {
  article {
    main {
      .search-results-content {
        h1,h2,h3,h4,h5,h6 {
          display: block;
        }
      }
    }
  }
}
// end category view, news,  search results


//
// collections category
//--------------

.collections-list {
  @include xy-grid;
  header,main,aside {
    @include xy-cell(12);
    @include flex;
    @include flex-align(center,top);
    padding: $global-padding*3 0;
  }
  header {
    border-top: 1px solid $body-font-color;
    padding: $global-padding*4 0;
  }
  main {
    @include xy-grid;
    article{
      text-align:center;
      @include card-container();
      @include breakpoint(small){
        @include xy-cell();
      }
      @include breakpoint(medium){
      }
      @include breakpoint(large){
      }
    }
  }
  aside {
  }
}
// end collections category

//
// partners
//---------------------

.partners {
  .entry-content {
    max-width: unset;
    p {
      padding-left: 30vw;
      padding-bottom: 2rem;
      margin-bottom: 2rem;
      &:after {
        content: '';
        display: inline-block;
        border-bottom: 1px solid $body-font-color;
        width: 100vw;
        position: absolute;
        left: 0;
        padding-top: 2rem;
      }
    }
    .alignleft {
      margin: 0;
      padding: 0;
    }
    .wp-block-image {
      margin: 0;
    }
  }
}

//
// hero
// for big announcemnts
//---------------------


.hero {
  .slides {
    @include xy-grid();
    border-top: 2px solid $primary-color;
    .slide {
      @include xy-grid;
      &.widget {
        display: flex;
        align-content: center;
        justify-content: center;
      }
      @include breakpoint(small){
        width: 100vw;
        margin: 0;
        &.widget_text p,.textwidget {
          padding: $global-padding * 2;
        }
        &.widget_media_image {
          overflow: hidden;
          img {
            width:100%;
          }
        }
      }
      @include breakpoint(medium){
        &.widget_text p,.textwidget {
          max-width: 50rem;
          margin:auto;
          padding: $global-padding * 2;
        }
      }
      @include breakpoint(large){
        width: 50%;
        padding: 0;
        margin: 0;
        overflow:hidden;
        a {
          @include flex;
          @include flex-align (center,middle);
        }
        &.widget_text p,.textwidget {
          font-size: $global-font-size*1.1;
          padding: $global-padding * 2;
        }
      }
      @include breakpoint(xlarge){
        &.widget_text p,.textwidget {
          font-size: $global-font-size*1.15;
          padding: $global-padding*3;
        }
      }
      @include breakpoint(xxlarge){
        &.widget_text p,.textwidget {
          font-size: $global-font-size*1.3;
          padding: $global-padding*3;
        }
      }
      color: $white;

      .logo {
        @include breakpoint(medium){
          max-width: 80%;
        }
      }
    }
    &.primary{
      .slide:nth-child(odd) {
        background-color: $primary-color;
        font-variant: all-small-caps;
        * {
          color: $white;
        }
      }
    }
    &.secondary {
      .slide,.slide:nth-child(odd) {
        background-color: $white;
      }
    }
    &.announcement {
      .slide {
        width: 100%;
      }
    }
    &.announcement.middle {
      border-top: none;
      margin-top: $global-margin*2;
      display: flex;
      align-content: center;
      justify-content: center;
      .widget_nav_menu,.widget_tag_cloud {
        width: auto;
        overflow: visible;
      }
      .widget_tag_cloud {
        position: relative;
        overflow: visible;
        margin-left: $global-margin;
        $tags-background-color: scale-color($anchor-color, $lightness: 95%);
        a {
          display: inline;
          color: $black;
          &:before, &:after {
            display: inline-block;
          }
        }
        h6 {
          visibility: hidden;
          opacity: 0;
          width: 0;
          height: 0;
        }
        &:before {
          content: '#tags';
          color: $primary-color;
          background-color:  $tags-background-color;
          padding:$global-padding/4 $global-padding/2;
        }
        &:hover{
          .tagcloud {
            top: 0;
            visibility: visible;
            opacity: 1;
            transform: translateY(0px);
          }
        }
        .tagcloud {
          position: absolute;
          visibility:hidden;
          opacity:0;
          transition: transform 0.5s;
          transform: translateY(-$global-padding);
          padding: $global-padding*3;
          height:0;
          width:50vw;
          a {
            display: inline-block;
            background-color: $tags-background-color;
            padding:$global-padding/4 $global-padding/2;
            &:before {
              content: '#';
              display: inline-block;
            }
            &:hover {
              color: $anchor-color;
            }
          }
        }
      }
    }
    &.top.secondary {
      align-content: center;
      justify-content: center;
      ul {
        margin: 2rem 0;
      }
    }
  }
  aside {
    @include xy-grid();
    // background-color: $secondary-color;
    .slides {
      width: 100%;
      .slide {
        width: 100%;
        // &:nth-child(odd) {
        //   background-color: $secondary-color;
        // }
      }
    }
    nav {
      @include xy-cell(auto);
      @include flex;
      @include flex-align(spaced,middle);
      min-height: 6rem;
      padding: $global-padding 0 ;
      a {
        color: $body-font-color;
      }
      .button {
        justify-content:center;
      }
    }
  }
&.hero-main {
  aside {
    background-color: $secondary-color;
    .slides {
      .slide {
        &:nth-child(odd) {
          background-color: $secondary-color;
        }
      }
    }
  }
}
&.hero-announcement {
  // aside {
  //   background-color: $white;
  //   .slides {
  //     .slide {
  //       &:nth-child(odd) {
  //         background-color: $white;
  //       }
  //     }
  //   }
  // }
}
  //hero secondary
  &.secondary {
    border-top: none;
    background-color: $secondary-color;
    .slide{
      figure {
        background-color: unset;
      }
    }
  }
}
//end hero