From be738e2e65d8333955d29b0042f04d3c10a22db1 Mon Sep 17 00:00:00 2001 From: Andrew Simonson Date: Sun, 25 Feb 2024 15:30:32 -0600 Subject: [PATCH] Navbar update --- src/static/css/App.css | 33 ++- src/static/icons/neonfinal3.svg | 393 ++++++++++++++++++++++++++++++++ src/static/js/responsive.js | 42 ---- src/templates/about.html | 4 +- src/templates/header.html | 6 +- src/templates/home.html | 14 +- 6 files changed, 430 insertions(+), 62 deletions(-) create mode 100644 src/static/icons/neonfinal3.svg diff --git a/src/static/css/App.css b/src/static/css/App.css index 7e27067..5c5cf59 100644 --- a/src/static/css/App.css +++ b/src/static/css/App.css @@ -135,13 +135,14 @@ a { top: 0; left: 0; transition: .4s; + border-bottom: solid .2em rgba(139, 36, 36, 0.5); overflow: hidden; } #homeIcon { margin: auto; display: block; - width: 5em; + width: 3em; } #homeName { @@ -153,10 +154,14 @@ a { cursor: pointer; } +.pointer { + cursor: pointer; +} + .name { display: inline; - color: #a0a0a0a0; - background: url("../icons/neonfinal2.svg") 0/5rem no-repeat; + color: #bbbaba; + background: url("../icons/neonfinal3.svg") 0/5rem no-repeat; background-size: contain; padding-left: 3.5rem; margin-left: .5em; @@ -172,6 +177,9 @@ a { } .navControl { + max-height: 57px; + float: right; + margin-right: 1em; transition: .4s; } @@ -184,10 +192,15 @@ a { } .navElement { + display: inline-block; border: solid black .2rem; text-align: center; background-color: rgba(139, 36, 36, 0.5); - flex-grow: 1; + padding: 0 1em; + margin-left: .5em; + padding-top: 1.2em; + margin-top: -1.3em; + border-radius: .5em; } .navElement:hover { @@ -240,7 +253,7 @@ a { } .foregroundContent { - padding-top: 6rem; + padding-top: 4rem; padding-left: 8rem; max-width: calc(100%-8rem); padding-bottom: 1rem; @@ -256,7 +269,7 @@ a { } .homegroundContent { - padding-top: 7em; + padding-top: 5em; padding-left: 0em; } @@ -295,7 +308,7 @@ a { } #nametag { - padding: 3rem; + padding: 2em 3em; display: inline-block; background-color: rgb(44, 44, 44, .75); border-radius: 1em; @@ -899,10 +912,16 @@ a { .navElement { width: 100vw; + padding: 0; + margin-left: 0; + padding-top: unset; + margin-top: unset; + border-radius: 0; } .navControl { max-height: 0px; + margin: 0; } .projectList { diff --git a/src/static/icons/neonfinal3.svg b/src/static/icons/neonfinal3.svg new file mode 100644 index 0000000..c64caa3 --- /dev/null +++ b/src/static/icons/neonfinal3.svg @@ -0,0 +1,393 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/js/responsive.js b/src/static/js/responsive.js index c103364..0235a16 100644 --- a/src/static/js/responsive.js +++ b/src/static/js/responsive.js @@ -2,36 +2,19 @@ window.onload = function () { onLoaded(); }; function onLoaded() { - // document.body.scrollTop = 0; // For Safari - // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera - window.onresize = function () { resizer(); }; resizer(); - if (window.innerWidth < 1400) { - const e = document.querySelector(".navControl"); - e.style.maxHeight = "0px"; - } } function resizer() { const e = document.querySelector(".navControl"); if (window.innerWidth > 1400) { // desktop view - scrollFunction(); - window.onscroll = function () { - scrollFunction(); - }; e.style.maxHeight = `${e.scrollHeight + 10}px`; } else { // mobile view - window.onscroll = ""; - document.querySelector(".header").style.backgroundColor = "#1a1a1a"; - document.querySelectorAll(".header .name h1").forEach(function (x) { - x.style.fontSize = "1.5rem"; - }); - // document.querySelector('.header > h1').style.color = "#ecebeb"; document.querySelector(".header").style.borderBottomWidth = "3px"; e.style.maxHeight = "0px"; document.querySelectorAll(".navElement *").forEach((x) => { @@ -42,31 +25,6 @@ function resizer() { } } -function scrollFunction() { - if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) { - document.querySelector(".header").style.backgroundColor = "#1a1a1a"; - document.querySelectorAll(".header .name h1").forEach(function (x) { - x.style.fontSize = "1.5rem"; - }); - document.querySelectorAll(".navElement *").forEach((x) => { - x.style.paddingTop = ".3rem"; - x.style.paddingBottom = ".3rem"; - x.style.fontSize = "1rem"; - }); - } else { - document.querySelector(".header").style.backgroundColor = "rgba(0,0,0,0)"; - document.querySelectorAll(".header .name h1").forEach(function (x) { - x.style.fontSize = "2rem"; - }); - // document.querySelector('.header > h1').style.color = "#ecebeb"; - document.querySelectorAll(".navElement *").forEach((x) => { - x.style.paddingTop = ".5rem"; - x.style.paddingBottom = ".5rem"; - x.style.fontSize = "1.2rem"; - }); - } -} - function toggleMenu() { if (window.innerWidth < 1400) { const e = document.querySelector(".navControl"); diff --git a/src/templates/about.html b/src/templates/about.html index 5006c3b..b588155 100644 --- a/src/templates/about.html +++ b/src/templates/about.html @@ -6,9 +6,9 @@

About Me

- I'm Andrew Simonson, a fourth year student at + I'm Andrew Simonson, a senior undergrad at Rochester Institute of Technology - in the Computer Science BS program, pursuing a career in data + in the Computer Science BS program (international relations minor), pursuing a career in data science with a focus on predictive analytics.

diff --git a/src/templates/header.html b/src/templates/header.html index f0018ec..91939ea 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -2,7 +2,7 @@ - + @@ -11,7 +11,7 @@ @@ -20,7 +20,7 @@ diff --git a/src/templates/home.html b/src/templates/home.html index 61b4f3b..3357e3a 100644 --- a/src/templates/home.html +++ b/src/templates/home.html @@ -1,10 +1,10 @@ {% block content %} {% macro nameplate() %} logo -

Andrew Simonson

+

Andrew Simonson

Computer Science student at Rochester Institute of Technology

🦅 🦅 🦅 Raahhh wtf is homepage content, we don't do that here 🦅 🦅 🦅
{% endmacro %} @@ -15,12 +15,12 @@
-
-
{{ nameplate() }}
-
{{ nameplate() }}
+
+
{{ nameplate() }}
+
@@ -38,8 +38,7 @@ {% from 'partials/bookshelf.html' import bookshelf %} {{ bookshelf(var.books) }}
- -
+
duck spinning
-