Merge branch 'Redesign'
commit
a0d9de9a4f
@ -0,0 +1,48 @@
|
|||||||
|
.top_buffer {
|
||||||
|
margin-bottom: 10px; }
|
||||||
|
|
||||||
|
.wide {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #eaeaea;
|
||||||
|
position: relative;
|
||||||
|
background-clip: content-box; }
|
||||||
|
.wide .image {
|
||||||
|
border-color: #FF1E90; }
|
||||||
|
|
||||||
|
.tall {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #eaeaea;
|
||||||
|
background-clip: content-box; }
|
||||||
|
.tall .image {
|
||||||
|
border-color: #FF1E90; }
|
||||||
|
.tall .description {
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.wide .image {
|
||||||
|
width: 75%;
|
||||||
|
float: left;
|
||||||
|
border-style: none solid none none; }
|
||||||
|
.wide .description {
|
||||||
|
margin-left: 76%;
|
||||||
|
text-align: left; }
|
||||||
|
|
||||||
|
.tall .image {
|
||||||
|
border-style: none none solid; }
|
||||||
|
.tall .description {
|
||||||
|
text-align: center; } }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.wide .image {
|
||||||
|
border-style: none none solid; }
|
||||||
|
.wide .image img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; }
|
||||||
|
|
||||||
|
.tall .image {
|
||||||
|
border-style: none none solid; }
|
||||||
|
.tall .description {
|
||||||
|
text-align: center; } }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=grid.css.map */
|
||||||
@ -1,106 +0,0 @@
|
|||||||
/* Rules for the grid icons and stuff */
|
|
||||||
.grid {
|
|
||||||
transition: 0.2s all;
|
|
||||||
position: relative; }
|
|
||||||
|
|
||||||
.grid-item-padding {
|
|
||||||
padding: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: fit-content; }
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
background-color: #eaeaea;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 5px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: 0.25s ease-in-out;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative; }
|
|
||||||
.grid-item img {
|
|
||||||
width: inherit; }
|
|
||||||
.grid-item img::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 100%; }
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.grid-sizer, .grid-item--std {
|
|
||||||
width: 25%; }
|
|
||||||
|
|
||||||
.grid-item--wide {
|
|
||||||
width: 50%; } }
|
|
||||||
@media (min-width: 768px) and (max-width: 991px) {
|
|
||||||
.grid-item--std, .grid-sizer {
|
|
||||||
width: 50%; }
|
|
||||||
|
|
||||||
.grid-item--wide {
|
|
||||||
width: 100%; } }
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.grid-item--std, .grid-sizer {
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
.grid-item--wide {
|
|
||||||
width: 100%; } }
|
|
||||||
/* Rules for the overlay */
|
|
||||||
.service-wrapper-inner {
|
|
||||||
height: 100%;
|
|
||||||
width: 90%;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
top: 71%;
|
|
||||||
padding: 10px 15px;
|
|
||||||
transition: 0.2s ease; }
|
|
||||||
.service-wrapper-inner p {
|
|
||||||
color: #e7e7e7; }
|
|
||||||
.service-wrapper-inner.notitle {
|
|
||||||
width: 60%;
|
|
||||||
top: 76%; }
|
|
||||||
|
|
||||||
.service-overlay {
|
|
||||||
background-color: rgba(32, 32, 32, 0.4);
|
|
||||||
width: 120%;
|
|
||||||
height: 120%;
|
|
||||||
position: absolute;
|
|
||||||
top: 68%;
|
|
||||||
left: -28px;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.2s ease; }
|
|
||||||
.service-overlay.notitle {
|
|
||||||
clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%);
|
|
||||||
height: 200%; }
|
|
||||||
.service-overlay.title {
|
|
||||||
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
|
|
||||||
|
|
||||||
.grid-item:hover .service-wrapper-inner {
|
|
||||||
top: -10%;
|
|
||||||
padding: 15px 15px; }
|
|
||||||
.grid-item:hover .service-wrapper-inner.notitle {
|
|
||||||
padding: 10px 15px; }
|
|
||||||
.grid-item:hover .service-overlay {
|
|
||||||
background-color: rgba(32, 32, 32, 0.8); }
|
|
||||||
.grid-item:hover .service-overlay.title {
|
|
||||||
top: -10%;
|
|
||||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
|
|
||||||
.grid-item:hover .service-overlay.notitle {
|
|
||||||
top: -20%;
|
|
||||||
clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);
|
|
||||||
left: -20%; }
|
|
||||||
|
|
||||||
img {
|
|
||||||
transition: 0.25s; }
|
|
||||||
|
|
||||||
.blur-me img {
|
|
||||||
filter: grayscale(0%) blur(0px) brightness(100%);
|
|
||||||
opacity: 1;
|
|
||||||
box-shadow: none; }
|
|
||||||
|
|
||||||
.unblur-me img {
|
|
||||||
filter: grayscale(0%) blur(0px) brightness(100%);
|
|
||||||
opacity: 1;
|
|
||||||
box-shadow: none; }
|
|
||||||
|
|
||||||
.grid:hover .grid-item:hover {
|
|
||||||
opacity: 1; }
|
|
||||||
|
|
||||||
/*# sourceMappingURL=masonry.css.map */
|
|
||||||
@ -1 +1,64 @@
|
|||||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3371.4 3853.02"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{clip-path:url(#clip-path-2);}</style><clipPath id="clip-path" transform="translate(-482.32 -164.33)"><rect id="SVGID" class="cls-1" x="182.67" y="121.07" width="1999.33" height="3484.89"/></clipPath><clipPath id="clip-path-2" transform="translate(-482.32 -164.33)"><rect id="SVGID-2" data-name="SVGID" class="cls-1" x="2179.58" y="164.33" width="1685.7" height="3858.67"/></clipPath></defs><g class="cls-2"><path d="M3147.2,3468.08V825.27a93.39,93.39,0,0,0-1.89-18.69,91.51,91.51,0,0,0-3.47-11.44c-.68-2-1.1-4.19-1.93-6.19a89.93,89.93,0,0,0-6.38-11.93c-.83-1.4-1.4-2.91-2.34-4.27a95.53,95.53,0,0,0-11.78-14.34L2553.32,192.32A95.53,95.53,0,0,0,2539,180.54c-1.36-.91-2.87-1.48-4.27-2.34a96,96,0,0,0-11.93-6.38c-2-.83-4.12-1.21-6.19-1.93a91.51,91.51,0,0,0-11.44-3.47,95.74,95.74,0,0,0-18.65-1.85H598.78A94.37,94.37,0,0,0,504.39,259V3468.08a94.38,94.38,0,0,0,94.39,94.38h2454A94.38,94.38,0,0,0,3147.2,3468.08ZM2580.88,486.84l244,244h-244Zm377.55,2886.85H693.16V353.34h1699V825.27a94.37,94.37,0,0,0,94.39,94.38h471.93Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,1136.06l-310.8,310.8-122-122A94.37,94.37,0,0,0,909.61,1458.3l188.77,188.77a94.35,94.35,0,0,0,133.46,0l377.55-377.55a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,1891.15l-310.8,310.79-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.78a94.34,94.34,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,2646.24,1165.09,2957l-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.77a94.32,94.32,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1825.8,1202.81a94.37,94.37,0,0,0,94.38,94.39h755.09a94.39,94.39,0,1,0,0-188.77H1920.18A94.36,94.36,0,0,0,1825.8,1202.81Z" transform="translate(-482.32 -164.33)"/><path d="M1920.18,1674.74h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2675.27,1863.51H1920.18a94.39,94.39,0,0,0,0,188.78h755.09a94.39,94.39,0,0,0,0-188.78Z" transform="translate(-482.32 -164.33)"/><path d="M1920.18,2429.83h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2675.27,2618.6H1920.18a94.39,94.39,0,0,0,0,188.77h755.09a94.39,94.39,0,1,0,0-188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2297.73,2996.15H1920.18a94.39,94.39,0,0,0,0,188.77h377.55a94.39,94.39,0,0,0,0-188.77Z" transform="translate(-482.32 -164.33)"/></g><g class="cls-3"><path d="M3458.79,164.33H877.26c-217.7,0-394.94,177.24-394.94,396.86V3165.84c0,219.62,177.24,396.86,394.94,396.86H3061.92l-102.1-356.41,246.59,229.26,233.11,215.77,414.2,366V561.19C3853.72,341.57,3676.48,164.33,3458.79,164.33Zm-743.64,2516s-69.35-82.84-127.15-156.05c252.38-71.28,348.7-229.26,348.7-229.26-79,52-154.12,88.62-221.55,113.67-96.32,40.45-188.8,67.43-279.34,82.84-184.95,34.68-354.48,25-499-1.93-109.81-21.19-204.21-52-283.2-82.84-44.31-17.34-92.47-38.53-140.63-65.5-5.78-3.85-11.56-5.78-17.34-9.63a26.89,26.89,0,0,1-7.71-5.78c-34.67-19.27-53.94-32.75-53.94-32.75s92.47,154.12,337.14,227.33c-57.79,73.2-129.08,159.9-129.08,159.9-425.75-13.49-587.58-292.83-587.58-292.83,0-620.34,277.42-1123.16,277.42-1123.16,277.41-208.06,541.35-202.28,541.35-202.28l19.26,23.11c-346.77,100.18-506.67,252.38-506.67,252.38s42.38-23.12,113.66-55.87c206.14-90.55,369.89-115.59,437.32-121.37,11.56-1.93,21.19-3.85,32.75-3.85a1629.78,1629.78,0,0,1,389.16-3.86c183,21.19,379.52,75.14,579.88,184.95,0,0-152.2-144.49-479.7-244.67l27-30.82s263.93-5.78,541.35,202.28c0,0,277.41,502.82,277.41,1123.16C3304.66,2387.53,3140.91,2666.87,2715.15,2680.36Zm-895.83-899.68c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.51-96.32,196.51-213.84,1.92-117.52-86.7-213.84-196.51-213.84m703.18,0c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.5-96.32,196.5-213.84s-86.69-213.84-196.5-213.84" transform="translate(-482.32 -164.33)"/></g></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 3897.4 3897.4" style="enable-background:new 0 0 3897.4 3897.4;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{clip-path:url(#SVGID_2_);}
|
||||||
|
.st1{clip-path:url(#SVGID_4_);}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_1_" x="-43.7" y="-19.4" width="1999" height="3485"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_2_">
|
||||||
|
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st0">
|
||||||
|
<path d="M2921.3,3327.2V684.3c0-6.3-0.6-12.5-1.9-18.7c-0.9-3.9-2.1-7.7-3.5-11.4c-0.7-2-1.1-4.2-1.9-6.2c-1.8-4.1-4-8.1-6.4-11.9
|
||||||
|
c-3.5-7-8.7-13-14.1-18.6c0,0-566.1-566.1-566.1-566.1c-4.4-4.4-9.2-8.3-14.3-11.8c-5.4-2.9-10.6-6.3-16.2-8.7
|
||||||
|
c-2-0.8-4.1-1.2-6.2-1.9c-3.7-1.4-7.6-2.6-11.4-3.5c-6.1-1.2-12.4-1.8-18.7-1.9c0,0-1887.9,0-1887.9,0
|
||||||
|
c-52.1,0-94.4,42.2-94.4,94.4c0,0,0,3209.2,0,3209.3c0,52.1,42.3,94.4,94.4,94.4c0,0,2454.2,0,2454.2,0
|
||||||
|
C2879.1,3421.6,2921.3,3379.3,2921.3,3327.2z M2354.3,345.6l244,244h-244V345.6z M2732.3,3232.6h-2265v-3020h1699
|
||||||
|
c0,0,0,471.6,0,471.6c0,52.1,42.2,94.4,94.3,94.4c0,0,471.7,0,471.7,0L2732.3,3232.6z"/>
|
||||||
|
<path d="M1249.3,995.3l-310.8,310.8l-122-122c-92-85-218.5,41.4-133.5,133.4l0,0c0,0,188.8,188.8,188.8,188.8
|
||||||
|
c36.8,36.9,96.6,36.9,133.4,0c0,0,377.6-377.6,377.6-377.6C1467,1036.9,1341.4,911,1249.3,995.3L1249.3,995.3z"/>
|
||||||
|
<path d="M1249.6,1750.4l-310.8,310.8c0,0-122-122-122-122c-92-85-218.5,41.5-133.5,133.5l0,0c0,0,188.8,188.8,188.8,188.8
|
||||||
|
c36.8,36.9,96.6,36.9,133.4,0c0,0,377.6-377.6,377.6-377.6C1467.3,1792.1,1341.7,1666.1,1249.6,1750.4L1249.6,1750.4z"/>
|
||||||
|
<path d="M1249.6,2505.5l-310.8,310.8c0,0-122-122-122-122c-36.9-36.9-96.6-36.9-133.5,0c-36.9,36.9-36.9,96.6,0,133.5
|
||||||
|
c0,0,188.8,188.8,188.8,188.8c36.8,36.9,96.6,36.9,133.5,0c0,0,377.6-377.5,377.6-377.5c36.7-37.1,36.4-96.8-0.7-133.5
|
||||||
|
C1345.6,2469,1286.4,2469,1249.6,2505.5L1249.6,2505.5z"/>
|
||||||
|
<path d="M1599.3,1062.2c0,52.2,42.3,94.4,94.5,94.4c0,0,756,0,756,0c52.2,0.5,94.9-41.3,95.5-93.5c0.5-52.2-41.3-94.9-93.5-95.5
|
||||||
|
c-0.5-0.3-757,0.2-758,0C1641.6,967.6,1599.3,1010,1599.3,1062.2z"/>
|
||||||
|
<path d="M1693.7,1534.6c0,0,378,0,378,0c124-6,124.1-182.9,0-189c0,0-378,0-378,0c-52.2,0.5-94.1,43.3-93.5,95.5
|
||||||
|
C1600.7,1492.5,1642.2,1534.1,1693.7,1534.6z"/>
|
||||||
|
<path d="M2449.4,1722.6c0,0-755,0-755,0c-50.1,0-92.3,38.6-95.3,88.6c-3.3,54.9,40.2,100.4,94.3,100.4c0,0,755,0,755,0
|
||||||
|
C2574.6,1906.9,2575.3,1727.9,2449.4,1722.6z"/>
|
||||||
|
<path d="M1693.7,2289.6c0,0,378,0,378,0c124-6,124.1-182.9,0-189c0,0-378,0-378,0c-52.2,0.5-94.1,43.3-93.5,95.5
|
||||||
|
C1600.7,2247.5,1642.2,2289.1,1693.7,2289.6z"/>
|
||||||
|
<path d="M2449.4,2477.6c0,0-756,0-756,0c-52.2,0.5-94.1,43.3-93.5,95.5c0.5,51.4,42.1,93,93.5,93.5c0,0,756,0,756,0
|
||||||
|
C2576,2662.6,2576.3,2481.7,2449.4,2477.6z"/>
|
||||||
|
<path d="M2071.7,2855.6c0,0-378,0-378,0c-124,6-124.1,182.9,0,189c0,0,378,0,378,0c52.2-0.5,94.1-43.3,93.5-95.5
|
||||||
|
C2164.7,2897.7,2123.1,2856.1,2071.7,2855.6z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_3_" x="1953.3" y="23.6" width="1685.7" height="3858.7"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_4_">
|
||||||
|
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
|
||||||
|
</clipPath>
|
||||||
|
<g class="st1">
|
||||||
|
<path d="M3232.5,23.6H651C433.3,23.6,256,200.8,256,420.4v2604.6c0,219.6,177.2,396.9,394.9,396.9h2184.7l-102.1-356.4
|
||||||
|
c119.4,111.2,360.1,334.6,479.7,445l414.2,366V420.4C3627.4,200.8,3450.2,23.6,3232.5,23.6z M2488.9,2539.6
|
||||||
|
c0,0-69.4-82.8-127.1-156.1c252.4-71.3,348.7-229.3,348.7-229.3c-79,52-154.1,88.6-221.6,113.7
|
||||||
|
c-400.2,170-844.7,122.8-1202.2-67.4c-5.8-3.9-11.6-5.8-17.3-9.6c-2.9-1.4-5.5-3.4-7.7-5.8c-34.7-19.3-53.9-32.8-53.9-32.8
|
||||||
|
s92.5,154.1,337.1,227.3c-57.8,73.2-129.1,159.9-129.1,159.9c-425.8-13.5-587.6-292.8-587.6-292.8
|
||||||
|
c0-620.3,277.4-1123.2,277.4-1123.2C1383,915.5,1647,921.3,1647,921.3l19.3,23.1c-346.8,100.2-506.7,252.4-506.7,252.4
|
||||||
|
c180.6-103.2,452.2-173.9,551-177.2c11.6-1.9,21.2-3.8,32.8-3.8c343.6-39.5,639.1,6,969,181.1c0,0-152.2-144.5-479.7-244.7
|
||||||
|
l27-30.8c0,0,263.9-5.8,541.3,202.3c0,0,277.4,502.8,277.4,1123.2C3078.4,2246.8,2914.6,2526.1,2488.9,2539.6L2488.9,2539.6z
|
||||||
|
M1593,1639.9c-109.8,0-196.5,96.3-196.5,213.8c11.4,283.8,382.9,283.6,393,0C1791.5,1736.2,1702.8,1639.9,1593,1639.9
|
||||||
|
M2296.2,1639.9c-109.8,0-196.5,96.3-196.5,213.8c11.4,283.8,382.9,283.6,393,0C2492.7,1736.2,2406,1639.9,2296.2,1639.9"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
@ -0,0 +1,77 @@
|
|||||||
|
@import "colors"
|
||||||
|
@import "breakpoint-helpers"
|
||||||
|
|
||||||
|
|
||||||
|
.row
|
||||||
|
|
||||||
|
.top_buffer
|
||||||
|
margin-bottom: 10px
|
||||||
|
|
||||||
|
|
||||||
|
.wide
|
||||||
|
width: auto
|
||||||
|
border-radius: 5px
|
||||||
|
background-color: $colorblind-item
|
||||||
|
position: relative
|
||||||
|
background-clip: content-box
|
||||||
|
|
||||||
|
.image
|
||||||
|
border-color: $colorblind-button-active
|
||||||
|
|
||||||
|
|
||||||
|
.tall
|
||||||
|
width: auto
|
||||||
|
border-radius: 5px
|
||||||
|
background-color: $colorblind-item
|
||||||
|
background-clip: content-box
|
||||||
|
|
||||||
|
|
||||||
|
.image
|
||||||
|
border-color: $colorblind-button-active
|
||||||
|
|
||||||
|
.description
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@include respond-above(md)
|
||||||
|
.wide
|
||||||
|
|
||||||
|
.image
|
||||||
|
width: 75%
|
||||||
|
float: left
|
||||||
|
border-style: none solid none none
|
||||||
|
|
||||||
|
|
||||||
|
.description
|
||||||
|
margin-left: 76%
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
.tall
|
||||||
|
|
||||||
|
.image
|
||||||
|
border-style: none none solid
|
||||||
|
|
||||||
|
.description
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
|
||||||
|
@include respond-below(md)
|
||||||
|
.wide
|
||||||
|
|
||||||
|
.image
|
||||||
|
border-style: none none solid
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
.tall
|
||||||
|
|
||||||
|
.image
|
||||||
|
border-style: none none solid
|
||||||
|
|
||||||
|
.description
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
@import "breakpoint-helpers"
|
|
||||||
@import "colors"
|
|
||||||
|
|
||||||
/* Rules for the grid icons and stuff
|
|
||||||
.grid
|
|
||||||
transition: .2s all
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.grid-item-padding
|
|
||||||
padding: 5px
|
|
||||||
box-sizing: border-box
|
|
||||||
height: fit-content
|
|
||||||
|
|
||||||
.grid-item
|
|
||||||
background-color: $colorblind-item
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 5px
|
|
||||||
width: 100%
|
|
||||||
box-sizing: border-box
|
|
||||||
transition: 0.25s ease-in-out
|
|
||||||
overflow: hidden
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
img
|
|
||||||
width: inherit
|
|
||||||
|
|
||||||
img::after
|
|
||||||
content: ""
|
|
||||||
display: block
|
|
||||||
padding-bottom: 100%
|
|
||||||
|
|
||||||
|
|
||||||
@include respond-above(md)
|
|
||||||
.grid-sizer, .grid-item--std
|
|
||||||
width: 25%
|
|
||||||
.grid-item--wide
|
|
||||||
width: 50%
|
|
||||||
@include respond-between(sm, md)
|
|
||||||
.grid-item--std, .grid-sizer
|
|
||||||
width: 50%
|
|
||||||
.grid-item--wide
|
|
||||||
width: 100%
|
|
||||||
@include respond-below(sm)
|
|
||||||
.grid-item--std, .grid-sizer
|
|
||||||
width: 100%
|
|
||||||
.grid-item--wide
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
/* Rules for the overlay
|
|
||||||
.service-wrapper-inner
|
|
||||||
height: 100%
|
|
||||||
width: 90%
|
|
||||||
position: absolute
|
|
||||||
z-index: 1
|
|
||||||
top: 71%
|
|
||||||
padding: 10px 15px
|
|
||||||
transition: 0.2s ease
|
|
||||||
|
|
||||||
p
|
|
||||||
color: #e7e7e7
|
|
||||||
|
|
||||||
&.notitle
|
|
||||||
width: 60%
|
|
||||||
top: 76%
|
|
||||||
|
|
||||||
.service-overlay
|
|
||||||
background-color: rgba(32, 32, 32, 0.4)
|
|
||||||
width: 120%
|
|
||||||
height: 120%
|
|
||||||
position: absolute
|
|
||||||
top: 68%
|
|
||||||
left: -28px
|
|
||||||
z-index: 0
|
|
||||||
transition: 0.2s ease
|
|
||||||
|
|
||||||
&.notitle
|
|
||||||
clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%)
|
|
||||||
height: 200%
|
|
||||||
|
|
||||||
&.title
|
|
||||||
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%)
|
|
||||||
|
|
||||||
|
|
||||||
.grid-item:hover
|
|
||||||
.service-wrapper-inner
|
|
||||||
top: -10%
|
|
||||||
padding: 15px 15px
|
|
||||||
|
|
||||||
&.notitle
|
|
||||||
padding: 10px 15px
|
|
||||||
|
|
||||||
.service-overlay
|
|
||||||
background-color: rgba(32, 32, 32, 0.8)
|
|
||||||
|
|
||||||
&.title
|
|
||||||
top: -10%
|
|
||||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
|
|
||||||
|
|
||||||
&.notitle
|
|
||||||
top: -20%
|
|
||||||
clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%)
|
|
||||||
left: -20%
|
|
||||||
|
|
||||||
img
|
|
||||||
transition: 0.25s
|
|
||||||
|
|
||||||
.blur-me
|
|
||||||
img
|
|
||||||
filter: grayscale(0%) blur(0px) brightness(100%)
|
|
||||||
opacity: 1
|
|
||||||
//transform: scale(.995)
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
|
|
||||||
.unblur-me
|
|
||||||
img
|
|
||||||
filter: grayscale(0%) blur(0px) brightness(100%)
|
|
||||||
opacity: 1
|
|
||||||
//transform: scale(.995)
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.grid:hover .grid-item:hover
|
|
||||||
//transform: scale(1.005)
|
|
||||||
opacity: 1
|
|
||||||
//box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
|
|
||||||
//filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3))
|
|
||||||
|
|
||||||
|
|
||||||
//.grid-img
|
|
||||||
// display: inline-block
|
|
||||||
// position: relative
|
|
||||||
// width: 230px
|
|
||||||
// height: 230px
|
|
||||||
//
|
|
||||||
//.grid-img:after
|
|
||||||
// content: ""
|
|
||||||
// position: absolute
|
|
||||||
// z-index: -1
|
|
||||||
// top: 0
|
|
||||||
// left: 0
|
|
||||||
// width: 100%
|
|
||||||
// height: 100%
|
|
||||||
// opacity: 0
|
|
||||||
// filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.125))
|
|
||||||
// transition: opacity 0.3s ease-in-out
|
|
||||||
//
|
|
||||||
///* Transition to showing the bigger shadow on hover */
|
|
||||||
//.grid-img:hover:after
|
|
||||||
// opacity: 1
|
|
||||||
Loading…
Reference in New Issue