(mkosarek) Fixed up a bunch of styling, add new links, and made it a light theme

1 files changed, 51 insertions, 58 deletions

diff --git a/index.css b/index.css
index 76b7187..a77f5d1 100644
--- a/index.css
+++ b/index.css
@@ -1,72 +1,75 @@
-
 body {
-    width: 100vw;
+    width: 60vw;
     height: 100vh;
-    font-family: Consolas, monaco, monospace; 
+    font-family: Arial, Helvetica, sans-serif; 
     font-size: 16px;
-    background-color: #231f1d;
-    color: white;
+    background-color: white;
+    color: black;
     padding: 0;
-    margin: 0;
+    margin: auto;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 }
 
 header {
-    text-align: center;
-    width: 60%;
+    width: 100%;
 }
 
 header > h1 {
-	font-family: Georgia, sans-serif;
-	font-weight: normal;
-    font-size: 30px;
+	font-weight: bold;
+    font-size: 3rem;
     padding-top: 1rem;
 	padding-bottom: 0.5rem;
     margin: 0;
-	letter-spacing: 0.25rem;
-	border-bottom: 1px solid white;
 }
 
 header > nav {	
-	font-family: Georgia, sans-serif;
-	padding-top: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 1rem;
+    padding-left: 0.25rem;
+    border-bottom: 1px solid lightgray;
 }
 
 header > nav > ul {
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
+header > nav > ul > li {
+    padding-right: 1rem;
+}
+
 header > nav > ul a {
     text-decoration: none;
-    color: inherit;
-    font-size: 16px;
+    color: blueviolet;
+    font-size: 1.5rem;
 	border-bottom: 1px solid transparent;
-	transition: border-color 100ms linear;
-	transition: opacity 100ms linear;
 }
 
 header > nav > ul a:hover {
-	opacity: 0.8;
-	border-color: white;
+	opacity: 0.7;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+section {
+    width: 100%;
 }
 
-#landing_page {
+p {
     text-align: center;
-    flex: 1 1 100%;
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+}
+
+section a {
+    color: blueviolet;
+}
+
+section a:hover {
+    opacity: 0.7;
 }
 
 /* Carousel styling */
@@ -74,19 +77,20 @@ header > nav > ul a:hover {
     width: 100%;
     position: relative;
     overflow: hidden;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 }
 
 #carousel > button {
     position: absolute;
-    top: calc(50% - 2rem);
-    font-size: 4rem;
+    top: calc(50% - 3rem);
+    font-size: 6rem;
     border: none;
     background-color: transparent;
-    color: white;
 }
 
 #carousel > button:hover {
-    opacity: 0.8;
+    opacity: 0.5;
     cursor: pointer;
 }
 
@@ -103,12 +107,12 @@ header > nav > ul a:hover {
     display: flex;
     flex-direction: row;
     height: 100%;
-    transition: transform 100ms linear;
+    transition: transform 50ms linear;
 }
 
 .carousel_image {
     width: 240px;
-    transition: opacity 100ms linear;
+    transition: opacity 50ms linear;
     padding: 0;
     margin: 0;
     padding-right: 12px;
@@ -171,10 +175,13 @@ input:focus {
 	width: 50%;
 	display: flex;
 	align-items: center;
-	justify-content: space-evenly;
 	bottom: 1rem;
 }
 
+#theme_selector > label {
+    font-weight: bold;
+}
+
 #theme_selector > button {
 	width: 5rem;
 	height: 2rem;
@@ -184,6 +191,8 @@ input:focus {
 	background-color: white;
 	cursor: pointer;
 	transition: opacity 100ms linear;
+    margin-right: 1rem;
+    margin-left: 1rem;
 }
 
 #theme_selector > button:hover {
@@ -200,23 +209,7 @@ input:focus {
 /* Phone screen adjustments */
 @media only screen and (device-width: 1280px),
 only screen and (max-width:1280px) {
-    body {
-        font-size: 12px;
-    }
-
-    header {
-        width: 90%;
+    header > h1 {
+        font-size: 1.5rem;
     }
-
-    section {
-        width: 100%;
-    }
-
-	#landing_page {
-		width: 75%;
-	}
-
-	#theme_selector {
-		width: 90%;
-	}
 }