Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
cab404f6 by Jeff Balicki
Options

sss 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 7e740cb2
Expand all
Inline Side-by-side
Showing 13 changed files with 453 additions and 51 deletions
......@@ -12,7 +12,6 @@
?>
<?php if( have_rows('work') ): ?>
<?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
<?php $i = 1; ?>
<div class="tiles">
<?php while( the_repeater_field('work') ): ?>
......@@ -22,15 +21,53 @@
<?php the_sub_field('hover_text'); ?>
</div>
<div class="tile_content">
<div class="title-mobile">
<h3> <?php the_sub_field('content_title'); ?> </h3>
</div>
<div class="image">
<?php $image = get_sub_field('content_image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<div class="text">
<div>
<h3><?php the_sub_field('content_title'); ?> </h3>
<?php the_sub_field('content'); ?>
</div>
<a class="whole-story" href="#">Get the whole story… </a>
</div>
</div>
</div>
<div class="tile_content mobile">
<div class="title-mobile">
<h3> <?php the_sub_field('content_title'); ?> </h3>
</div>
<div class="image">
<?php $image = get_sub_field('content_image'); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</div>
<div class="text">
<div>
<h3><?php the_sub_field('content_title'); ?> </h3>
<?php the_sub_field('content'); ?>
</div>
<a class="whole-story" href="#">Get the whole story… </a>
</div>
</div>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<br clear="both">
</div>
<?php endif; ?>
<?php endif; ?>
<!--
<div class="tiles">
<div class="tile"><span>1</span></div>
<div class="tile"><span>2</span></div>
<div class="tile"><span>3</span></div>
<div class="tile"><span>4</span></div>
<div class="tile"><span>5</span></div>
<div class="tile last"><span>6</span></div>
</div> -->
\ No newline at end of file
......
......@@ -15764,14 +15764,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
margin-left: -12px;
margin-right: -12px;
}
@media (max-width: 900px) {
.the-numbers {
margin-left: -50px;
margin-right: -50px;
}
}
.the-numbers .wp-block-columns {
gap: 0em;
}
@media (max-width: 900px) {
.the-numbers .wp-block-columns {
flex-wrap: wrap !important;
}
}
.the-numbers .wp-block-column {
padding: 50px;
background-color: #7AA6AD;
color: #fff;
}
@media (max-width: 900px) {
.the-numbers .wp-block-column {
flex-basis: 50% !important;
}
}
.the-numbers .wp-block-column:nth-of-type(2) {
background-color: #C2B59B;
color: #666666;
......@@ -15820,13 +15836,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
padding: 0px 25%;
}
.the-work p.first-of-type {
color: #fff;
font-size: 20px;
line-height: 24px;
padding: 0px 20%;
padding: 0px 25%;
}
.wp-block-getwid-tabs__nav-link {
......@@ -15917,19 +15933,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.tiles {
display: grid;
grid-template-columns: auto auto auto;
-moz-column-width: 33%;
column-width: 33%;
grid-template-columns: 33.3% 33.3% 33.3%;
-moz-column-width: 33.3%;
column-width: 33.3%;
-moz-column-gap: 0px;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
max-width: 1300px;
margin: auto;
margin-top: 40px;
transition: 0.5s;
background: #333;
}
@media (max-width: 1300px) {
.tiles {
max-width: 100vw;
}
}
@media (max-width: 800px) {
.tiles {
width: 100vw;
display: block;
height: auto;
}
}
.tile {
display: inline-grid;
......@@ -15940,6 +15967,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
height: 275px;
}
@media (max-width: 800px) {
.tile {
display: block;
}
}
.tile .tile_image {
background-size: cover;
......@@ -15950,41 +15983,200 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
}
.tile .hover_content {
opacity: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
}
@media (max-width: 800px) {
.tile .hover_content {
opacity: 1;
}
}
.tile .hover_content h3, .tile .hover_content .h3 {
color: #fff;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
font-family: "TradeGothic";
text-align: left;
}
.tile .hover_content p {
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: "TradeGothic";
max-width: 70%;
text-align: left;
}
.tile .tile_content {
display: none;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 70px;
}
@media (max-width: 1300px) {
.tile .tile_content {
padding: 40px;
}
}
.tile .tile_content h3, .tile .tile_content .h3 {
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
font-family: "TradeGothic";
text-align: left;
}
@media (max-width: 800px) {
.tile .tile_content h3, .tile .tile_content .h3 {
text-align: center;
font-size: 20px;
line-height: 24px;
margin-bottom: 30px;
}
}
.tile .tile_content p {
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: "TradeGothic";
text-align: left;
}
@media (max-width: 800px) {
.tile .tile_content p {
text-align: center;
font-size: 16px;
line-height: 19px;
}
}
.tile .tile_content .image {
height: 100%;
width: 40%;
display: inline-block;
margin-right: 30px;
}
@media (max-width: 800px) {
.tile .tile_content .image {
width: 80%;
height: auto;
margin: auto;
}
}
.tile .tile_content .tile_content.mobile {
display: none;
}
.tile .tile_content .title-mobile {
display: none;
}
@media (max-width: 800px) {
.tile .tile_content .title-mobile {
display: block;
}
}
.tile .tile_content .text {
display: flex;
flex-direction: column;
width: 55%;
justify-content: space-between;
flex-wrap: wrap;
height: 90%;
}
@media (max-width: 800px) {
.tile .tile_content .text {
display: block;
margin-top: 30px;
height: auto;
width: 100%;
}
}
@media (max-width: 800px) {
.tile .tile_content .text h3, .tile .tile_content .text .h3 {
display: none;
}
}
.tile .tile_content .text .whole-story {
align-items: flex-end;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
font-size: 24px;
line-height: 29px;
color: #fff;
text-decoration: none;
font-weight: 400;
}
@media (max-width: 800px) {
.tile .tile_content .text .whole-story {
display: block;
text-align: center;
margin-top: 100px;
}
}
.tile .tile_content .text .whole-story:hover {
text-decoration: underline;
}
.tile:hover .hover_content {
opacity: 1;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
}
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
height: 550px;
}
@media (max-width: 800px) {
.tile.expand {
height: auto;
}
}
.tile.expand .hover_content {
display: none;
}
.tile.expand .tile_content {
margin-top: -16px;
display: block;
display: flex;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
@media (max-width: 800px) {
.tile.expand .tile_content {
display: none;
}
}
.tile.expand .tile_image {
height: 550px;
}
.tile.expand:hover .hover_content {
@media (max-width: 800px) {
.tile.expand .tile_image {
height: 275px;
}
}
.tile.expand .tile_content.mobile {
display: none;
background-color: #333;
}
.tile.expand:hover .tile_content {
@media (max-width: 800px) {
.tile.expand .tile_content.mobile {
display: block;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
}
.last-expand .tile:nth-of-type(4) {
grid-column-end: 2;
}
.last-expand .tile:nth-of-type(5) {
grid-row-end: 4;
grid-column-end: 2;
}
/*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -24,17 +24,17 @@ $container = get_theme_mod( 'understrap_container_type' );
<!-- Your site branding in the menu -->
<?php get_template_part( 'global-templates/navbar-branding' ); ?>
<button
<!-- <button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
aria-label="<?php // esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
>
<span class="navbar-toggler-icon"></span>
</button>
</button> -->
<!-- The WordPress Menu goes here -->
<?php
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -6,8 +6,8 @@ import "_count-up";
import { wrapGrid } from 'animate-css-grid'
//const grid = document.querySelector(".tiles");
//wrapGrid(grid);
const grid = document.querySelector(".tiles");
wrapGrid(grid);
//const scroll = new LocomotiveScroll();
......@@ -23,13 +23,20 @@ document.addEventListener("DOMContentLoaded", function() {
jQuery(document).ready(function($) {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
}
window.addEventListener('resize', function() {
if ($(window).width() > 900) {
$('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
$('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
}
});
function expandTiles(){
var tiles = $('.tile');
tiles.click(function(){
......
......@@ -235,14 +235,24 @@
.the-numbers{
margin-left: -12px;
margin-right: -12px;
@media (max-width: 900px) {
margin-left: -50px;
margin-right: -50px;
}
.wp-block-columns{
gap: 0em;
@media (max-width: 900px) {
flex-wrap: wrap!important;
}
}
.wp-block-column{
padding: 50px;
background-color: #7AA6AD;
color: #fff;
@media (max-width: 900px) {
flex-basis: 50% !important;
}
}
.wp-block-column:nth-of-type(2){
background-color: #C2B59B;
......@@ -283,6 +293,7 @@
background-color: #333333;
margin: 0px -25%;
padding: 40px 0%;
h2{
text-transform: uppercase;
color: #fff;
......@@ -290,12 +301,15 @@
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
padding: 0px 25%;
}
p.first-of-type{
color: #fff;
font-size: 20px;
line-height: 24px;
padding: 0px 20%;
padding: 0px 25%;
}
}
......
.tiles{
display: grid;
grid-template-columns: auto auto auto;
column-width: 33%;
grid-template-columns: 33.3% 33.3% 33.3%;
column-width: 33.3%;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
max-width: 1300px;
margin: auto;
margin-top: 40px;
transition: .5s;
background: #333;
@media (max-width: 1300px) {
max-width:100vw;
}
@media (max-width: 800px) {
width: 100vw;
display: block;
height: auto;
}
}
.tile {
display: inline-grid;
margin: 0px;
......@@ -20,6 +30,10 @@
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
height: 275px;
@media (max-width: 800px) {
display: block;
}
.tile_image{
background-size: cover;
background-position: center;
......@@ -29,9 +43,132 @@
}
.hover_content{
opacity: 0;
@media (max-width: 800px) {
opacity: 1;
}
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 20px;
background-color: rgba(0,0,0,0.6);
height: 100%;
h3{
color: #fff;
font-size: 20px;
line-height: 24px;
text-transform: uppercase;
font-family: 'TradeGothic';
text-align: left;
}
p{
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: 'TradeGothic';
max-width: 70%;
text-align: left;
}
}
.tile_content{
display: none;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding: 70px;
@media (max-width: 1300px) {
padding: 40px;
}
h3{
color: #fff;
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
font-family: 'TradeGothic';
text-align: left;
@media (max-width: 800px) {
text-align: center;
font-size: 20px;
line-height: 24px;
margin-bottom: 30px;
}
}
p{
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 400;
font-family: 'TradeGothic';
text-align: left;
@media (max-width: 800px) {
text-align: center;
font-size: 16px;
line-height: 19px;
}
}
.image{
height: 100%;
width: 40%;
display: inline-block;
margin-right: 30px;
@media (max-width: 800px) {
width: 80%;
height: auto;
margin: auto;
}
}
.tile_content.mobile{
display: none;
}
.title-mobile{
display: none;
@media (max-width: 800px) {
display: block;
}
}
.text{
display:flex;
flex-direction: column;
width: 55%;
justify-content: space-between;
flex-wrap: wrap;
height: 90%;
@media (max-width: 800px) {
display:block;
margin-top: 30px;
height: auto;
width: 100%;
}
h3{
@media (max-width: 800px) {
display: none;
}
}
.whole-story{
align-items: flex-end;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
font-size: 24px;
line-height: 29px;
color: #fff;
text-decoration: none;
font-weight: 400;
@media (max-width: 800px) {
display: block;
text-align: center;
margin-top: 100px;
}
}
.whole-story:hover{
text-decoration: underline;
}
}
}
}
......@@ -39,8 +176,6 @@
.tile:hover {
.hover_content{
opacity: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
}
}
......@@ -50,39 +185,56 @@
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
height: 550px;
@media (max-width: 800px) {
height: auto;
}
.hover_content{
display: none;
}
.tile_content{
margin-top: -16px;
display: block;
display: flex;
height: 100%;
background-color: rgba(0,0,0,0.7);
@media (max-width: 800px) {
display: none;
}
}
.tile_image{
height: 550px;
@media (max-width: 800px) {
height: 275px;
}
}
.tile.expand:hover {
.hover_content{
display: none;
}
.tile_content{
.tile_content.mobile{
display: none;
background-color: #333;
@media (max-width: 800px) {
display: block;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
}
}
// .last-expand{
// .tile:nth-of-type(4){
// grid-column-end:2;
// .tile.expand:hover {
// .hover_content{
// display: none;
// }
// .tile_content{
// display: flex;
// @media (max-width: 800px) {
// display: none;
// }
// .tile:nth-of-type(5){
// grid-row-end: 4;
// grid-column-end:2;
// }
// }
.last-expand{
.tile:nth-of-type(4){
grid-column-end:2;
}
.tile:nth-of-type(5){
grid-row-end: 4;
grid-column-end:2;
}
}
......