422 lines
8.9 KiB
SCSS
422 lines
8.9 KiB
SCSS
/*!
|
|
* Bootscore custom styles
|
|
*/
|
|
|
|
// Add your own code here!
|
|
// Because this file is compiled after Bootstrap, you're also able to use Bootstrap mixins for better code.
|
|
// Some examples can be found here: https://bootscore.me/documentation/bootstrap-css-sass
|
|
|
|
/* NAVIGATION */
|
|
#nav-main {
|
|
height: 70px;
|
|
.container {
|
|
width: 1320px;
|
|
}
|
|
.nav-link {
|
|
// text-transform: uppercase;
|
|
font-size: 13px;
|
|
&.active {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Is required to show the svg logo */
|
|
.navbar-brand {
|
|
width: 150px;
|
|
}
|
|
|
|
.offcanvas-body #bootscore-navbar {
|
|
li {
|
|
border-top: 1px dotted #fff;
|
|
padding: 0.5rem 0;
|
|
&:last-of-type {
|
|
border-bottom: 1px dotted #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.offcanvas-body #bootscore-navbar {
|
|
li,
|
|
li:last-of-type {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CUSTOM BLOCK MOBILE SUPPORT */
|
|
@include media-breakpoint-up(md) {
|
|
body:not(.wp-admin) .wp-block-create-block-featured-image-block {
|
|
.call-to-action {
|
|
width: 350px;
|
|
margin-right: 100px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* DEFAULT BLOCK OVERRIDES */
|
|
:root :where(p.has-background) {
|
|
padding:.5em;
|
|
}
|
|
|
|
.wp-block-cover, .wp-block-cover-image {
|
|
min-height: auto;
|
|
}
|
|
/* COVER control the spacing on the left and right */
|
|
.wp-block-cover.is-light {
|
|
.has-text-align-left {
|
|
margin-left: 0 !important;
|
|
}
|
|
.has-text-align-right {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
:root :where(p.has-background) {
|
|
padding:1.25em 2.375em;
|
|
}
|
|
}
|
|
|
|
|
|
/* HOMEPAGE SPECIFIC STYLING PER BLOCK */
|
|
/* Crane block */
|
|
.homepage-crane {
|
|
.wp-block-cover__image-background {
|
|
background-position: right 35% top 20% !important;
|
|
}
|
|
}
|
|
|
|
.home {
|
|
#content {
|
|
padding-top: 0 !important;
|
|
}
|
|
.entry-header {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.footer-crane {
|
|
.wp-block-cover__image-background {
|
|
background-position: 760% 20% !important;
|
|
background-attachment: initial;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
#footer {
|
|
.bootscore-footer-columns {
|
|
// background-color: black;
|
|
color: white;
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom Style for core/cover block */
|
|
.is-style-fixed-height-272 {
|
|
height: 272px;
|
|
}
|
|
.is-style-fixed-height-300 {
|
|
height: 300px;
|
|
}
|
|
.is-style-fixed-height-400 {
|
|
height: 400px;
|
|
}
|
|
|
|
// /* FIXME: merge buttons to be bootstrap by amending the classes here in core/button. Then update theme.json */
|
|
// .wp-block-button__link {
|
|
// transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
// &:hover {
|
|
// color: #fff;
|
|
// background-color: #c20512;
|
|
// border-color: #b70511;
|
|
// }
|
|
// }
|
|
|
|
.is-style-bootstrap-primary > a,
|
|
.is-style-bootstrap-primary > div {
|
|
@extend .btn;
|
|
@extend .btn-primary;
|
|
@extend .btn-lg;
|
|
}
|
|
|
|
.is-style-bootstrap-dark > a,
|
|
.is-style-bootstrap-dark > div {
|
|
@extend .btn;
|
|
@extend .btn-dark;
|
|
@extend .btn-lg;
|
|
}
|
|
|
|
|
|
.is-style-styled-list {
|
|
padding-left: 60px;
|
|
counter-reset: item;
|
|
list-style-position: outside;
|
|
li {
|
|
margin-bottom: 40px;
|
|
padding-left: 50px;
|
|
position: relative;
|
|
display: block;
|
|
line-height: 1.1;
|
|
}
|
|
li:before {
|
|
position: absolute;
|
|
// padding-top: 40px;
|
|
margin-left: -90px;
|
|
padding-left: 30px;
|
|
margin-right: 30px;
|
|
font-size: 50px;
|
|
font-weight: bold;
|
|
content: counter(item);
|
|
counter-increment: item;
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
|
|
/* Page */
|
|
.featured-full-width-img {
|
|
height: 400px;
|
|
}
|
|
|
|
#secondary {
|
|
height: 100%;
|
|
}
|
|
|
|
#secondary {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar {
|
|
// padding-left: 8rem;
|
|
// padding-right: 2rem;
|
|
top: 30px;
|
|
font-size: 24px;
|
|
position: sticky;
|
|
a:not(.active) {
|
|
color: black;
|
|
}
|
|
li {
|
|
border-top: 1px dotted #000;
|
|
padding: 0.5rem 0;
|
|
&:last-of-type {
|
|
border-bottom: 1px dotted #000;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* CUSTOM BLOCK MOBILE SUPPORT */
|
|
@include media-breakpoint-up(xl) {
|
|
#secondary {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
body:not(.wp-admin) .wp-block-group.team {
|
|
position: relative;
|
|
|
|
// turn into 1 column on mobile
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
|
|
div.team-member-wrapper {
|
|
// Ensure each item is a square
|
|
aspect-ratio: 1/1;
|
|
|
|
// Resetting height/width to ensure that team member's name covers entire square
|
|
.wp-block-cover,
|
|
.wp-block-cover__inner-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
&:hover {
|
|
.team-member-name {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Team member's name and bio styling
|
|
.team-member-name, .team-member-bio {
|
|
color: #fff;
|
|
display: none;
|
|
background-color: $primary;
|
|
|
|
button {
|
|
margin-top: 5px;
|
|
background: none;
|
|
fill: white;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
}
|
|
|
|
.team-member-name {
|
|
background-color: rgba($primary, 0.5);
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: all .25s ease-in-out;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: center;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
|
|
// Styling for overlay block
|
|
.view-team-member-bio .team-member-bio {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 20px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.team-member-bio {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
body:not(.wp-admin) .wp-block-group.team {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
// Handing animation
|
|
// Start by hiding, then display by :hover and JS in custom.js
|
|
.team-member-name {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.team-member-name, .team-member-bio {
|
|
background-color: $primary;
|
|
}
|
|
.view-team-member-bio .team-member-bio {
|
|
width: calc(200% + 24px);
|
|
height: calc(200% + 24px);
|
|
}
|
|
.view-team-member-bio:nth-of-type(odd) .team-member-bio {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.view-team-member-bio:nth-of-type(even) .team-member-bio {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
// Targetting 7th item
|
|
.team-member-wrapper:nth-of-type(7) .team-member-bio {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
// Targetting 8th item
|
|
.team-member-wrapper:nth-of-type(8) .team-member-bio {
|
|
top: auto;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
body:not(.wp-admin) .wp-block-group.team {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
|
.view-team-member-bio .team-member-bio {
|
|
width: calc(200% + 24px);
|
|
height: calc(200% + 24px);
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 20px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.view-team-member-bio .team-member-bio {
|
|
padding: 40px;
|
|
}
|
|
|
|
.team-member-wrapper:nth-of-type(4) {
|
|
.team-member-bio {
|
|
left: auto;
|
|
}
|
|
}
|
|
// Targetting first 3 items in the bottom row
|
|
.team-member-wrapper:nth-of-type(n+5):nth-child(-n+7) {
|
|
.team-member-bio {
|
|
top: auto;
|
|
}
|
|
}
|
|
// Targetting last item in the bottom row
|
|
.team-member-wrapper:nth-of-type(8) {
|
|
.team-member-bio {
|
|
left: auto;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
body:not(.wp-admin) .wp-block-group.team {
|
|
.team-member-name {
|
|
padding: 20px;
|
|
button {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-to-sidebar {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
body:not(.wp-admin) {
|
|
--wp--style--global--content-size: 100%;
|
|
} |