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

4 files changed, 99 insertions, 84 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%;
-	}
 }
diff --git a/index.html b/index.html
index f76e3ab..fbee791 100644
--- a/index.html
+++ b/index.html
@@ -8,20 +8,20 @@
 	<link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
   </head>
   <body>
-	<div id="theme_container">
-	  <canvas id="theme_canvas"></canvas>
-	</div>
-	
-	<header>
-      <h1>Matthew Kosarek</h1>
-      <nav>
-        <ul>
-          <li><a href='/'>&#127969; Home</a></li>
-          <li><a href='/resume.html'>&#128216; CV</a></li>
-          <li style="display: none;"><a href='/posts.html'>&#128221; Posts</a></li>
-        </ul>
-      </nav>
-	</header>
+    <div id="theme_container">
+      <canvas id="theme_canvas"></canvas>
+    </div>
+    
+    <header>
+        <h1>Matthew Kosarek</h1>
+        <nav>
+          <ul>
+            <li><a href='/'>&#127969; Home</a></li>
+            <li><a href='/resume.html'>&#128216; CV</a></li>
+            <li style="display: none;"><a href='/posts.html'>&#128221; Posts</a></li>
+          </ul>
+        </nav>
+    </header>
     <section id='landing_page'>
 
       <p>
@@ -52,17 +52,24 @@
       </p>
       
       <p>
-        My name is Matthew Kosarek. I am a computer programmer currently living in Montreal. I keep my CV up to date on this website.
-         You can find a link to my Github <a href='https://github.com/mattkae'>here</a>. I am also building a website about physics simulation in video games which you can find <a href='https://physicsforgames.com/'>here</a>. 
+        My name is Matthew Kosarek. I am a computer programmer from New Jersey and currently living in Montreal. I keep my CV up to date on this website, and also
+        provide some links to some other thinks that I am currently up to. I also have fun building themes in WASM/WebGL when I find the time.
       </p>
-      <br/>
+    </section>
+    <section>
+      <h2>Links</h2>
+      <ul>
+        <li><a href="https://github.com/mattkae">Github</a>: my personal github with most of my projects</li>
+        <li><a href="https://git.matthewkosarek.xyz">CGit</a>: my self-hosted git instance with a few of my projects</li>
+        <li><a href="https://physicsforgames.com">physicsforgames.com</a>: a project that I'm currently working on in my spare time where I explore the world of realtime physics</li>
+      </ul>
     </section>
 
-	<div id="theme_selector">
-	  <label>Theme:</label>
-	  <button id="theme_button_default">Default</button>
-	  <button id="theme_button_autumn">Autumn</button>
-	</div>
+    <div id="theme_selector">
+      <label>Theme:</label>
+      <button id="theme_button_default">Default</button>
+      <button id="theme_button_autumn">Autumn</button>
+    </div>
   </body>
 
   <script src='/index.js'></script>
diff --git a/index.js b/index.js
index 72fcc2e..fbe9ba9 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,22 @@
 function main() {
     runCarousel();
     runPosts();
+
+    // -- Note! We require a black background to properly see the WebGL, so we handle that here.
+    var bodyElement = document.querySelector('body');
+    var themeButtonList = document.querySelectorAll('#theme_selector > button');
+    themeButtonList.forEach(function(themeButton) {
+        if (themeButton.id !== 'theme_button_default') {
+            themeButton.addEventListener('click', function() {
+                bodyElement.style.background = 'black';  
+            });
+        }
+        else {
+            themeButton.addEventListener('click', function() {
+                bodyElement.style.background = 'white';  
+            });
+        }
+    })
 }
 
 function runCarousel() {
diff --git a/resume.css b/resume.css
index d580d80..6d0e45f 100755
--- a/resume.css
+++ b/resume.css
@@ -1,6 +1,5 @@
 body {
     font-size: 14px !important;
-    width: 100%;
 }
 
 header {
@@ -16,20 +15,19 @@ header {
 }
 
 #resume {
-    width: 80%;
     position: relative;
     text-align: left;
     background-color: white;
     border-radius: 2px;
     color: black;
-    padding: 2rem;
     font-family: Arial,Helvetica Neue,Helvetica,sans-serif !important; 
     line-height: 1.2rem;
+    padding-bottom: 1rem;
 }
 
 #resume_button_container {
     position: absolute;
-    top: 1rem;
+    top: 0;
     right: 1rem;
     text-align: right;
     
@@ -49,6 +47,7 @@ header {
     position: fixed;
     top: 0;
     left: 0;
+    padding: 2rem;
     width: calc(100vw - 4rem);
     height: calc(100vh - 4rem);
     overflow: auto;