Skip to content
Permalink
388cc80c3c
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
905 lines (810 sloc) 17 KB
/* ==========================================================================
LAYOUT STYLING (NOT PARTICLE RELATED)
========================================================================== */
body {
background-color: black;
width: 100vw;
}
#body-wrapper {
margin: 0 auto;
max-width: 750px;
text-align: center;
color: white;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
margin: 15px 15px;
}
h1 {
font-weight: 900;
}
h2 {
font-weight: 800;
}
h3 {
font-weight: 700;
}
a {
overflow-wrap: break-word;
word-wrap: break-word;
color: cyan;
}
header {
background: linear-gradient(#111,#1c0f3b);
height: 50vh;
min-height: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
#subtle {
background: -webkit-gradient(linear, left top, left bottom, from(#1c0f3b), color-stop(#4d1354), to(#1c0f3b));
background: linear-gradient(#1c0f3b 15%, #4d1354 50%, #1c0f3b 85%, #1a1819 100%);
height: 50vh;
min-height: 400px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
}
#fireworks {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/15/Sandiego_skyline_at_night.JPG");
background-size: cover;
background-position: top left;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-rows: 20px auto 1fr auto;
grid-template-columns: 1fr;
}
#insert1 {
grid-row: 1/2;
grid-column:1/-1;
align-self: center;
margin: 0 20px;
z-index: 1;
text-shadow: 2px 2px 4px #000000;
}
#insert2 {
background-color: #616e7a;
margin: 0px;
padding: 50px 20px;
text-shadow: 2px 2px 4px #000000;
}
#info1 {
background: linear-gradient(#1c0f3b, #4d1354);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#info2 {
background: linear-gradient(#4d1354, #1c0f3b);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#info2 h3 {
margin-top: 20px;
margin-bottom: 0;
text-decoration: underline;
}
ul, ol {
text-align: left;
margin-left: 10%;
margin-right: 10%;
}
ol li {
margin: 10px 0;
}
.copy {
padding: 50px;
}
#subtle h3 {
grid-row: 2/3;
grid-column: 1/2;
text-shadow: 2px 2px 4px #000000;
}
#fireworks h2 {
grid-row:2/3;
grid-column:1/2;
text-shadow: 2px 2px 4px #000000;
}
.attribution {
grid-row: -1/span1;
grid-column: 1/-1;
opacity: .5;
font-size: 9pt;
margin: 0 5px;
}
#button {
width: 120px;
height: auto;
position: relative;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: black;
padding: 20px 5px;
align-self: flex-start;
}
#button:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid white;
border-bottom: 13px solid transparent;
}
#button:hover {
cursor: pointer;
}
#rain {
background: #616e7a;
height: 50vh;
min-height: 400px;
display: grid;
grid-template-rows: 1fr auto 1fr auto;
grid-template-columns: 1fr 1fr 2fr;
}
#character-wrapper {
grid-row:2/-1;
grid-column: 1/3;
display: flex;
justify-content: flex-start;
margin: 0 20px;
}
svg {
align-self: flex-end;
}
#sad-girl {
height: 250px;
}
#happy-girl {
height: 220px;
}
#resources {
background-color: #1c0f3b;
}
#resources h3 {
margin-top: 40px;
}
#scss-demo img {
max-width:100vw;
}
#css-demo img {
max-width: 60vw;
}
@media (min-width: 750px) {
#scss-demo img {
max-width:650px;
}
#css-demo img {
max-width: 350px;
}
}
/* ==========================================================================
CHECKBOX HACK
========================================================================== */
.show {
display: none;
}
.hide {
display: block;
}
.switch { /*default rain attribute here*/
background: #cedcf2;
height: 10px;
width: 3px;
position: absolute;
}
@for $i from 1 through 50 {
.switch:nth-child(#{$i}) {
left: random($limit: 650)+50px;
animation: rain random()+.5s linear infinite;
transform: scale(random()*0.3 +0.8);
animation-fill-mode: backwards;
animation-delay: random()*2.5s !important;
}
}
#rainswitch {
display: none;
}
#rainswitch:checked ~ div > .show{
display: block;
}
#rainswitch:checked ~ div > .hide{
display: none;
}
#rainswitch:checked ~ .particle-container > .particle-rain1{ /*coin rain attributes here*/
background: url(../img/spinning-coin.gif);
background-size: cover;
background-position: center;
width: 30px;
height: 30px;
}
@for $i from 1 through 25 {
#rainswitch:checked ~ .particle-container > .particle-rain1:nth-child(#{$i}){ /*coin rain attributes here*/
transform: scale(random()*0.3 +0.8) rotate(random(10)+ 85deg);
animation: rain random()+1.5s linear infinite;
}
}
#rainswitch:checked ~ .particle-container > .particle-rain2{ /*dollar bill rain attributes here*/
background: url(../img/dollar.png);
background-size: cover;
background-position: center;
width: 80px;
height: 48px;
transform-origin: 0 -100px;
}
@for $i from 26 through 50 {
#rainswitch:checked ~ .particle-container > .particle-rain2:nth-child(#{$i}){ /*dollar bill rain attributes here*/
animation: rain random()*2 +3s linear infinite, sway 3s linear alternate infinite;
}
}
/* ==========================================================================
PARTICLE-RELATED STYLES & ANIMATION
========================================================================== */
.particle-container {
overflow: hidden;
height: 100%;
grid-row: 1/4;
grid-column: 1/-1;
position: relative;
}
.particle-subtle {
position: absolute;
border-radius: 50%;
margin: 15px;
background: white;
}
.starburst {
position: absolute;
-webkit-transform-origin: center;
transform-origin: center;
}
#starburst1 {
left: 20px;
-webkit-animation: burst1 3s ease-in infinite backwards;
animation: burst1 3s ease-in infinite backwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#starburst2 {
left: 125px;
-webkit-animation: burst2 3s ease-in infinite backwards;
animation: burst2 3s ease-in infinite backwards;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#starburst3 {
left: 250px;
-webkit-animation: burst3 3s ease-in infinite backwards;
animation: burst3 3s ease-in infinite backwards;
-webkit-animation-delay: 6.8s;
animation-delay: 6.8s;
}
#starburst4 {
left: 400px;
-webkit-animation: burst4 3s ease-in infinite backwards;
animation: burst4 3s ease-in infinite backwards;
-webkit-animation-delay: 4.7s;
animation-delay: 4.7s;
}
#starburst5 {
left: 575px;
-webkit-animation: burst5 3s ease-in infinite backwards;
animation: burst5 3s ease-in infinite backwards;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
@keyframes rain {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes sway {
0% {
transform: rotate(-15deg);
}
100% {
transform: rotate(15deg);
}
}
@-webkit-keyframes burst1 {
0%, 20% {
-webkit-transform: rotate(-10deg) scale(1,0.8);
transform: rotate(-10deg) scale(1,0.8);
opacity:0;
top: 50px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 50px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(10deg) scale(1, 0.3);
transform: rotate(10deg) scale(1, 0.3);
top: 250px;
}
}
@keyframes burst1 {
0%, 20% {
-webkit-transform: rotate(-10deg) scale(1,0.8);
transform: rotate(-10deg) scale(1,0.8);
opacity:0;
top: 50px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 50px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(10deg) scale(1, 0.3);
transform: rotate(10deg) scale(1, 0.3);
top: 250px;
}
}
@-webkit-keyframes burst2 {
0%, 20% {
-webkit-transform: rotate(10deg) scale(1,0.8);
transform: rotate(10deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(-10deg) scale(1, 0.3);
transform: rotate(-10deg) scale(1, 0.3);
top: 275px;
}
}
@keyframes burst2 {
0%, 20% {
-webkit-transform: rotate(10deg) scale(1,0.8);
transform: rotate(10deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(-10deg) scale(1, 0.3);
transform: rotate(-10deg) scale(1, 0.3);
top: 275px;
}
}
@-webkit-keyframes burst3 {
0%, 20% {
-webkit-transform: rotate(-5deg) scale(1,0.8);
transform: rotate(-5deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(15deg) scale(1, 0.3);
transform: rotate(15deg) scale(1, 0.3);
top: 275px;
}
}
@keyframes burst3 {
0%, 20% {
-webkit-transform: rotate(-5deg) scale(1,0.8);
transform: rotate(-5deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(15deg) scale(1, 0.3);
transform: rotate(15deg) scale(1, 0.3);
top: 275px;
}
}
@-webkit-keyframes burst4 {
0%, 20% {
-webkit-transform: rotate(5deg) scale(1,0.8);
transform: rotate(5deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(-15deg) scale(1, 0.3);
transform: rotate(-15deg) scale(1, 0.3);
top: 275px;
}
}
@keyframes burst4 {
0%, 20% {
-webkit-transform: rotate(5deg) scale(1,0.8);
transform: rotate(5deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(-15deg) scale(1, 0.3);
transform: rotate(-15deg) scale(1, 0.3);
top: 275px;
}
}
@-webkit-keyframes burst5 {
0%, 20% {
-webkit-transform: rotate(-15deg) scale(1,0.8);
transform: rotate(-15deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(5deg) scale(1, 0.3);
transform: rotate(5deg) scale(1, 0.3);
top: 275px;
}
}
@keyframes burst5 {
0%, 20% {
-webkit-transform: rotate(-15deg) scale(1,0.8);
transform: rotate(-15deg) scale(1,0.8);
opacity:0;
top: 75px;
}
25% {
opacity:1;
}
50%{
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
top: 75px;
}
75% {
opacity:.5;
}
100% {
opacity:0;
-webkit-transform: rotate(5deg) scale(1, 0.3);
transform: rotate(5deg) scale(1, 0.3);
top: 275px;
}
}
@-webkit-keyframes grow {
0%, 20% {
-webkit-transform-origin: center;
transform-origin: center;
top: 100px;
left: 100px;
}
25% {
-webkit-transform-origin: 25px 25px;
transform-origin: 25px 25px;
top: 75px;
left: 75px;
}
75% {
-webkit-transform-origin: 75px 75px;
transform-origin: 75px 75px;
top: 25px;
left: 25px;
}
100% {
-webkit-transform-origin: 100px 100px;
transform-origin: 100px 100px;
top: 0px;
left: 0px;
}
}
@keyframes grow {
0%, 20% {
-webkit-transform-origin: center;
transform-origin: center;
top: 100px;
left: 100px;
}
25% {
-webkit-transform-origin: 25px 25px;
transform-origin: 25px 25px;
top: 75px;
left: 75px;
}
75% {
-webkit-transform-origin: 75px 75px;
transform-origin: 75px 75px;
top: 25px;
left: 25px;
}
100% {
-webkit-transform-origin: 100px 100px;
transform-origin: 100px 100px;
top: 0px;
left: 0px;
}
}
#starburst1 .star-wrapper {
position: absolute;
-webkit-animation:
grow 3s linear infinite backwards;
animation:
grow 3s linear infinite backwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#starburst2 .star-wrapper {
position: absolute;
-webkit-animation:
grow 3s linear infinite backwards;
animation:
grow 3s linear infinite backwards;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#starburst3 .star-wrapper {
position: absolute;
-webkit-animation:
grow 3s linear infinite backwards;
animation:
grow 3s linear infinite backwards;
-webkit-animation-delay: 6.8s;
animation-delay: 6.8s;
}
#starburst4 .star-wrapper {
position: absolute;
-webkit-animation:
grow 3s linear infinite backwards;
animation:
grow 3s linear infinite backwards;
-webkit-animation-delay: 4.7s;
animation-delay: 4.7s;
}
#starburst5 .star-wrapper {
position: absolute;
-webkit-animation:
grow 3s linear infinite backwards;
animation:
grow 3s linear infinite backwards;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
@for $i from 1 through 10 {
.rotate#{$i} {
-webkit-transform: rotate(#{36*$i}deg);
transform: rotate(#{36*$i}deg);
}
}
$star-size: 6px;
#starburst1 .particle-star {
background: magenta;
}
#starburst1 .particle-star:before {
background:magenta;
}
#starburst2 .particle-star {
background: orangered;
}
#starburst2 .particle-star:before {
background:orangered;
}
#starburst3 .particle-star {
background: yellow;
}
#starburst3 .particle-star:before {
background:yellow;
}
#starburst4 .particle-star {
background: cyan;
}
#starburst4 .particle-star:before {
background:cyan;
}
#starburst5 .particle-star {
background: lime;
}
#starburst5 .particle-star:before {
background:lime;
}
.particle-star {
opacity: 1;
width: $star-size;
height: $star-size;
position: absolute;
text-align: center;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.particle-star:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: $star-size;
width: $star-size;
opacity: 1;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
@-webkit-keyframes blur_fade {
0% {
height: 2px;
width: 2px;
opacity: 0;
}
20% {
-webkit-filter: blur(0.2);
filter: blur(0.2);
opacity: 0.3;
}
100% {
height: 40px;
width: 40px;
-webkit-filter: blur(3px);
filter: blur(3px);
opacity: 0;
}
}
@keyframes blur_fade {
0% {
height: 2px;
width: 2px;
opacity: 0;
}
20% {
-webkit-filter: blur(0.2);
filter: blur(0.2);
opacity: 0.3;
}
100% {
height: 40px;
width: 40px;
-webkit-filter: blur(3px);
filter: blur(3px);
opacity: 0;
}
}
@-webkit-keyframes circle {
0% {
-webkit-transform-origin: -10px -10px;
transform-origin: -10px -10px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: -10px -10px;
transform-origin: -10px -10px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circle {
0% {
-webkit-transform-origin: -10px -10px;
transform-origin: -10px -10px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: -10px -10px;
transform-origin: -10px -10px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@for $i from 1 through 30 {
.particle-subtle:nth-child(#{$i}) {
top: random($limit: 8)*50px;
left: random($limit: 14)*50px;
-webkit-animation:
blur_fade 20s ease infinite alternate,
circle random($limit: 6)+4s linear infinite;
animation:
blur_fade 20s ease infinite alternate,
circle random($limit: 6)+4s linear infinite;
-webkit-animation-delay: random($limit: 16)-1s, random($limit: 5)-1s;
animation-delay: random($limit: 16)-1s, random($limit: 5)-1s;
}
}