:root {
font-size: calc(1rem + (24 - 16) * ( (100vw - 400px) / (1600 - 400)));
// cmyk
--cmyk-cyan: cyan; // #00FFFF
--cmyk-magenta: magenta; // #FF00FF
--cmyk-yellow: yellow; // #FFFF00
--cmyk-black: black; // #000000
--cmyk-white: white; // #FFFFFF
// color palette 1
--p1-1: #08327d;
--p1-2: #00aabb;
--p1-3: #ec6b2d;
--p1-4: #333333;
--p1-5: #0f0a01;
// color palette 2
--p2-1: #0b3536;
--p2-2: #0098d8;
--p2-3: #f54123;
--p2-4: #e5e7de;
--p2-5: #e7b300;
// color palette 3
--p3-1: #c7943e;
--p3-2: #558a86;
--p3-3: #2677bb;
--p3-4: #f67944;
--p3-5: #fbfbfb;
// color palette 4
--p4-1: #c2b4a6;
--p4-2: #e7b300;
--p4-3: #6e7f29;
--p4-4: #f45844;
--p4-5: #635045;
// color palette 5
--p5-1: #a63e14;
--p5-2: #2f292b;
--p5-3: #1aa9bc;
--p5-4: #457c39;
--p5-5: #e4e6dd;
// color palette 6
--p6-1: #0f0a01;
--p6-2: #00aabb;
--p6-3: #333333;
--p6-4: #558a86;
--p6-5: #08327d;
// color palette 7
--p7-1: #558a86;
--p7-2: #f0c24f;
--p7-3: #fe9f97;
--p7-4: #0095a3;
--p7-5: #635045;
}
// color palettes
.palette-cmyk {
.grid-item {
&:nth-child(1) {
background-color: var(--cmyk-cyan);
&::before {
color: mix(black, cyan, 50%);
content: "Cyan";
}
}
&:nth-child(2) {
background-color: var(--cmyk-magenta);
&::before {
color: mix(black, magenta, 40%);
content: "Magenta";
}
}
&:nth-child(3) {
background-color: var(--cmyk-yellow);
&::before {
color: mix(black, yellow, 30%);
content: "Yellow";
}
}
&:nth-child(4) {
background-color: var(--cmyk-black);
&::before {
color: #777;
content: "Black";
}
}
&:nth-child(5) {
background-color: var(--cmyk-white);
&::before {
color: #444;
content: "White";
}
}
}
}
.palette-1 {
.grid-item {
&:nth-child(1) {
background-color: var(--p1-1);
&::before {
color: #999;
content: "#08327d";
}
}
&:nth-child(2) {
background-color: var(--p1-2);
&::before {
color: mix(black, #00aabb, 45%);
content: "#00aabb";
}
}
&:nth-child(3) {
background-color: var(--p1-3);
&::before {
color: mix(black, #ec6b2d, 40%);
content: "#ec6b2d";
}
}
&:nth-child(4) {
background-color: var(--p1-4);
&::before {
color: #777;
content: "#333333";
}
}
&:nth-child(5) {
background-color: var(--p1-5);
&::before {
color: mix(white, #0f0a01, 45%);
content: "#0f0a01";
}
}
}
}
.palette-2 {
.grid-item {
&:nth-child(1) {
background-color: var(--p2-1);
&::before {
color: mix(white, #0b3536, 60%);
content: "#0b3536";
}
}
&:nth-child(2) {
background-color: var(--p2-2);
&::before {
color: mix(black, #0098d8, 30%);
content: "#0098d8";
}
}
&:nth-child(3) {
background-color: var(--p2-3);
&::before {
color: mix(black, #f54123, 35%);
content: "#f54123";
}
}
&:nth-child(4) {
background-color: var(--p2-4);
&::before {
color: mix(black, #e5e7de, 40%);
content: "#e5e7de";
}
}
&:nth-child(5) {
background-color: var(--p2-5);
&::before {
color: mix(black, #e7b300, 35%);
content: "#e7b300";
}
}
}
}
.palette-3 {
.grid-item {
&:nth-child(1) {
background-color: var(--p3-1);
&::before {
color: mix(black, #c7943e, 40%);
content: "#c7943e";
}
}
&:nth-child(2) {
background-color: var(--p3-2);
&::before {
color: mix(white, #558a86, 40%);
content: "#558a86";
}
}
&:nth-child(3) {
background-color: var(--p3-3);
&::before {
color: mix(white, #2677bb, 50%);
content: "#2677bb";
}
}
&:nth-child(4) {
background-color: var(--p3-4);
&::before {
color: mix(black, #f67944, 40%);
content: "#f67944";
}
}
&:nth-child(5) {
background-color: var(--p3-5);
&::before {
color: #777;
content: "#fbfbfb";
}
}
}
}
.palette-4 {
.grid-item {
&:nth-child(1) {
background-color: var(--p4-1);
&::before {
color: mix(black, #c2b4a6, 40%);
content: "#c2b4a6";
}
}
&:nth-child(2) {
background-color: var(--p4-2);
&::before {
color: mix(black, #e7b300, 40%);
content: "#e7b300";
}
}
&:nth-child(3) {
background-color: var(--p4-3);
&::before {
color: mix(white, #6e7f29, 50%);
content: "#6e7f29";
}
}
&:nth-child(4) {
background-color: var(--p4-4);
&::before {
color: mix(black, #f45844, 40%);
content: "#f45844";
}
}
&:nth-child(5) {
background-color: var(--p4-5);
&::before {
color: mix(white, #635045, 50%);
content: "#635045";
}
}
}
}
.palette-5 {
.grid-item {
&:nth-child(1) {
background-color: var(--p5-1);
&::before {
color: mix(white, #a63e14, 70%);
content: "#a63e14";
}
}
&:nth-child(2) {
background-color: var(--p5-2);
&::before {
color: mix(white, #2f292b, 70%);
content: "#2f292b";
}
}
&:nth-child(3) {
background-color: var(--p5-3);
&::before {
color: mix(black, #1aa9bc, 40%);
content: "#1aa9bc";
}
}
&:nth-child(4) {
background-color: var(--p5-4);
&::before {
color: mix(white, #457c39, 45%);
content: "#457c39";
}
}
&:nth-child(5) {
background-color: var(--p5-5);
&::before {
color: mix(black, #e4e6dd, 45%);
content: "#e4e6dd";
}
}
}
}
.palette-6 {
.grid-item {
&:nth-child(1) {
background-color: var(--p6-1);
&::before {
color: mix(white, #0f0a01, 70%);
content: "#0f0a01";
}
}
&:nth-child(2) {
background-color: var(--p6-2);
&::before {
color: mix(black, #00aabb, 40%);
content: "#2f292b";
}
}
&:nth-child(3) {
background-color: var(--p6-3);
&::before {
color: #999999;
content: "#333333";
}
}
&:nth-child(4) {
background-color: var(--p6-4);
&::before {
color: mix(black, #558a86, 40%);
content: "#558a86";
}
}
&:nth-child(5) {
background-color: var(--p6-5);
&::before {
color: mix(white, #08327d, 45%);
content: "#08327d";
}
}
}
}
.palette-7 {
.grid-item {
&:nth-child(1) {
background-color: var(--p7-1);
&::before {
color: mix(white, #558a86, 50%);
content: "#558a86";
}
}
&:nth-child(2) {
background-color: var(--p7-2);
&::before {
color: mix(black, #f0c24f, 30%);
content: "#f0c24f";
}
}
&:nth-child(3) {
background-color: var(--p7-3);
&::before {
color: mix(black, #fe9f97, 40%);
content: "#fe9f97";
}
}
&:nth-child(4) {
background-color: var(--p7-4);
&::before {
color: mix(white, #0095a3, 45%);
content: "#0095a3";
}
}
&:nth-child(5) {
background-color: var(--p7-5);
&::before {
color: mix(white, #635045, 35%);
content: "#635045";
}
}
}
}
// layout
body {
display: flex;
flex-direction: column;
height: 100vh;
}
img {
line-height: 0;
max-width: 100%;
}
.grid {
display: grid;
grid-gap: 0;
flex-grow: 1;
flex-shrink: 0;
height: 100vh;
width: 100%;
> * {
@include fade-in;
counter-increment: grid-items;
display: flex;
align-items: center;
letter-spacing: .1em;
justify-content: center;
text-align: center;
transition: .4s ease;
&::before {
opacity: 0;
content: counter(grid-items);
font-family: $Montserrat;
text-transform: uppercase;
font-size: 1.75em;
transition: opacity .4s;
}
}
@media (min-width: 20em) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 40em) {
//grid-template-columns: 2fr 1fr 1fr 2fr;
//grid-template-rows: 2fr 1fr 1fr 2fr;
}
@media (min-width: 60em) {
grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
grid-template-rows: 2fr 1fr 1fr 1fr 2fr;
}
}
.info-visible {
.grid-item::before {
opacity: 1;
}
}
.grid-item {
background-color: rgba(black, .15);
transition: .4s ease;
@media (min-width: 20em) {
grid-column: span 1;
&:nth-child(3) {
grid-column: span 2;
}
}
// @media (min-width: 40em) {
// &:nth-child(1) {
// grid-column: 1 / 3;
// grid-row: 1 / 3;
// }
// &:nth-child(2) {
// grid-column: 3 / 5;
// grid-row: 1 / 3;
// }
// &:nth-child(3) {
// //grid-column: 1 / 3;
// grid-row: 3 / 5;
// }
// &:nth-child(4) {
// grid-column: 3 / 5;
// grid-row: 3 / 5;
// }
// &:nth-child(5) {
// //clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
// //clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
// grid-column: 2 / 4;
// grid-row: 2 / 4;
// //padding: 4rem;
// }
@media (min-width: 60em) {
&:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 4;
}
&:nth-child(2) {
grid-column: 4 / 6;
grid-row: 1 / 2;
}
&:nth-child(3) {
grid-column: 1 / 4;
grid-row: 4 / 6;
}
&:nth-child(4) {
grid-column: 4 / 6;
grid-row: 2 / 4;
}
&:nth-child(5) {
grid-column: 4 / 6;
grid-row: 4 / 6;
}
}
}
.control-button {
background-color: rgba(black, .25);
color: white;
display: flex;
flex-direction: column;
opacity: .75;
margin-top: -1em;
padding: .75em .5em;
position: fixed;
top: 50%;
left: 0;
transition: .4s ease;
z-index: 1;
&:hover, &.active, &:active {
background-color: rgba(black, .4);
opacity: 1;
}
label, select {
color: currentColor;
}
label {
margin: 0;
}
}
@mixin button-icon {
position: absolute;
width: 2rem;
height: 2rem;
margin-top: -1rem;
margin-left: -1rem;
top: 50%;
left: 50%;
}
.info-toggle {
right: 0;
left: auto;
.icon {
flex-grow: 1;
height: 1.875rem;
width: 1.875rem;
margin-right: 0;
top: 0;
}
}
.dropdown {
display: block;
margin-top: 0;
position: relative;
padding: 0;
select {
background: none;
border: none;
color: transparent;
padding: 0;
width: 2rem;
margin: 0;
outline: none;
/* Remove select styling */
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
/* Magic font size number to prevent iOS text zoom */
font-size: 1.25em;
/* General select styles: change as needed */
font-weight: bold;
line-height: 1.3;
position: relative;
&:focus {
box-shadow: none;
border: none;
//color: initial;
outline: none;
}
}
&::after {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/icon-palette-white.svg") 0 0 no-repeat;
@include button-icon;
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
content: "";
position: absolute;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events: none;
}
&:hover {
border: none;
}
}
/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.dropdown select::-ms-expand {
display: none;
}
/* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
select:focus::-ms-value {
background: transparent;
color: #222;
}
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
View Compiled