Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
7e740cb2 by Jeff Balicki
Options

tiles 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 85045dfc
Inline Side-by-side
Showing 17 changed files with 397 additions and 99 deletions
1 .env
2 **/.DS_Store
3 /wp-content/uploads/*
1 <?php
2
3 /**
4 * Work Block Template.
5 *
6 * @param array $block The block settings and attributes.
7 * @param string $content The block inner HTML (empty).
8 * @param bool $is_preview True during AJAX preview.
9 * @param (int|string) $post_id The post ID this block is saved to.
10 */
11
12 ?>
13 <?php if( have_rows('work') ): ?>
14 <?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
15
16 <?php $i = 1; ?>
17 <div class="tiles">
18 <?php while( the_repeater_field('work') ): ?>
19 <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'); ?>);">
21 <div class="hover_content">
22 <?php the_sub_field('hover_text'); ?>
23 </div>
24 <div class="tile_content">
25 <?php the_sub_field('content'); ?>
26 </div>
27 </div>
28 </div>
29 <?php $i++; ?>
30 <?php endwhile; ?>
31 <br clear="both">
32 </div>
33 <?php endif; ?>
34
35
36
...@@ -15811,6 +15811,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15811,6 +15811,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15811 .the-work { 15811 .the-work {
15812 background-color: #333333; 15812 background-color: #333333;
15813 margin: 0px -25%; 15813 margin: 0px -25%;
15814 padding: 40px 0%;
15814 } 15815 }
15815 .the-work h2, .the-work .h2 { 15816 .the-work h2, .the-work .h2 {
15816 text-transform: uppercase; 15817 text-transform: uppercase;
...@@ -15819,58 +15820,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15819,58 +15820,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15819 line-height: 72px; 15820 line-height: 72px;
15820 font-weight: 400; 15821 font-weight: 400;
15821 margin-bottom: 20px; 15822 margin-bottom: 20px;
15823 padding: 0px 2%;
15822 } 15824 }
15823 .the-work p:first-of-type { 15825 .the-work p.first-of-type {
15824 color: #fff; 15826 color: #fff;
15825 font-size: 20px; 15827 font-size: 20px;
15826 line-height: 24px; 15828 line-height: 24px;
15827 } 15829 padding: 0px 20%;
15828
15829 .tiles {
15830 display: grid;
15831 grid-template-columns: auto auto auto;
15832 -moz-column-width: 33%;
15833 column-width: 33%;
15834 -moz-column-gap: 0px;
15835 column-gap: 0px;
15836 grid-auto-flow: dense;
15837 grid-template-rows: masonry;
15838 }
15839
15840 .tile {
15841 display: inline-grid;
15842 margin: 0px;
15843 cursor: pointer;
15844 font-size: 40px;
15845 text-align: center;
15846 background-color: #eee;
15847 vertical-align: top;
15848 height: 220px;
15849 grid-column-end: span 1;
15850 grid-row-end: span 1;
15851 }
15852
15853 .tile:hover {
15854 background-color: #f5f5cd;
15855 }
15856
15857 .tile.expand {
15858 background-color: #ccc;
15859 grid-column-end: span 2;
15860 grid-row-end: span 2;
15861 height: 440px;
15862 }
15863
15864 .tile.expand:hover {
15865 background-color: #999;
15866 }
15867
15868 .last-expand .tile:nth-of-type(7) {
15869 grid-column-end: 4;
15870 }
15871 .last-expand .tile:nth-of-type(8) {
15872 grid-row-end: 4;
15873 grid-column-end: 4;
15874 } 15830 }
15875 15831
15876 .wp-block-getwid-tabs__nav-link { 15832 .wp-block-getwid-tabs__nav-link {
...@@ -15959,4 +15915,76 @@ body.understrap-no-sidebar .wp-block-cover.alignwide { ...@@ -15959,4 +15915,76 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
15959 text-align: center; 15915 text-align: center;
15960 } 15916 }
15961 15917
15918 .tiles {
15919 display: grid;
15920 grid-template-columns: auto auto auto;
15921 -moz-column-width: 33%;
15922 column-width: 33%;
15923 -moz-column-gap: 0px;
15924 column-gap: 0px;
15925 grid-auto-flow: dense;
15926 grid-template-rows: masonry;
15927 margin-top: 40px;
15928 max-width: 100vw;
15929 margin: auto;
15930 transition: 0.5s;
15931 background: #333;
15932 }
15933
15934 .tile {
15935 display: inline-grid;
15936 margin: 0px;
15937 cursor: pointer;
15938 text-align: center;
15939 background: #333;
15940 vertical-align: top;
15941 grid-column-end: span 1;
15942 grid-row-end: span 1;
15943 }
15944 .tile .tile_image {
15945 background-size: cover;
15946 background-position: center;
15947 background-repeat: no-repeat;
15948 height: 275px;
15949 width: 100%;
15950 }
15951 .tile .hover_content {
15952 opacity: 0;
15953 }
15954 .tile .tile_content {
15955 display: none;
15956 }
15957
15958 .tile:hover .hover_content {
15959 opacity: 1;
15960 background-color: rgba(0, 0, 0, 0.6);
15961 height: 100%;
15962 }
15963
15964 .tile.expand {
15965 grid-column-end: span 2;
15966 grid-row-end: span 2;
15967 }
15968 .tile.expand .hover_content {
15969 display: none;
15970 }
15971 .tile.expand .tile_content {
15972 margin-top: -16px;
15973 display: block;
15974 height: 100%;
15975 background-color: rgba(0, 0, 0, 0.7);
15976 }
15977 .tile.expand .tile_image {
15978 height: 550px;
15979 }
15980
15981 .tile.expand:hover .hover_content {
15982 display: none;
15983 }
15984 .tile.expand:hover .tile_content {
15985 display: block;
15986 height: 100%;
15987 background-color: rgba(0, 0, 0, 0.7);
15988 }
15989
15962 /*# sourceMappingURL=child-theme.css.map */ 15990 /*# 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.
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 // Exit if accessed directly. 8 // Exit if accessed directly.
9 defined( 'ABSPATH' ) || exit; 9 defined( 'ABSPATH' ) || exit;
10 10 include 'inc/blocks.php';
11 11
12 12
13 /** 13 /**
......
1 <?php
2
3 // Exit if accessed directly.
4 defined( 'ABSPATH' ) || exit;
5
6
7
8 add_action('acf/init', 'my_acf_init_block_types');
9 function my_acf_init_block_types() {
10
11 // Check function exists.
12 if( function_exists('acf_register_block_type') ) {
13
14 acf_register_block_type( array(
15 'title' => __( 'Work', 'client_textdomain' ),
16 'name' => 'carousel',
17 'render_template' => 'blocks/work/work.php',
18 'mode' => 'edit',
19 'supports' => [
20 'align' => false,
21 'anchor' => true,
22 'customClassName' => true
23 ]
24 ));
25
26 }
27 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -14643,6 +14643,9 @@ ...@@ -14643,6 +14643,9 @@
14643 }; 14643 };
14644 _getGSAP() && gsap.registerPlugin(ScrollTrigger); 14644 _getGSAP() && gsap.registerPlugin(ScrollTrigger);
14645 14645
14646 //const grid = document.querySelector(".tiles");
14647 //wrapGrid(grid);
14648
14646 //const scroll = new LocomotiveScroll(); 14649 //const scroll = new LocomotiveScroll();
14647 14650
14648 document.addEventListener("DOMContentLoaded", function () { 14651 document.addEventListener("DOMContentLoaded", function () {
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -1199,6 +1199,38 @@ ...@@ -1199,6 +1199,38 @@
1199 "fastq": "^1.6.0" 1199 "fastq": "^1.6.0"
1200 } 1200 }
1201 }, 1201 },
1202 "@popmotion/easing": {
1203 "version": "1.0.2",
1204 "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
1205 "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
1206 },
1207 "@popmotion/popcorn": {
1208 "version": "0.4.4",
1209 "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
1210 "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
1211 "requires": {
1212 "@popmotion/easing": "^1.0.1",
1213 "framesync": "^4.0.1",
1214 "hey-listen": "^1.0.8",
1215 "style-value-types": "^3.1.7",
1216 "tslib": "^1.10.0"
1217 },
1218 "dependencies": {
1219 "framesync": {
1220 "version": "4.1.0",
1221 "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
1222 "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
1223 "requires": {
1224 "hey-listen": "^1.0.5"
1225 }
1226 },
1227 "tslib": {
1228 "version": "1.14.1",
1229 "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
1230 "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
1231 }
1232 }
1233 },
1202 "@popperjs/core": { 1234 "@popperjs/core": {
1203 "version": "2.11.6", 1235 "version": "2.11.6",
1204 "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", 1236 "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
...@@ -1307,6 +1339,19 @@ ...@@ -1307,6 +1339,19 @@
1307 "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", 1339 "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
1308 "dev": true 1340 "dev": true
1309 }, 1341 },
1342 "@types/lodash": {
1343 "version": "4.14.191",
1344 "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
1345 "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
1346 },
1347 "@types/lodash.throttle": {
1348 "version": "4.1.7",
1349 "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz",
1350 "integrity": "sha512-znwGDpjCHQ4FpLLx19w4OXDqq8+OvREa05H89obtSyXyOFKL3dDjCslsmfBz0T2FU8dmf5Wx1QvogbINiGIu9g==",
1351 "requires": {
1352 "@types/lodash": "*"
1353 }
1354 },
1310 "@types/node": { 1355 "@types/node": {
1311 "version": "18.11.11", 1356 "version": "18.11.11",
1312 "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz", 1357 "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
...@@ -1341,6 +1386,18 @@ ...@@ -1341,6 +1386,18 @@
1341 "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", 1386 "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
1342 "dev": true 1387 "dev": true
1343 }, 1388 },
1389 "animate-css-grid": {
1390 "version": "1.5.1",
1391 "resolved": "https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.5.1.tgz",
1392 "integrity": "sha512-Bw48dm3kjJshSO8TY6PtWJ7gvXluh2ad97zPiNu1jTRyRywAzsbKlwG45byL9cJ/x9N126rkU5U9y1jzHK8ttQ==",
1393 "requires": {
1394 "@popmotion/easing": "^1.0.2",
1395 "@types/lodash.throttle": "^4.1.7",
1396 "framesync": "^6.1.2",
1397 "lodash.throttle": "^4.1.1",
1398 "popmotion": "^8.7.6"
1399 }
1400 },
1344 "ansi-regex": { 1401 "ansi-regex": {
1345 "version": "5.0.1", 1402 "version": "5.0.1",
1346 "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", 1403 "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
...@@ -2147,6 +2204,14 @@ ...@@ -2147,6 +2204,14 @@
2147 "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", 2204 "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
2148 "dev": true 2205 "dev": true
2149 }, 2206 },
2207 "framesync": {
2208 "version": "6.1.2",
2209 "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
2210 "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
2211 "requires": {
2212 "tslib": "2.4.0"
2213 }
2214 },
2150 "fresh": { 2215 "fresh": {
2151 "version": "0.5.2", 2216 "version": "0.5.2",
2152 "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 2217 "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
...@@ -2362,6 +2427,11 @@ ...@@ -2362,6 +2427,11 @@
2362 "has-symbols": "^1.0.2" 2427 "has-symbols": "^1.0.2"
2363 } 2428 }
2364 }, 2429 },
2430 "hey-listen": {
2431 "version": "1.0.8",
2432 "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
2433 "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
2434 },
2365 "hosted-git-info": { 2435 "hosted-git-info": {
2366 "version": "2.8.9", 2436 "version": "2.8.9",
2367 "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", 2437 "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
...@@ -2798,6 +2868,11 @@ ...@@ -2798,6 +2868,11 @@
2798 "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==", 2868 "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==",
2799 "dev": true 2869 "dev": true
2800 }, 2870 },
2871 "lodash.throttle": {
2872 "version": "4.1.1",
2873 "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
2874 "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
2875 },
2801 "magic-string": { 2876 "magic-string": {
2802 "version": "0.26.7", 2877 "version": "0.26.7",
2803 "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", 2878 "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
...@@ -3199,6 +3274,35 @@ ...@@ -3199,6 +3274,35 @@
3199 "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", 3274 "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
3200 "dev": true 3275 "dev": true
3201 }, 3276 },
3277 "popmotion": {
3278 "version": "8.7.6",
3279 "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-8.7.6.tgz",
3280 "integrity": "sha512-gzU0mRAik8FIEOP4Nk5yqYptJIvHLoq/IRU+rANmKjDZ7tynAivYQ9cIJAxVaoS9h0zfXvN0cFBAg93ncmHHkA==",
3281 "requires": {
3282 "@popmotion/easing": "^1.0.1",
3283 "@popmotion/popcorn": "^0.4.4",
3284 "framesync": "^4.0.0",
3285 "hey-listen": "^1.0.5",
3286 "style-value-types": "^3.1.7",
3287 "stylefire": "^7.0.1",
3288 "tslib": "^1.10.0"
3289 },
3290 "dependencies": {
3291 "framesync": {
3292 "version": "4.1.0",
3293 "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
3294 "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
3295 "requires": {
3296 "hey-listen": "^1.0.5"
3297 }
3298 },
3299 "tslib": {
3300 "version": "1.14.1",
3301 "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
3302 "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
3303 }
3304 }
3305 },
3202 "portscanner": { 3306 "portscanner": {
3203 "version": "2.2.0", 3307 "version": "2.2.0",
3204 "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz", 3308 "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
...@@ -4027,6 +4131,49 @@ ...@@ -4027,6 +4131,49 @@
4027 "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", 4131 "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
4028 "dev": true 4132 "dev": true
4029 }, 4133 },
4134 "style-value-types": {
4135 "version": "3.2.0",
4136 "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz",
4137 "integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==",
4138 "requires": {
4139 "hey-listen": "^1.0.8",
4140 "tslib": "^1.10.0"
4141 },
4142 "dependencies": {
4143 "tslib": {
4144 "version": "1.14.1",
4145 "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
4146 "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
4147 }
4148 }
4149 },
4150 "stylefire": {
4151 "version": "7.0.3",
4152 "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz",
4153 "integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==",
4154 "requires": {
4155 "@popmotion/popcorn": "^0.4.4",
4156 "framesync": "^4.0.0",
4157 "hey-listen": "^1.0.8",
4158 "style-value-types": "^3.1.7",
4159 "tslib": "^1.10.0"
4160 },
4161 "dependencies": {
4162 "framesync": {
4163 "version": "4.1.0",
4164 "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
4165 "integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
4166 "requires": {
4167 "hey-listen": "^1.0.5"
4168 }
4169 },
4170 "tslib": {
4171 "version": "1.14.1",
4172 "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
4173 "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
4174 }
4175 }
4176 },
4030 "supports-color": { 4177 "supports-color": {
4031 "version": "5.5.0", 4178 "version": "5.5.0",
4032 "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 4179 "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
...@@ -4161,6 +4308,11 @@ ...@@ -4161,6 +4308,11 @@
4161 "nopt": "~1.0.10" 4308 "nopt": "~1.0.10"
4162 } 4309 }
4163 }, 4310 },
4311 "tslib": {
4312 "version": "2.4.0",
4313 "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
4314 "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
4315 },
4164 "typescript": { 4316 "typescript": {
4165 "version": "4.9.3", 4317 "version": "4.9.3",
4166 "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz", 4318 "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
......
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
42 }, 42 },
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "animate-css-grid": "^1.5.1",
45 "gsap": "^3.11.4", 46 "gsap": "^3.11.4",
46 "locomotive-scroll": "^4.1.4" 47 "locomotive-scroll": "^4.1.4"
47 }, 48 },
......
...@@ -4,6 +4,10 @@ import ScrollTrigger from "gsap/ScrollTrigger"; ...@@ -4,6 +4,10 @@ import ScrollTrigger from "gsap/ScrollTrigger";
4 import ScrollToPlugin from "gsap/ScrollToPlugin"; 4 import ScrollToPlugin from "gsap/ScrollToPlugin";
5 import "_count-up"; 5 import "_count-up";
6 6
7 import { wrapGrid } from 'animate-css-grid'
8
9 //const grid = document.querySelector(".tiles");
10 //wrapGrid(grid);
7 11
8 //const scroll = new LocomotiveScroll(); 12 //const scroll = new LocomotiveScroll();
9 13
......
...@@ -15,4 +15,5 @@ ...@@ -15,4 +15,5 @@
15 @import "theme/menu"; 15 @import "theme/menu";
16 @import "theme/body"; 16 @import "theme/body";
17 @import "theme/footer"; 17 @import "theme/footer";
18 @import "theme/tabs";
...\ No newline at end of file ...\ No newline at end of file
18 @import "theme/tabs";
19 @import "theme/tiles";
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -282,7 +282,7 @@ ...@@ -282,7 +282,7 @@
282 .the-work{ 282 .the-work{
283 background-color: #333333; 283 background-color: #333333;
284 margin: 0px -25%; 284 margin: 0px -25%;
285 //padding: 40px 25%; 285 padding: 40px 0%;
286 h2{ 286 h2{
287 text-transform: uppercase; 287 text-transform: uppercase;
288 color: #fff; 288 color: #fff;
...@@ -290,57 +290,12 @@ ...@@ -290,57 +290,12 @@
290 line-height: 72px; 290 line-height: 72px;
291 font-weight: 400; 291 font-weight: 400;
292 margin-bottom: 20px; 292 margin-bottom: 20px;
293 padding: 0px 2%;
293 } 294 }
294 p:first-of-type{ 295 p.first-of-type{
295 color: #fff; 296 color: #fff;
296 font-size: 20px; 297 font-size: 20px;
297 line-height: 24px; 298 line-height: 24px;
298 } 299 padding: 0px 20%;
299 }
300 .tiles{
301 display: grid;
302 grid-template-columns: auto auto auto;
303 column-width: 33%;
304 column-gap: 0px;
305 grid-auto-flow: dense;
306 grid-template-rows: masonry;
307 }
308 .tile {
309 display: inline-grid;
310 margin: 0px;
311 cursor: pointer;
312 font-size: 40px;
313 text-align: center;
314 background-color: #eee;
315 vertical-align: top;
316 height: 220px;
317 grid-column-end: span 1;
318 grid-row-end: span 1;
319 }
320 .tile:hover {
321 background-color: #f5f5cd;
322 }
323
324 .tile.expand {
325 background-color: #ccc;
326 grid-column-end: span 2;
327 grid-row-end: span 2;
328 height: 440px;
329 }
330 .tile.expand:hover {
331 background-color: #999;
332 }
333
334 .last-expand{
335 .tile:nth-of-type(7){
336 //grid-column-end: 3;
337 // grid-row-end: 3;
338 grid-column-end:4;
339 }
340
341 .tile:nth-of-type(8){
342 //grid-column-end: 3;
343 grid-row-end: 4;
344 grid-column-end:4;
345 } 300 }
346 } 301 }
......
1 .tiles{
2 display: grid;
3 grid-template-columns: auto auto auto;
4 column-width: 33%;
5 column-gap: 0px;
6 grid-auto-flow: dense;
7 grid-template-rows: masonry;
8 margin-top: 40px;
9 max-width: 100vw;
10 margin: auto;
11 transition: .5s;
12 background: #333;
13 }
14 .tile {
15 display: inline-grid;
16 margin: 0px;
17 cursor: pointer;
18 text-align: center;
19 background: #333;
20 vertical-align: top;
21 grid-column-end: span 1;
22 grid-row-end: span 1;
23 .tile_image{
24 background-size: cover;
25 background-position: center;
26 background-repeat: no-repeat;
27 height: 275px;
28 width: 100%;
29 }
30 .hover_content{
31 opacity: 0;
32 }
33 .tile_content{
34 display: none;
35 }
36 }
37
38
39 .tile:hover {
40 .hover_content{
41 opacity: 1;
42 background-color: rgba(0,0,0,0.6);
43 height: 100%;
44 }
45 }
46
47
48
49
50 .tile.expand {
51 grid-column-end: span 2;
52 grid-row-end: span 2;
53 .hover_content{
54 display: none;
55 }
56 .tile_content{
57 margin-top: -16px;
58 display: block;
59 height: 100%;
60 background-color: rgba(0,0,0,0.7);
61 }
62 .tile_image{
63 height: 550px;
64 }
65 }
66
67 .tile.expand:hover {
68 .hover_content{
69 display: none;
70 }
71 .tile_content{
72 display: block;
73 height: 100%;
74 background-color: rgba(0,0,0,0.7);
75 }
76 }
77
78 // .last-expand{
79 // .tile:nth-of-type(4){
80
81 // grid-column-end:2;
82 // }
83
84 // .tile:nth-of-type(5){
85 // grid-row-end: 4;
86 // grid-column-end:2;
87 // }
88 // }