// 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: 60rem; margin:0 auto; p { // font-size: $global-font-size*1.0; line-height: $paragraph-lineheight*1.1; } } @include breakpoint(xxlarge){ // @include xy-cell(12); // padding: $global-padding*2 $global-padding*3; // margin: 0 auto; max-width: 70rem; p { font-size: $global-font-size*1.2; line-height: $paragraph-lineheight*1.15; } } } } } // // 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,&.search-results-content,&.tax-archive_resource_category,&.tax-archive_resource_tag { @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 { padding: $global-padding * 2; } &.widget_media_image { overflow: hidden; img { width:100%; } } } @include breakpoint(medium){ &.widget_text p{ 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{ font-size: $global-font-size*1.2; padding: $global-padding * 2; } } @include breakpoint(xlarge){ &.widget_text p{ font-size: $global-font-size*1.3; padding: $global-padding*3; } } @include breakpoint(xxlarge){ &.widget_text p{ font-size: $global-font-size*1.6; 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; } } &.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 { } //hero secondary &.secondary { border-top: none; background-color: $secondary-color; .slide{ figure { background-color: unset; } } } } //end hero