add team styling, updates to custom block, general css polishing, updates to navigation
This commit is contained in:
Nataliia Bobrova committed
1 parent
1d0fe5eebd
commit
9b1a1fb2fd
16 files changed
+325
-16
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+35
-2
@@ -6,7 +6,7 @@ jQuery(function ($) {
|
||||
|
||||
let links;
|
||||
|
||||
links = document.querySelectorAll("#one, #two, #three")
|
||||
links = document.querySelectorAll("#one, #two, #three, #four, #fivenav_menu-7")
|
||||
|
||||
let url = window.location.href;
|
||||
|
||||
@@ -20,7 +20,7 @@ jQuery(function ($) {
|
||||
console.log(innerContent)
|
||||
|
||||
let menu;
|
||||
menu = document.getElementById("menu-test-scroll-spy");
|
||||
menu = document.getElementById("menu-scroll-spy");
|
||||
|
||||
menu.innerHTML = innerContent
|
||||
|
||||
@@ -29,10 +29,43 @@ jQuery(function ($) {
|
||||
$('.entry-content').scrollspy({
|
||||
target: '#nav_menu-4'
|
||||
});
|
||||
|
||||
$('.entry-content').scrollspy({
|
||||
target: '#nav_menu-7'
|
||||
});
|
||||
|
||||
// Refresh Scrollspy
|
||||
$('[data-spy="scroll"]').each(function () {
|
||||
$(this).scrollspy("refresh");
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var elements = document.querySelectorAll('.view-team-member-button');
|
||||
|
||||
|
||||
elements.forEach(function(element) {
|
||||
element.addEventListener('click', function() {
|
||||
|
||||
for (elem of document.getElementsByClassName("view-team-member-bio")) {
|
||||
elem.classList.remove("view-team-member-bio");
|
||||
}
|
||||
|
||||
this.closest(".team-member-wrapper").classList.add('view-team-member-bio');
|
||||
this.parentNode.classList.remove('visible');
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var elements = document.querySelectorAll('.hide-team-member-button');
|
||||
elements.forEach(function(element) {
|
||||
element.addEventListener('click', function() {
|
||||
this.parentNode.parentNode.classList.remove('view-team-member-bio');
|
||||
})
|
||||
});
|
||||
});
|
||||
@@ -13,8 +13,11 @@
|
||||
width: 1320px;
|
||||
}
|
||||
.nav-link {
|
||||
text-transform: uppercase;
|
||||
// text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,7 +160,7 @@
|
||||
font-weight: bold;
|
||||
content: counter(item);
|
||||
counter-increment: item;
|
||||
color: red;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,24 +177,218 @@
|
||||
#secondary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
padding-left: 8rem;
|
||||
padding-right: 2rem;
|
||||
// padding-left: 8rem;
|
||||
// padding-right: 2rem;
|
||||
font-size: 24px;
|
||||
position: sticky;
|
||||
a:not(.active) {
|
||||
color: black;
|
||||
}
|
||||
li {
|
||||
border-top: 1px dotted #000;
|
||||
// border-bottom:
|
||||
padding: 0.5rem 0;
|
||||
&:last-of-type {
|
||||
border-bottom: 1px dotted #000;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOM BLOCK MOBILE SUPPORT */
|
||||
@include media-breakpoint-up(lg) {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,9 +4,52 @@ $primary: #e30613;
|
||||
$secondary: #cccccc;
|
||||
$tertiary: #f5f5f5;
|
||||
|
||||
$font-size-base: 1.3rem;
|
||||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN2014WebRegular';
|
||||
src:
|
||||
url('../fonts/din-2014_regular.woff2') format('woff2'),
|
||||
url('../fonts/din-2014_regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN2014WebBold';
|
||||
src:
|
||||
url('../fonts/din-2014_bold.woff2') format('woff2'),
|
||||
url('../fonts/din-2014_bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* Generated by ParaType (http://www.paratype.com)*/
|
||||
/* Font DIN 2014: Copyright (c) ParaType, 2025. All rights reserved.*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'DIN2014WebExtraBold';
|
||||
src:
|
||||
url('../fonts/din-2014_extra-bold.woff2') format('woff2'),
|
||||
url('../fonts/din-2014_extra-bold.woff') format('woff');
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
|
||||
$font-family-sans-serif: "DIN2014WebRegular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
|
||||
$headings-font-family: "DIN2014WebRegular";
|
||||
|
||||
b, strong {
|
||||
font-family: "DIN2014WebBold";
|
||||
}
|
||||
|
||||
$font-size-base: 1.3rem;
|
||||
|
||||
$navbar-light-color: white;
|
||||
$navbar-light-hover-color: darken(white, 10%);
|
||||
$navbar-light-active-color: white;
|
||||
@@ -22,4 +65,3 @@ $container-max-widths: (
|
||||
xl: 1140px,
|
||||
xxl: 1400px
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user