From 4d48b4f6cef44d5eeae1ad4ceb66cafedfd828c2 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 14 Jul 2023 09:06:25 +0200 Subject: [PATCH] various tweaks to navigation menu --- src/css/footerstyle.css | 4 ++-- src/css/mainstyle.css | 4 ++-- src/css/nav/logo.css | 22 ++++++++++++++++++++++ src/css/nav/menu.css | 11 +++++++++-- src/css/nav/toggle.css | 2 ++ src/footer.html | 4 ++-- src/index.html | 12 ++++++------ src/menu.html | 18 ++++++++++++++---- src/privacypolicy/index.html | 4 ++-- src/search/index.html | 4 ++-- 10 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 src/css/nav/logo.css diff --git a/src/css/footerstyle.css b/src/css/footerstyle.css index 7b2a6d5..dac9d57 100755 --- a/src/css/footerstyle.css +++ b/src/css/footerstyle.css @@ -1,5 +1,5 @@ -.Footer-box { - background-color: #38444d; +.footer-box { + background-color: rgb(18, 12, 59); width: 100%; margin-bottom: -1%; display: flex; diff --git a/src/css/mainstyle.css b/src/css/mainstyle.css index 6c148e0..484b641 100755 --- a/src/css/mainstyle.css +++ b/src/css/mainstyle.css @@ -68,7 +68,7 @@ body { transition: 0.3s; } -.linkbutton { +.button { text-decoration: none; display: inline-block; padding: 20px; @@ -78,7 +78,7 @@ body { transition: 1s; } -.linkbutton:hover { +.button:hover { background-color: darkblue; border-radius: 5px; transition: 0.3s; diff --git a/src/css/nav/logo.css b/src/css/nav/logo.css new file mode 100644 index 0000000..7861f5e --- /dev/null +++ b/src/css/nav/logo.css @@ -0,0 +1,22 @@ +.logo-container { + position: fixed; + height: 13vh; + width: 13vh; + top: 0; + left: 0; + border-bottom-right-radius: 100%; + background-color: rgb(21, 21, 73); + transition: all 2s ease-in-out; + z-index: 9; +} + +#logo { + height: 70%; + width: 70%; +} + +.nav-container:hover .logo-container { + width: 20vh; + height: 20vh; + transition: all 0.5s ease-in-out; +} diff --git a/src/css/nav/menu.css b/src/css/nav/menu.css index d90c418..4e7eef1 100644 --- a/src/css/nav/menu.css +++ b/src/css/nav/menu.css @@ -23,6 +23,7 @@ } .menu-container { + display: none; width: 80%; height: 80%; opacity: 0; @@ -30,6 +31,7 @@ } .menu-container.shown { + display: block; width: 80%; height: 80%; opacity: 1; @@ -44,8 +46,8 @@ display: flex; justify-content: center; align-items: center; - width: 100%; flex-direction: column; + width: 100%; } .menu-category { @@ -131,12 +133,17 @@ background-color: rgb(0, 125, 156); } - .bottom-note { + .bottom-note-wrapper { font-family: monospace; position: fixed; width: 100%; bottom: 5%; left: 0; + display: none; + } + + .bottom-note { + width: 100%; display: flex; justify-content: center; align-items: center; diff --git a/src/css/nav/toggle.css b/src/css/nav/toggle.css index ebf1f80..b88772f 100644 --- a/src/css/nav/toggle.css +++ b/src/css/nav/toggle.css @@ -7,6 +7,7 @@ position: fixed; transition: all 2s ease-in-out; cursor: pointer; + border-bottom-left-radius: 100%; } .nav-toggle-container { @@ -26,6 +27,7 @@ height: 20vh; width: 20vh; transition: all 0.5s ease-in-out; + border-bottom-left-radius: 100%; } .nav-toggle-positioner { diff --git a/src/footer.html b/src/footer.html index 4898a75..3b683bc 100755 --- a/src/footer.html +++ b/src/footer.html @@ -6,11 +6,11 @@ Footer - janishutz.com -
+
- Privacy Policy + Privacy Policy
diff --git a/src/index.html b/src/index.html index 5b52b1b..49bb5ab 100755 --- a/src/index.html +++ b/src/index.html @@ -24,37 +24,37 @@

Custom Websites

Get your new online presence as anything ranging from a simple static website like this one to a highly complex webapp like libreǝvent or the Language School Hossegor Booking system

- Learn more + Learn more

PC Building

Are you looking for a new gaming or work PC that is perfectly fitted for your needs and has an upgrade path in the future and you live in Switzerland? Here you can get your new, fully customised PC!

- Learn more + Learn more

iOS Apps

My iOS apps mostly focus on things you use or do day-to-day. You can view and download my apps on the Apple AppStore

- AppStore + AppStore

Open Source Software

As a huge Open Source fan, I also developed some software whose code you can freely use, if your project uses the GPL V3 License. I am also contributing to a JavaScript presentation framework called impress.js

- GitHub + GitHub

libreǝvent

libreǝvent is THE free and open source event management solution with which you can save lots of time and money when managing your events!

- Learn more + Learn more

Check out my projects!

- Projects + Projects
diff --git a/src/menu.html b/src/menu.html index 0bad8c9..587a600 100644 --- a/src/menu.html +++ b/src/menu.html @@ -8,9 +8,13 @@ nav +
+
+ +
@@ -24,8 +28,10 @@

Home

-
-

Welcome to janishutz.com

+
+
+

Welcome to janishutz.com

+
@@ -80,8 +86,12 @@ function menu () { $( '#menu' ).toggleClass( 'open' ); $( '.nav-toggle' ).toggleClass( 'active' ); - $( '.menu-container' ).toggleClass( 'shown' ); - // $( '.menu-container' ).fadeToggle( 300 ); + $( '.menu-container' ).fadeToggle( 100 ); + setTimeout( () => { + $( '.menu-container' ).toggleClass( 'shown' ); + // $( '.main-menu' ).fadeToggle( 500 ); + $( '.bottom-note-wrapper' ).fadeToggle( 500 ); + }, 400 ); } diff --git a/src/privacypolicy/index.html b/src/privacypolicy/index.html index 88b335a..1b1c4c6 100755 --- a/src/privacypolicy/index.html +++ b/src/privacypolicy/index.html @@ -11,7 +11,7 @@ -
+

Privacy Policy

@@ -24,6 +24,6 @@

This website does not collect any data on your interaction with it as it stands today. This may change in the future, but all data collected will not allow me to uniquely identify you as an individual. You may have a look at the source code of the data-collection module, if I end up adding one on this website, if you wish. The rest of the server backend will remain closed-source due to security concerns.

- + diff --git a/src/search/index.html b/src/search/index.html index fb1affc..bfb0689 100644 --- a/src/search/index.html +++ b/src/search/index.html @@ -58,8 +58,8 @@

Search

-
- + +