From b6ecb0485ebbd1bd1512cc6a087c403ad67683f0 Mon Sep 17 00:00:00 2001 From: mattkae Date: Wed, 24 Nov 2021 21:08:53 -0500 Subject: (mkosarek) Fixed up a bunch of styling, add new links, and made it a light theme --- index.css | 109 +++++++++++++++++++++++++++++-------------------------------- index.html | 51 ++++++++++++++++------------- index.js | 16 +++++++++ resume.css | 7 ++-- 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 @@ -
- -
- -
-

Matthew Kosarek

- -
+
+ +
+ +
+

Matthew Kosarek

+ +

@@ -52,17 +52,24 @@

- 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 here. I am also building a website about physics simulation in video games which you can find here. + 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.

-
+
+
+

Links

+
-
- - - -
+
+ + + +
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; -- cgit v1.2.1