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 476 additions and 74 deletions
...@@ -11,26 +11,63 @@ ...@@ -11,26 +11,63 @@
11 11
12 ?> 12 ?>
13 <?php if( have_rows('work') ): ?> 13 <?php if( have_rows('work') ): ?>
14 <?php $rowCount = count( get_field('work') ); //GET THE COUNT ?> 14 <?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
15
16 <?php $i = 1; ?> 15 <?php $i = 1; ?>
17 <div class="tiles"> 16 <div class="tiles">
18 <?php while( the_repeater_field('work') ): ?> 17 <?php while( the_repeater_field('work') ): ?>
19 <div class="tile <?php if($i == $rowCount): ?> last <?php endif; ?>"> 18 <div class="tile <?php if($i == $rowCount): ?> last <?php endif; ?>">
20 <div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);"> 19 <div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
21 <div class="hover_content"> 20 <div class="hover_content">
22 <?php the_sub_field('hover_text'); ?> 21 <?php the_sub_field('hover_text'); ?>
23 </div> 22 </div>
24 <div class="tile_content"> 23 <div class="tile_content">
25 <?php the_sub_field('content'); ?> 24 <div class="title-mobile">
25 <h3> <?php the_sub_field('content_title'); ?> </h3>
26 </div>
27 <div class="image">
28 <?php $image = get_sub_field('content_image'); ?>
29 <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
30 </div>
31 <div class="text">
32 <div>
33 <h3><?php the_sub_field('content_title'); ?> </h3>
34 <?php the_sub_field('content'); ?>
35 </div>
36 <a class="whole-story" href="#">Get the whole story… </a>
37 </div>
38 </div>
26 </div> 39 </div>
27 </div> 40 <div class="tile_content mobile">
28 </div> 41 <div class="title-mobile">
42 <h3> <?php the_sub_field('content_title'); ?> </h3>
43 </div>
44 <div class="image">
45 <?php $image = get_sub_field('content_image'); ?>
46 <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
47 </div>
48 <div class="text">
49 <div>
50 <h3><?php the_sub_field('content_title'); ?> </h3>
51 <?php the_sub_field('content'); ?>
52 </div>
53 <a class="whole-story" href="#">Get the whole story… </a>
54 </div>
55 </div>
56 </div>
29 <?php $i++; ?> 57 <?php $i++; ?>
30 <?php endwhile; ?> 58 <?php endwhile; ?>
31 <br clear="both"> 59 <br clear="both">
32 </div> 60 </div>
61
33 <?php endif; ?> 62 <?php endif; ?>
34 63
35 64
36 65 <!--
66 <div class="tiles">
67 <div class="tile"><span>1</span></div>
68 <div class="tile"><span>2</span></div>
69 <div class="tile"><span>3</span></div>
70 <div class="tile"><span>4</span></div>
71 <div class="tile"><span>5</span></div>
72 <div class="tile last"><span>6</span></div>
73 </div> -->
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -15764,14 +15764,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15764,14 +15764,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15764 margin-left: -12px; 15764 margin-left: -12px;
15765 margin-right: -12px; 15765 margin-right: -12px;
15766 } 15766 }
15767 @media (max-width: 900px) {
15768 .the-numbers {
15769 margin-left: -50px;
15770 margin-right: -50px;
15771 }
15772 }
15767 .the-numbers .wp-block-columns { 15773 .the-numbers .wp-block-columns {
15768 gap: 0em; 15774 gap: 0em;
15769 } 15775 }
15776 @media (max-width: 900px) {
15777 .the-numbers .wp-block-columns {
15778 flex-wrap: wrap !important;
15779 }
15780 }
15770 .the-numbers .wp-block-column { 15781 .the-numbers .wp-block-column {
15771 padding: 50px; 15782 padding: 50px;
15772 background-color: #7AA6AD; 15783 background-color: #7AA6AD;
15773 color: #fff; 15784 color: #fff;
15774 } 15785 }
15786 @media (max-width: 900px) {
15787 .the-numbers .wp-block-column {
15788 flex-basis: 50% !important;
15789 }
15790 }
15775 .the-numbers .wp-block-column:nth-of-type(2) { 15791 .the-numbers .wp-block-column:nth-of-type(2) {
15776 background-color: #C2B59B; 15792 background-color: #C2B59B;
15777 color: #666666; 15793 color: #666666;
...@@ -15820,13 +15836,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15820,13 +15836,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15820 line-height: 72px; 15836 line-height: 72px;
15821 font-weight: 400; 15837 font-weight: 400;
15822 margin-bottom: 20px; 15838 margin-bottom: 20px;
15823 padding: 0px 2%; 15839 padding: 0px 25%;
15824 } 15840 }
15825 .the-work p.first-of-type { 15841 .the-work p.first-of-type {
15826 color: #fff; 15842 color: #fff;
15827 font-size: 20px; 15843 font-size: 20px;
15828 line-height: 24px; 15844 line-height: 24px;
15829 padding: 0px 20%; 15845 padding: 0px 25%;
15830 } 15846 }
15831 15847
15832 .wp-block-getwid-tabs__nav-link { 15848 .wp-block-getwid-tabs__nav-link {
...@@ -15917,19 +15933,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15917,19 +15933,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15917 15933
15918 .tiles { 15934 .tiles {
15919 display: grid; 15935 display: grid;
15920 grid-template-columns: auto auto auto; 15936 grid-template-columns: 33.3% 33.3% 33.3%;
15921 -moz-column-width: 33%; 15937 -moz-column-width: 33.3%;
15922 column-width: 33%; 15938 column-width: 33.3%;
15923 -moz-column-gap: 0px; 15939 -moz-column-gap: 0px;
15924 column-gap: 0px; 15940 column-gap: 0px;
15925 grid-auto-flow: dense; 15941 grid-auto-flow: dense;
15926 grid-template-rows: masonry; 15942 max-width: 1300px;
15927 margin-top: 40px;
15928 max-width: 100vw;
15929 margin: auto; 15943 margin: auto;
15944 margin-top: 40px;
15930 transition: 0.5s; 15945 transition: 0.5s;
15931 background: #333; 15946 background: #333;
15932 } 15947 }
15948 @media (max-width: 1300px) {
15949 .tiles {
15950 max-width: 100vw;
15951 }
15952 }
15953 @media (max-width: 800px) {
15954 .tiles {
15955 width: 100vw;
15956 display: block;
15957 height: auto;
15958 }
15959 }
15933 15960
15934 .tile { 15961 .tile {
15935 display: inline-grid; 15962 display: inline-grid;
...@@ -15940,6 +15967,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15940,6 +15967,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15940 vertical-align: top; 15967 vertical-align: top;
15941 grid-column-end: span 1; 15968 grid-column-end: span 1;
15942 grid-row-end: span 1; 15969 grid-row-end: span 1;
15970 height: 275px;
15971 }
15972 @media (max-width: 800px) {
15973 .tile {
15974 display: block;
15975 }
15943 } 15976 }
15944 .tile .tile_image { 15977 .tile .tile_image {
15945 background-size: cover; 15978 background-size: cover;
...@@ -15950,41 +15983,200 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15950,41 +15983,200 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15950 } 15983 }
15951 .tile .hover_content { 15984 .tile .hover_content {
15952 opacity: 0; 15985 opacity: 0;
15986 display: flex;
15987 flex-direction: column;
15988 justify-content: flex-end;
15989 align-items: flex-start;
15990 align-content: flex-start;
15991 flex-wrap: wrap;
15992 padding: 20px;
15993 background-color: rgba(0, 0, 0, 0.6);
15994 height: 100%;
15995 }
15996 @media (max-width: 800px) {
15997 .tile .hover_content {
15998 opacity: 1;
15999 }
16000 }
16001 .tile .hover_content h3, .tile .hover_content .h3 {
16002 color: #fff;
16003 font-size: 20px;
16004 line-height: 24px;
16005 text-transform: uppercase;
16006 font-family: "TradeGothic";
16007 text-align: left;
16008 }
16009 .tile .hover_content p {
16010 color: #fff;
16011 font-size: 20px;
16012 line-height: 24px;
16013 font-weight: 400;
16014 font-family: "TradeGothic";
16015 max-width: 70%;
16016 text-align: left;
15953 } 16017 }
15954 .tile .tile_content { 16018 .tile .tile_content {
15955 display: none; 16019 display: none;
16020 flex-direction: column;
16021 align-items: flex-start;
16022 align-content: flex-start;
16023 flex-wrap: wrap;
16024 padding: 70px;
16025 }
16026 @media (max-width: 1300px) {
16027 .tile .tile_content {
16028 padding: 40px;
16029 }
16030 }
16031 .tile .tile_content h3, .tile .tile_content .h3 {
16032 color: #fff;
16033 font-size: 30px;
16034 line-height: 36px;
16035 text-transform: uppercase;
16036 font-family: "TradeGothic";
16037 text-align: left;
16038 }
16039 @media (max-width: 800px) {
16040 .tile .tile_content h3, .tile .tile_content .h3 {
16041 text-align: center;
16042 font-size: 20px;
16043 line-height: 24px;
16044 margin-bottom: 30px;
16045 }
16046 }
16047 .tile .tile_content p {
16048 color: #fff;
16049 font-size: 20px;
16050 line-height: 24px;
16051 font-weight: 400;
16052 font-family: "TradeGothic";
16053 text-align: left;
16054 }
16055 @media (max-width: 800px) {
16056 .tile .tile_content p {
16057 text-align: center;
16058 font-size: 16px;
16059 line-height: 19px;
16060 }
16061 }
16062 .tile .tile_content .image {
16063 height: 100%;
16064 width: 40%;
16065 display: inline-block;
16066 margin-right: 30px;
16067 }
16068 @media (max-width: 800px) {
16069 .tile .tile_content .image {
16070 width: 80%;
16071 height: auto;
16072 margin: auto;
16073 }
16074 }
16075 .tile .tile_content .tile_content.mobile {
16076 display: none;
16077 }
16078 .tile .tile_content .title-mobile {
16079 display: none;
16080 }
16081 @media (max-width: 800px) {
16082 .tile .tile_content .title-mobile {
16083 display: block;
16084 }
16085 }
16086 .tile .tile_content .text {
16087 display: flex;
16088 flex-direction: column;
16089 width: 55%;
16090 justify-content: space-between;
16091 flex-wrap: wrap;
16092 height: 90%;
16093 }
16094 @media (max-width: 800px) {
16095 .tile .tile_content .text {
16096 display: block;
16097 margin-top: 30px;
16098 height: auto;
16099 width: 100%;
16100 }
16101 }
16102 @media (max-width: 800px) {
16103 .tile .tile_content .text h3, .tile .tile_content .text .h3 {
16104 display: none;
16105 }
16106 }
16107 .tile .tile_content .text .whole-story {
16108 align-items: flex-end;
16109 display: flex;
16110 align-content: flex-end;
16111 flex-wrap: wrap;
16112 font-size: 24px;
16113 line-height: 29px;
16114 color: #fff;
16115 text-decoration: none;
16116 font-weight: 400;
16117 }
16118 @media (max-width: 800px) {
16119 .tile .tile_content .text .whole-story {
16120 display: block;
16121 text-align: center;
16122 margin-top: 100px;
16123 }
16124 }
16125 .tile .tile_content .text .whole-story:hover {
16126 text-decoration: underline;
15956 } 16127 }
15957 16128
15958 .tile:hover .hover_content { 16129 .tile:hover .hover_content {
15959 opacity: 1; 16130 opacity: 1;
15960 background-color: rgba(0, 0, 0, 0.6);
15961 height: 100%;
15962 } 16131 }
15963 16132
15964 .tile.expand { 16133 .tile.expand {
15965 grid-column-end: span 2; 16134 grid-column-end: span 2;
15966 grid-row-end: span 2; 16135 grid-row-end: span 2;
16136 height: 550px;
16137 }
16138 @media (max-width: 800px) {
16139 .tile.expand {
16140 height: auto;
16141 }
15967 } 16142 }
15968 .tile.expand .hover_content { 16143 .tile.expand .hover_content {
15969 display: none; 16144 display: none;
15970 } 16145 }
15971 .tile.expand .tile_content { 16146 .tile.expand .tile_content {
15972 margin-top: -16px; 16147 display: flex;
15973 display: block;
15974 height: 100%; 16148 height: 100%;
15975 background-color: rgba(0, 0, 0, 0.7); 16149 background-color: rgba(0, 0, 0, 0.7);
15976 } 16150 }
16151 @media (max-width: 800px) {
16152 .tile.expand .tile_content {
16153 display: none;
16154 }
16155 }
15977 .tile.expand .tile_image { 16156 .tile.expand .tile_image {
15978 height: 550px; 16157 height: 550px;
15979 } 16158 }
15980 16159 @media (max-width: 800px) {
15981 .tile.expand:hover .hover_content { 16160 .tile.expand .tile_image {
16161 height: 275px;
16162 }
16163 }
16164 .tile.expand .tile_content.mobile {
15982 display: none; 16165 display: none;
16166 background-color: #333;
15983 } 16167 }
15984 .tile.expand:hover .tile_content { 16168 @media (max-width: 800px) {
15985 display: block; 16169 .tile.expand .tile_content.mobile {
15986 height: 100%; 16170 display: block;
15987 background-color: rgba(0, 0, 0, 0.7); 16171 }
16172 }
16173
16174 .last-expand .tile:nth-of-type(4) {
16175 grid-column-end: 2;
16176 }
16177 .last-expand .tile:nth-of-type(5) {
16178 grid-row-end: 4;
16179 grid-column-end: 2;
15988 } 16180 }
15989 16181
15990 /*# sourceMappingURL=child-theme.css.map */ 16182 /*# sourceMappingURL=child-theme.css.map */
...\ No newline at end of file ...\ 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' ); ...@@ -24,17 +24,17 @@ $container = get_theme_mod( 'understrap_container_type' );
24 <!-- Your site branding in the menu --> 24 <!-- Your site branding in the menu -->
25 <?php get_template_part( 'global-templates/navbar-branding' ); ?> 25 <?php get_template_part( 'global-templates/navbar-branding' ); ?>
26 26
27 <button 27 <!-- <button
28 class="navbar-toggler" 28 class="navbar-toggler"
29 type="button" 29 type="button"
30 data-bs-toggle="collapse" 30 data-bs-toggle="collapse"
31 data-bs-target="#navbarNavDropdown" 31 data-bs-target="#navbarNavDropdown"
32 aria-controls="navbarNavDropdown" 32 aria-controls="navbarNavDropdown"
33 aria-expanded="false" 33 aria-expanded="false"
34 aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>" 34 aria-label="<?php // esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
35 > 35 >
36 <span class="navbar-toggler-icon"></span> 36 <span class="navbar-toggler-icon"></span>
37 </button> 37 </button> -->
38 38
39 <!-- The WordPress Menu goes here --> 39 <!-- The WordPress Menu goes here -->
40 <?php 40 <?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"; ...@@ -6,8 +6,8 @@ import "_count-up";
6 6
7 import { wrapGrid } from 'animate-css-grid' 7 import { wrapGrid } from 'animate-css-grid'
8 8
9 //const grid = document.querySelector(".tiles"); 9 const grid = document.querySelector(".tiles");
10 //wrapGrid(grid); 10 wrapGrid(grid);
11 11
12 //const scroll = new LocomotiveScroll(); 12 //const scroll = new LocomotiveScroll();
13 13
...@@ -23,12 +23,19 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -23,12 +23,19 @@ document.addEventListener("DOMContentLoaded", function() {
23 23
24 24
25 jQuery(document).ready(function($) { 25 jQuery(document).ready(function($) {
26 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 26
27 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 27
28 window.addEventListener('resize', function() { 28 if ($(window).width() > 900) {
29 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 29 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
30 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 30 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
31 }
32 window.addEventListener('resize', function() {
33 if ($(window).width() > 900) {
34 $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left'));
35 $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
36 }
31 }); 37 });
38
32 39
33 function expandTiles(){ 40 function expandTiles(){
34 var tiles = $('.tile'); 41 var tiles = $('.tile');
......
...@@ -66,12 +66,12 @@ ...@@ -66,12 +66,12 @@
66 overflow: hidden; 66 overflow: hidden;
67 margin-bottom: 15px; 67 margin-bottom: 15px;
68 } 68 }
69 .large{ 69 .large{
70 color: #333333; 70 color: #333333;
71 font-size: 40px; 71 font-size: 40px;
72 line-height: 48px; 72 line-height: 48px;
73 73
74 } 74 }
75 75
76 } 76 }
77 77
...@@ -235,14 +235,24 @@ ...@@ -235,14 +235,24 @@
235 .the-numbers{ 235 .the-numbers{
236 margin-left: -12px; 236 margin-left: -12px;
237 margin-right: -12px; 237 margin-right: -12px;
238 @media (max-width: 900px) {
239 margin-left: -50px;
240 margin-right: -50px;
241 }
238 .wp-block-columns{ 242 .wp-block-columns{
239 gap: 0em; 243 gap: 0em;
244 @media (max-width: 900px) {
245 flex-wrap: wrap!important;
246 }
240 } 247 }
241 248
242 .wp-block-column{ 249 .wp-block-column{
243 padding: 50px; 250 padding: 50px;
244 background-color: #7AA6AD; 251 background-color: #7AA6AD;
245 color: #fff; 252 color: #fff;
253 @media (max-width: 900px) {
254 flex-basis: 50% !important;
255 }
246 } 256 }
247 .wp-block-column:nth-of-type(2){ 257 .wp-block-column:nth-of-type(2){
248 background-color: #C2B59B; 258 background-color: #C2B59B;
...@@ -283,6 +293,7 @@ ...@@ -283,6 +293,7 @@
283 background-color: #333333; 293 background-color: #333333;
284 margin: 0px -25%; 294 margin: 0px -25%;
285 padding: 40px 0%; 295 padding: 40px 0%;
296
286 h2{ 297 h2{
287 text-transform: uppercase; 298 text-transform: uppercase;
288 color: #fff; 299 color: #fff;
...@@ -290,12 +301,15 @@ ...@@ -290,12 +301,15 @@
290 line-height: 72px; 301 line-height: 72px;
291 font-weight: 400; 302 font-weight: 400;
292 margin-bottom: 20px; 303 margin-bottom: 20px;
293 padding: 0px 2%; 304 padding: 0px 25%;
294 } 305 }
295 p.first-of-type{ 306 p.first-of-type{
296 color: #fff; 307 color: #fff;
297 font-size: 20px; 308 font-size: 20px;
298 line-height: 24px; 309 line-height: 24px;
299 padding: 0px 20%; 310 padding: 0px 25%;
300 } 311 }
301 } 312 }
313
314
315
......
1
2
1 .tiles{ 3 .tiles{
2 display: grid; 4 display: grid;
3 grid-template-columns: auto auto auto; 5 grid-template-columns: 33.3% 33.3% 33.3%;
4 column-width: 33%; 6 column-width: 33.3%;
5 column-gap: 0px; 7 column-gap: 0px;
6 grid-auto-flow: dense; 8 grid-auto-flow: dense;
7 grid-template-rows: masonry; 9 max-width: 1300px;
8 margin-top: 40px;
9 max-width: 100vw;
10 margin: auto; 10 margin: auto;
11 margin-top: 40px;
11 transition: .5s; 12 transition: .5s;
12 background: #333; 13 background: #333;
14 @media (max-width: 1300px) {
15 max-width:100vw;
16 }
17 @media (max-width: 800px) {
18 width: 100vw;
19 display: block;
20 height: auto;
21 }
13 } 22 }
23
14 .tile { 24 .tile {
15 display: inline-grid; 25 display: inline-grid;
16 margin: 0px; 26 margin: 0px;
...@@ -20,6 +30,10 @@ ...@@ -20,6 +30,10 @@
20 vertical-align: top; 30 vertical-align: top;
21 grid-column-end: span 1; 31 grid-column-end: span 1;
22 grid-row-end: span 1; 32 grid-row-end: span 1;
33 height: 275px;
34 @media (max-width: 800px) {
35 display: block;
36 }
23 .tile_image{ 37 .tile_image{
24 background-size: cover; 38 background-size: cover;
25 background-position: center; 39 background-position: center;
...@@ -29,9 +43,132 @@ ...@@ -29,9 +43,132 @@
29 } 43 }
30 .hover_content{ 44 .hover_content{
31 opacity: 0; 45 opacity: 0;
46 @media (max-width: 800px) {
47 opacity: 1;
48 }
49 display: flex;
50 flex-direction: column;
51 justify-content: flex-end;
52 align-items: flex-start;
53 align-content: flex-start;
54 flex-wrap: wrap;
55 padding: 20px;
56 background-color: rgba(0,0,0,0.6);
57 height: 100%;
58 h3{
59 color: #fff;
60 font-size: 20px;
61 line-height: 24px;
62 text-transform: uppercase;
63 font-family: 'TradeGothic';
64 text-align: left;
65 }
66 p{
67 color: #fff;
68 font-size: 20px;
69 line-height: 24px;
70 font-weight: 400;
71 font-family: 'TradeGothic';
72 max-width: 70%;
73 text-align: left;
74 }
75
32 } 76 }
33 .tile_content{ 77 .tile_content{
34 display: none; 78 display: none;
79 flex-direction: column;
80 align-items: flex-start;
81 align-content: flex-start;
82 flex-wrap: wrap;
83 padding: 70px;
84 @media (max-width: 1300px) {
85 padding: 40px;
86 }
87 h3{
88 color: #fff;
89 font-size: 30px;
90 line-height: 36px;
91 text-transform: uppercase;
92 font-family: 'TradeGothic';
93 text-align: left;
94 @media (max-width: 800px) {
95 text-align: center;
96 font-size: 20px;
97 line-height: 24px;
98 margin-bottom: 30px;
99 }
100 }
101 p{
102 color: #fff;
103 font-size: 20px;
104 line-height: 24px;
105 font-weight: 400;
106 font-family: 'TradeGothic';
107 text-align: left;
108 @media (max-width: 800px) {
109 text-align: center;
110 font-size: 16px;
111 line-height: 19px;
112 }
113 }
114 .image{
115 height: 100%;
116 width: 40%;
117 display: inline-block;
118 margin-right: 30px;
119 @media (max-width: 800px) {
120 width: 80%;
121 height: auto;
122 margin: auto;
123 }
124 }
125 .tile_content.mobile{
126 display: none;
127 }
128 .title-mobile{
129 display: none;
130 @media (max-width: 800px) {
131 display: block;
132 }
133 }
134 .text{
135 display:flex;
136 flex-direction: column;
137 width: 55%;
138 justify-content: space-between;
139 flex-wrap: wrap;
140 height: 90%;
141 @media (max-width: 800px) {
142 display:block;
143 margin-top: 30px;
144 height: auto;
145 width: 100%;
146 }
147 h3{
148 @media (max-width: 800px) {
149 display: none;
150 }
151 }
152 .whole-story{
153 align-items: flex-end;
154 display: flex;
155 align-content: flex-end;
156 flex-wrap: wrap;
157 font-size: 24px;
158 line-height: 29px;
159 color: #fff;
160 text-decoration: none;
161 font-weight: 400;
162 @media (max-width: 800px) {
163 display: block;
164 text-align: center;
165 margin-top: 100px;
166 }
167 }
168 .whole-story:hover{
169 text-decoration: underline;
170 }
171 }
35 } 172 }
36 } 173 }
37 174
...@@ -39,8 +176,6 @@ ...@@ -39,8 +176,6 @@
39 .tile:hover { 176 .tile:hover {
40 .hover_content{ 177 .hover_content{
41 opacity: 1; 178 opacity: 1;
42 background-color: rgba(0,0,0,0.6);
43 height: 100%;
44 } 179 }
45 } 180 }
46 181
...@@ -50,39 +185,56 @@ ...@@ -50,39 +185,56 @@
50 .tile.expand { 185 .tile.expand {
51 grid-column-end: span 2; 186 grid-column-end: span 2;
52 grid-row-end: span 2; 187 grid-row-end: span 2;
188 height: 550px;
189 @media (max-width: 800px) {
190 height: auto;
191 }
53 .hover_content{ 192 .hover_content{
54 display: none; 193 display: none;
55 } 194 }
56 .tile_content{ 195 .tile_content{
57 margin-top: -16px; 196 display: flex;
58 display: block;
59 height: 100%; 197 height: 100%;
60 background-color: rgba(0,0,0,0.7); 198 background-color: rgba(0,0,0,0.7);
199 @media (max-width: 800px) {
200 display: none;
201 }
61 } 202 }
62 .tile_image{ 203 .tile_image{
63 height: 550px; 204 height: 550px;
205 @media (max-width: 800px) {
206 height: 275px;
207 }
64 } 208 }
65 } 209 .tile_content.mobile{
66
67 .tile.expand:hover {
68 .hover_content{
69 display: none; 210 display: none;
70 } 211 background-color: #333;
71 .tile_content{ 212 @media (max-width: 800px) {
72 display: block; 213 display: block;
73 height: 100%; 214 }
74 background-color: rgba(0,0,0,0.7);
75 } 215 }
76 } 216 }
77 217
78 // .last-expand{ 218 // .tile.expand:hover {
79 // .tile:nth-of-type(4){ 219 // .hover_content{
80 220 // display: none;
81 // grid-column-end:2;
82 // } 221 // }
83 222 // .tile_content{
84 // .tile:nth-of-type(5){ 223 // display: flex;
85 // grid-row-end: 4; 224 // @media (max-width: 800px) {
86 // grid-column-end:2; 225 // display: none;
226 // }
87 // } 227 // }
88 // } 228 // }
229
230 .last-expand{
231 .tile:nth-of-type(4){
232 grid-column-end:2;
233 }
234
235 .tile:nth-of-type(5){
236 grid-row-end: 4;
237 grid-column-end:2;
238 }
239 }
240
......