Arc-hive-omeka-theme/asset/scss/modules/_content.scss

594 lines
12 KiB
SCSS

// 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;
}
}
/* https://fontawesome.com/v5.0/icons */
a[href$=".pdf"]:after {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-left: .5rem;
content: "\f1c1";
}
.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 $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;
}
}
}
}
//
// .index max-width
//--------------
.index {
.entry-content,.omekas-entry-content {
@include breakpoint(small){
}
@include breakpoint(medium){
max-width: unset;
}
@include breakpoint(xlarge){
max-width: unset;
}
@include breakpoint(xxlarge){
max-width: 60 rem;
}
}
}
//
//
// .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 {
display: none;
}
main {
@include xy-grid;
padding: 0;
margin: 0;
article {
@include breakpoint(small){
@include card-container();
@include xy-cell();
width: 100%;
padding: 0;
margin: 0;
font-size: $global-font-size*0.7;
}
@include breakpoint(medium){
font-size: $global-font-size*1;
}
@include breakpoint(large){
}
}
}
.load_more {
display:flex;
flex-direction: column;
align-items: center;
}
// accordion for colletions list
.accordion-item {
&.title {
.accordion-title {
@include breakpoint(small){
li {
@include xy-cell(3);
@include xy-cell-offset(0);
&.title,&.curator,&.collection-name,&.date {
&::before {content: none;}
}
&.date {
margin-left: auto;
}
.ascToggle{
position:absolute;
padding-left: 0.21rem;
}
}
}
@include breakpoint(medium){
li {
&.title {
@include xy-cell(4);
}
&.curator {
@include xy-cell(4);
}
&.collection-name {
@include xy-cell(2);
}
&.date {
@include xy-cell(shrink);
margin-left: auto; //aligns to right
}
}
}
}
}
&:not(.title){
&.is-active {
background-color:$input-background;
}
.accordion-title {
@include breakpoint(small){
li {
&.title,
&.curator,
&.collection-name,
&.date {
@include xy-cell(10);
@include xy-cell-offset(2);
min-height: 1rem;
&::before {
display: inline-block;
color: $medium-gray;
position: absolute;
left:0;
}
}
&.title::before {content:"Title";}
&.curator::before {content:"Artist";}
&.collection-name::before {content:"Collection";}
&.date::before {content:"Date";}
}
}
@include breakpoint(medium){
li {
&.title,
&.curator,
&.collection-name,
&.date {
min-height:unset;
&::before {
content: none;
// content:"";
}
}
&.title {
@include xy-cell(4);
}
&.curator {
@include xy-cell(4);
}
&.collection-name {
@include xy-cell(2);
}
&.date {
@include xy-cell(shrink);
margin-left: auto; //aligns to right
}
}
}
}
}
.accordion-title {
ul,ol {
margin: 0;
}
}
.accordion-content {
padding-top: 0;
section {
@include xy-grid;
padding: 0;
@include breakpoint(small){
figure {
@include xy-cell(12);
margin-left:0;
margin-right:0;
}
p {
@include xy-cell(12);
position: relative;
//padding: $global-padding;
padding-bottom: $global-padding * 3;
.button {
position:absolute;
right:0;
margin-top: $global-padding * 3;
}
}
}
@include breakpoint(medium){
figure {
@include xy-cell(4);
//margin-left: 0;
}
p {
@include xy-cell(8);
}
}
@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;
@include breakpoint(small){
width: 100vw;
overflow: hidden;
padding: 0;
margin: 0;
justify-content: center;
color: $white;
.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;
}
.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);
@include breakpoint(small) {
flex-direction: column;
min-height: unset;
padding: $global-padding;
.menu, .menu.horizontal {
justify-content: center;
}
}
@include breakpoint(large) {
flex-direction: row;
min-height: $global-padding * 6;
padding: $global-padding 0 ;
.menu, .menu.horizontal {
justify-content: unset;
}
}
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-items: center;
h2 {
margin: $global-margin;
}
}
}
&.collections-all {
}
&.collection-single {
.slides{
background-color: unset;
.slide {
margin:0 auto;
height: unset;
width: 100vw;
max-height: 10rem;
@include breakpoint(large){
height: unset;
}
img,.arc-page-header-img {
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
}
}
}
aside {
nav {
width: 100vw;
border-top: $global-border-archive;
border-bottom: $global-border-archive;
margin: 0;
}
}
}
}
//end hero