@@ -130,7 +130,7 @@
- ...or you can make your particles POP!
+ ...or you can make your particles POP!
"Sandiego skyline at night" by Whoismanu is licensed under CC BY-SA 3.0.
diff --git a/scss/midterm.scss b/scss/midterm.scss
index 5e12e8b..043fb09 100644
--- a/scss/midterm.scss
+++ b/scss/midterm.scss
@@ -51,7 +51,7 @@ hr {
}
/* ==========================================================================
- Author's custom styles
+ LAYOUT STYLING (NOT PARTICLE RELATED)
========================================================================== */
@@ -77,7 +77,42 @@ header {
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
- justify-content: 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%);
+ color: white;
+ 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;
+ color: white;
+ height: 50vh;
+ min-height: 400px;
+ display: grid;
+ grid-template-rows: 1fr auto 1fr auto;
+ grid-template-columns: 1fr;
+}
+
+#info1 {
+ background-color: lemonchiffon;
+}
+
+#info2 {
+ background-color: aliceblue;
+}
+
+#info3 {
+ background-color: pink;
}
ul, ol {
@@ -99,11 +134,14 @@ ul, ol {
#subtle h3 {
grid-row: 2/3;
grid-column: 1/2;
+ text-shadow: 2px 2px 4px #000000;
+ margin: 15px;
}
-#fireworks h3 {
+#fireworks h2 {
grid-row:2/3;
grid-column:1/2;
+ text-shadow: 2px 2px 4px #000000;
}
.attribution {
@@ -113,6 +151,11 @@ ul, ol {
margin: 0 5px;
}
+/* ==========================================================================
+ PARTICLE-RELATED STYLES & ANIMATION
+ ========================================================================== */
+
+
.particle-container {
overflow: hidden;
height: 100%;
@@ -550,7 +593,6 @@ $star-size: 6px;
#starburst1 .particle-star {
background: magenta;
}
-
#starburst1 .particle-star:before {
background:magenta;
}
@@ -558,7 +600,6 @@ $star-size: 6px;
#starburst2 .particle-star {
background: orangered;
}
-
#starburst2 .particle-star:before {
background:orangered;
}
@@ -566,7 +607,6 @@ $star-size: 6px;
#starburst3 .particle-star {
background: yellow;
}
-
#starburst3 .particle-star:before {
background:yellow;
}
@@ -574,7 +614,6 @@ $star-size: 6px;
#starburst4 .particle-star {
background: cyan;
}
-
#starburst4 .particle-star:before {
background:cyan;
}
@@ -582,7 +621,6 @@ $star-size: 6px;
#starburst5 .particle-star {
background: lime;
}
-
#starburst5 .particle-star:before {
background:lime;
}
@@ -694,38 +732,4 @@ $star-size: 6px;
}
-#subtle {
- background: -webkit-gradient(linear, left top, left bottom, from(#1c0f3b), color-stop(#4d1354), to(#1c0f3b));
- background: linear-gradient(#1c0f3b, #4d1354, #1c0f3b, #1a1819);
- color: white;
- 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;
- color: white;
- height: 50vh;
- min-height: 400px;
- display: grid;
- grid-template-rows: 1fr auto 2fr auto;
- grid-template-columns: 1fr;
-}
-
-#info1 {
- background-color: lemonchiffon;
-}
-
-#info2 {
- background-color: aliceblue;
-}
-
-#info3 {
- background-color: pink;
-}
-