// general styles //---------------- // // mods on fonts and typography // not in foundation variables // ----------------------------- h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6, button,.button, header nav { 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; } } section { padding: $global-padding $global-padding*2; } .entry-content,.omekas-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; } } } } // // // .contain selector for max-width //-------------- .contain-width { .entry-content,.omekas-entry-content { @include breakpoint(small){ } @include breakpoint(medium){ max-width: 50rem; } @include breakpoint(xlarge){ max-width: 50rem; } } } // // news category //-------------- .news,.news-category { @include xy-grid; header,main,aside { @include breakpoint(small){ padding-top: 0; @include xy-cell(12); @include flex; @include flex-align(center,top); padding-top: $global-padding*3; h3 { line-height: $global-lineheight/1.5; } } } main { //@include xy-cell(12); @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-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; } } } // end news category // // collections category //-------------- .collections-list { @include xy-grid; padding:0; header,main{ @include xy-cell(12); @include flex; @include flex-align(center,top); } header { margin-top: 2*$global-margin; border-top: 1px solid $body-font-color; padding: $global-padding*2 0; } main { @include xy-grid; padding: 0; margin: 0; article { @include card-container(); @include xy-cell(); width: 100%; padding: 0; margin: 0; @include breakpoint(small){ font-size: $global-font-size*0.7; } @include breakpoint(medium){ font-size: $global-font-size*1; } @include breakpoint(large){ } margin-bottom:0; } } .accordion-content { padding-top: 0; section { @include xy-grid; padding-top: 0; padding-bottom: 0; @include breakpoint(small){ figure { @include xy-cell(12); background-color: $light-gray; margin-left:0; margin-right:0; } p { @include xy-cell(12); } } @include breakpoint(medium){ figure { @include xy-cell(3); margin-left: 0; } p { @include xy-cell(9); } } @include breakpoint(large){ } } } } // end collections category // partners // for big announcemnts //--------------------- .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 { border-top: 2px solid $primary-color; .slides { @include xy-grid(); .slide { @include xy-grid; justify-content: center; @include breakpoint(small){ width: 100vw; margin: 0; padding: $global-padding * 3; .textwidget { } } @include breakpoint(medium){ .textwidget { max-width: 50rem; margin:auto; padding: $global-padding * 2; font-size: $global-font-size*1.3; } } @include breakpoint(large){ width: 50%; height: calc((50vw*9)/16); padding: 0; margin: 0; overflow:hidden; a { @include flex; @include flex-align (center,middle); } img { // max-width: unset !important; height: 100% !important; } .textwidget { font-size: $global-font-size*1.2; padding: $global-padding * 2; } } @include breakpoint(xlarge){ .textwidget { font-size: $global-font-size*1.3; padding: $global-padding*3; } } @include breakpoint(xxlarge){ .textwidget { font-size: $global-font-size*1.6; padding: $global-padding*3; } } &:first-child { background-color: $primary-color; font-variant:all-small-caps; } color: $white; .logo { @include breakpoint(medium){ max-width: 80%; } } } } aside { @include xy-grid(); 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 secondary &.secondary { border-top: none; background-color: $secondary-color; .slide{ figure { background-color: unset; } } } &.omeka { border-top: none; max-height: unset; @include breakpoint(small){ .slides { background-color: $secondary-color; .slide { flex-direction: column; align-content: center; align-self: center; margin: $global-margin auto; &:first-child { color: unset; background-color: unset; font-variant:all-small-caps; } figure { margin: 0 auto; display:flex; justify-content: center; } } } } aside { background-color: $white; flex-direction: column; align-content: center; h2 { margin: $global-margin; } } } } //end hero // omeka specific styles #user-bar { width: 100%; } //end omeka specific styles