63 lines
1.1 KiB
CSS
63 lines
1.1 KiB
CSS
html {
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.panels {
|
|
overflow: hidden;
|
|
float: right;
|
|
|
|
width: 40% !important;
|
|
}
|
|
|
|
.panel {
|
|
background: #6B0F9C;
|
|
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
|
|
color: white;
|
|
transition:
|
|
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
|
|
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
|
|
background 0.2s;
|
|
font-size: 20px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel > * {
|
|
margin: 0;
|
|
width: 100%;
|
|
transition: transform 250ms;
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.panel > *:nth-child(2) { transform: translateX(100%);}
|
|
.panel.open-active > *:nth-child(2) { transform: translateX(0);}
|
|
.panel > *:last-child { transform: translateX(100%); }
|
|
.panel.open-active > *:last-child { transform: translateX(0); }
|
|
|
|
.panel p {
|
|
font-family: Lato, sans-serif;
|
|
color: white;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.panel p:nth-child(1) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.panel.open {
|
|
flex: 5;
|
|
font-size: 2em;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.panel p {
|
|
font-size: 0.8em;
|
|
}
|
|
}
|