Skip to content

Commit 99bb368

Browse files
axe-naxe-n
authored
Update main.css - tiles
1 parent ea271ab commit 99bb368

File tree

1 file changed

+203
-12
lines changed

1 file changed

+203
-12
lines changed

‎assets/css/main.css

+203-12
Original file line numberDiff line numberDiff line change
@@ -2534,6 +2534,197 @@ input, select, textarea {
25342534

25352535
}
25362536

2537+
/* Tiles */
2538+
2539+
.tiles {
2540+
display: -moz-flex;
2541+
display: -webkit-flex;
2542+
display: -ms-flex;
2543+
display: flex;
2544+
-moz-flex-wrap: wrap;
2545+
-webkit-flex-wrap: wrap;
2546+
-ms-flex-wrap: wrap;
2547+
flex-wrap: wrap;
2548+
border-top: 0 !important;
2549+
}
2550+
2551+
.tiles + * {
2552+
border-top: 0 !important;
2553+
}
2554+
2555+
.tiles article {
2556+
-moz-align-items: center;
2557+
-webkit-align-items: center;
2558+
-ms-align-items: center;
2559+
align-items: center;
2560+
display: -moz-flex;
2561+
display: -webkit-flex;
2562+
display: -ms-flex;
2563+
display: flex;
2564+
-moz-transition: -moz-transform 0.25s ease, opacity 0.25s ease, -moz-filter 1s ease, -webkit-filter 1s ease;
2565+
-webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease, -webkit-filter 1s ease, -webkit-filter 1s ease;
2566+
-ms-transition: -ms-transform 0.25s ease, opacity 0.25s ease, -ms-filter 1s ease, -webkit-filter 1s ease;
2567+
transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease;
2568+
padding: 4em 4em 2em 4em ;
2569+
background-position: center;
2570+
background-repeat: no-repeat;
2571+
background-size: cover;
2572+
cursor: default;
2573+
height: 40vh;
2574+
max-height: 40em;
2575+
min-height: 23em;
2576+
overflow: hidden;
2577+
position: relative;
2578+
width: 40%;
2579+
}
2580+
2581+
.tiles article .image {
2582+
display: none;
2583+
}
2584+
2585+
.tiles article header {
2586+
position: relative;
2587+
z-index: 3;
2588+
}
2589+
2590+
.tiles article h3 {
2591+
font-size: 1.75em;
2592+
}
2593+
2594+
.tiles article h3 a:hover {
2595+
color: inherit !important;
2596+
}
2597+
2598+
.tiles article .link.primary {
2599+
border: 0;
2600+
height: 100%;
2601+
left: 0;
2602+
position: absolute;
2603+
top: 0;
2604+
width: 100%;
2605+
z-index: 4;
2606+
}
2607+
2608+
.tiles article:before {
2609+
-moz-transition: opacity 0.5s ease;
2610+
-webkit-transition: opacity 0.5s ease;
2611+
-ms-transition: opacity 0.5s ease;
2612+
transition: opacity 0.5s ease;
2613+
bottom: 0;
2614+
content: '';
2615+
display: block;
2616+
height: 100%;
2617+
left: 0;
2618+
opacity: 0.85;
2619+
position: absolute;
2620+
width: 100%;
2621+
z-index: 2;
2622+
}
2623+
2624+
.tiles article:after {
2625+
background-color: rgba(36, 41, 67, 0.25);
2626+
content: '';
2627+
display: block;
2628+
height: 100%;
2629+
left: 0;
2630+
position: absolute;
2631+
top: 0;
2632+
width: 100%;
2633+
z-index: 1;
2634+
}
2635+
2636+
.tiles article:hover:before {
2637+
opacity: 0;
2638+
}
2639+
2640+
.tiles article.is-transitioning {
2641+
-moz-transform: scale(0.95);
2642+
-webkit-transform: scale(0.95);
2643+
-ms-transform: scale(0.95);
2644+
transform: scale(0.95);
2645+
-moz-filter: blur(0.5em);
2646+
-webkit-filter: blur(0.5em);
2647+
-ms-filter: blur(0.5em);
2648+
filter: blur(0.5em);
2649+
opacity: 0;
2650+
}
2651+
2652+
.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
2653+
width: 60%;
2654+
}
2655+
2656+
.tiles article:nth-child(6n - 5):before {
2657+
background-color: #6fc3df;
2658+
}
2659+
2660+
.tiles article:nth-child(6n - 4):before {
2661+
background-color: #8d82c4;
2662+
}
2663+
2664+
.tiles article:nth-child(6n - 3):before {
2665+
background-color: #ec8d81;
2666+
}
2667+
2668+
.tiles article:nth-child(6n - 2):before {
2669+
background-color: #e7b788;
2670+
}
2671+
2672+
.tiles article:nth-child(6n - 1):before {
2673+
background-color: #8ea9e8;
2674+
}
2675+
2676+
.tiles article:nth-child(6n):before {
2677+
background-color: #87c5a4;
2678+
}
2679+
2680+
@media screen and (max-width: 1280px) {
2681+
2682+
.tiles article {
2683+
padding: 4em 3em 2em 3em ;
2684+
height: 30vh;
2685+
max-height: 30em;
2686+
min-height: 20em;
2687+
}
2688+
2689+
}
2690+
2691+
@media screen and (max-width: 980px) {
2692+
2693+
.tiles article {
2694+
width: 50% !important;
2695+
}
2696+
2697+
}
2698+
2699+
@media screen and (max-width: 736px) {
2700+
2701+
.tiles article {
2702+
padding: 3em 1.5em 1em 1.5em ;
2703+
height: 16em;
2704+
max-height: none;
2705+
min-height: 0;
2706+
}
2707+
2708+
.tiles article h3 {
2709+
font-size: 1.5em;
2710+
}
2711+
2712+
}
2713+
2714+
@media screen and (max-width: 480px) {
2715+
2716+
.tiles {
2717+
display: block;
2718+
}
2719+
2720+
.tiles article {
2721+
height: 20em;
2722+
width: 100% !important;
2723+
}
2724+
2725+
}
2726+
2727+
25372728
/* Features */
25382729

25392730
.features {
@@ -3814,10 +4005,10 @@ input, select, textarea {
38144005

38154006
#main > header {
38164007
padding: 12em 0 10em 0 ;
3817-
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3818-
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3819-
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3820-
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
4008+
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4009+
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4010+
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4011+
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
38214012
background-attachment: fixed;
38224013
background-position: center center;
38234014
background-repeat: no-repeat;
@@ -3964,10 +4155,10 @@ input, select, textarea {
39644155
/* Landing */
39654156

39664157
body.landing #page-wrapper {
3967-
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3968-
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3969-
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3970-
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
4158+
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4159+
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4160+
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4161+
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
39714162
background-attachment: fixed;
39724163
background-position: center center;
39734164
background-repeat: no-repeat;
@@ -3985,10 +4176,10 @@ input, select, textarea {
39854176

39864177
body.is-mobile.landing #banner,
39874178
body.is-mobile.landing .wrapper.style4 {
3988-
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3989-
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3990-
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
3991-
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg");
4179+
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4180+
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4181+
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
4182+
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
39924183
background-position: center center;
39934184
background-repeat: no-repeat;
39944185
background-size: cover;

0 commit comments

Comments
 (0)