From 38a4f417a61ecafd2c7a7de4642a03dd446ffa73 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Tue, 27 Aug 2024 13:53:02 +0200 Subject: [PATCH] start working on nav menu --- site/src/css/footer.css | 3 ++ site/src/css/nav.css | 87 ++++++++++++++++++++++++++++++++++++++++- site/src/css/style.css | 17 ++++++++ site/src/index.html | 2 +- site/src/nav.html | 65 ++++++++++++++++++++---------- 5 files changed, 151 insertions(+), 23 deletions(-) create mode 100644 site/src/css/footer.css diff --git a/site/src/css/footer.css b/site/src/css/footer.css new file mode 100644 index 0000000..8f0ef90 --- /dev/null +++ b/site/src/css/footer.css @@ -0,0 +1,3 @@ +footer .logo { + height: 40vh; +} \ No newline at end of file diff --git a/site/src/css/nav.css b/site/src/css/nav.css index 9db3ad5..87c85bc 100644 --- a/site/src/css/nav.css +++ b/site/src/css/nav.css @@ -1,3 +1,88 @@ +nav { + display: flex; + width: 100vw; + height: 20vh; + justify-content: center; + align-items: center; + background-color: rgb(226, 226, 226); +} + nav .logo { - height: 10vh; + height: 90%; + border-radius: 20px; +} + +nav a { + /* TODO: Update colours */ + color: black; + text-decoration: none; +} + +nav .nav-link-wrapper .nav-link-dropdown { + transform: scaleY( 0 ); + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + transform-origin: top; + transition: transform 0.5s; + background-color: white; + border-radius: 10px; + padding: 15px; + z-index: 2; +} + +nav .nav-link-wrapper { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; + position: relative; + width: 10%; + min-width: 50px; + z-index: 20; +} + +nav .nav-link-wrapper:hover { + color: gray; +} + +nav .nav-link-wrapper .nav-link-header { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + transition: all 0.5s; + padding: 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + position: relative; + z-index: 2; +} + +nav .nav-link-wrapper:hover .nav-link-header { + background-color: white; +} + +nav .nav-link-wrapper:hover .nav-link-dropdown { + transform: scaleY( 1 ); +} + +nav .nav-link-wrapper .nav-link-header::before { + border: white 15px solid; + border-top-color: transparent; + border-left-color: transparent; + width: 20px; + height: 20px; + position: absolute; + right: calc( 100% - 15px ); + bottom: -15px; + border-bottom-right-radius: 30px; + content: " "; + z-index: -1; +} + +nav .nav-link-wrapper:hover .nav-link-header::before { + } \ No newline at end of file diff --git a/site/src/css/style.css b/site/src/css/style.css index 605aa90..8b4657d 100644 --- a/site/src/css/style.css +++ b/site/src/css/style.css @@ -1,4 +1,5 @@ @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' ); +@import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' ); @import url( '/css/nav.css' ); @import url( '/css/footer.css' ); @@ -9,4 +10,20 @@ body { padding: 0; margin: 0; font-family: 'Manrope', sans-serif; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} + +.content { + width: 80%; } \ No newline at end of file diff --git a/site/src/index.html b/site/src/index.html index c3c262a..90a15c9 100644 --- a/site/src/index.html +++ b/site/src/index.html @@ -47,7 +47,7 @@
- +

My work

diff --git a/site/src/nav.html b/site/src/nav.html index c3dd37d..3e5c1cb 100644 --- a/site/src/nav.html +++ b/site/src/nav.html @@ -1,27 +1,50 @@ - -
-
+
+
+ lightbulb Projects -
- StorageManager - QR & Barcode Insight - libreǝvent -
-
- About -
- StorageManager - QR & Barcode Insight - libreǝvent -
+
+ View all + StorageManager + QR & Barcode Insight + libreǝvent
-
+
+ +
+
+ build + Services +
+
+ Store + Account + Custom Websites +
+
+ + + +
+
+ info + About +
+
+ About janishutz.com + About Janis Hutz + Legal +
+
+ +
+
+ support_agent Support -
- StorageManager - QR & Barcode Insight - libreǝvent -
+
+
+ Support Hub + Knowledgebase + Old websites
\ No newline at end of file