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

489 lines
9.8 KiB
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,&.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;
}
.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