From a4ab672abdecc068d8d7b4e3e0e994cf15f3b3ab Mon Sep 17 00:00:00 2001 From: fabolous005 Date: Wed, 13 Nov 2024 01:12:46 +0100 Subject: [PATCH] add icon to navbar --- logo.svg | 353 ++++++++++++++++++++++++++++++++++++++ static/css/style.css | 16 +- static/js/index.js | 8 +- templates/index.html.tera | 21 +++ 4 files changed, 393 insertions(+), 5 deletions(-) create mode 100644 logo.svg diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..d6bd241 --- /dev/null +++ b/logo.svg @@ -0,0 +1,353 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/css/style.css b/static/css/style.css index 03efe73..b796efd 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -20,7 +20,7 @@ body { #navbar { overflow: hidden; background-color: #f1f1f1; - padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */ + padding: 70px 10px; /* Large padding which will shrink on scroll (using JS) */ transition: 0.4s; /* Adds a transition effect when the padding is decreased */ position: fixed; /* Sticky/fixed navbar */ width: 100%; @@ -42,14 +42,22 @@ body { /* Style the logo */ #navbar #logo { - font-size: 35px; + font-size: 3rem; font-weight: bold; transition: 0.4s; } +#navbar #logo-icon { + position: absolute; /* Position independently of other elements */ + top: 37px; /* Adjust as needed */ + left: 46%; /* Position it between the logo text and menu */ + transition: 0.4s; +} + #navbar a.submenu { font-size: 2rem; - margin: 0 10px; + margin: 0 0 0 10px; + /* margin-right: 0; */ transition: 0.4s; } @@ -62,7 +70,7 @@ body { /* Display some links to the right */ #navbar-right { float: right; - margin-right: 3%; + margin-right: 2%; } /* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */ diff --git a/static/js/index.js b/static/js/index.js index 411ffaa..d6f2127 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -9,12 +9,18 @@ function scrollFunction() { document.getElementById("submenu0").style.fontSize = "1.6rem"; document.getElementById("submenu1").style.fontSize = "1.6rem"; document.getElementById("submenu2").style.fontSize = "1.6rem"; + document.getElementById("logo-icon").style.width = "60px"; + document.getElementById("logo-icon").style.top = "-8px"; + document.getElementById("logo-icon").style.left = "47%"; } else { document.getElementById("navbar").style.padding = "70px 10px"; - document.getElementById("logo").style.fontSize = "35px"; + document.getElementById("logo").style.fontSize = "3rem"; document.getElementById("submenu0").style.fontSize = "2rem"; document.getElementById("submenu1").style.fontSize = "2rem"; document.getElementById("submenu2").style.fontSize = "2rem"; + document.getElementById("logo-icon").style.width = "100pt"; + document.getElementById("logo-icon").style.top = "37px"; + document.getElementById("logo-icon").style.left = "46%"; } } diff --git a/templates/index.html.tera b/templates/index.html.tera index a003c7f..55927b4 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -9,6 +9,27 @@