Finished responsive menu

Added menu icons

static/css/main.css

@@ -8,21 +8,6 @@ html {
   font-kerning: normal;
   overflow-x: hidden;
 }
-body {
-  font-family: var(--bs-body-font-family);
-  background-color: var(--background);
-  overflow-x: hidden;
-  letter-spacing: .125px;
-/*   -webkit-font-smoothing: antialiased; */
-  font-variant-ligatures: no-common-ligatures;
-}
-h1, h2, h3, h4, h5{
-  font-family: var(--bs-ttl-font-family);
-}
-/* ::selection, ::-moz-selection {
-  background-color: var(--grauwert3);
-  text-shadow: none;
-} */
 :root{
   --background: rgb(240,240,240);
   --background-wrapper: rgb(250,250,250);
@@ -32,13 +17,46 @@ h1, h2, h3, h4, h5{
   --accent:45,98%; /* hsl */
   --accent-normal: hsl(var(--accent), 54%);
   --accent-light: hsl(var(--accent), 75%);
-  --bs-btn-hover-bg: #f28705;
-  --bs-link-color: #f28705;
+  --bs-btn-hover-bg: rgb(242, 135, 5);
+  --bs-link-color: rgb(242, 135, 5);
   --bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif;
   --bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif;
   --top-bar: 6.125rem;
   --bottom-bar: 5em;
   --div-padding: 3em;
+  --bs-navbar-color: rgba(242, 135, 5, .15);
+}
+body {
+  font-family: var(--bs-body-font-family);
+  background-color: var(--background);
+  overflow-x: hidden;
+  letter-spacing: .125px;
+  font-variant-ligatures: no-common-ligatures;
+}
+h1, h2, h3, h4, h5{
+  font-family: var(--bs-ttl-font-family);
+}
+::selection, ::-moz-selection {
+  text-shadow: none;
+}
+.navbar-toggler{
+  color: var(--bs-btn-hover-bg);
+}
+.custom-toggler.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245,135,5,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.btn-link, .text-link{
+  color: var(--bs-link-color);
+  text-decoration: none;
+}
+.btn-link{
+  padding: .725rem 1rem;
+}
+.btn-link:hover, .btn-link:focus-visible, .text-link:hover, .text-link:focus-visible{
+  text-decoration: underline;
+  color: var(--bs-link-color);
+  background-color: transparent;
+  text-underline-offset: 0.375em;
 }
 .top-bar{
   height: var(--top-bar);
@@ -49,7 +67,7 @@ h1, h2, h3, h4, h5{
   height: 100%;
 }
 /* navbar */
-.navbar img{
+.navbar-brand img{
   height: calc(var(--top-bar) - 1.5em);
 }
 #mainNav, .offcanvas-backdrop{
@@ -77,8 +95,10 @@ h1, h2, h3, h4, h5{
   justify-content: center;
 }
 
-/* side menu */
-
+/* left side menu */
+.nav-item .badge{
+  background-color: var(--bs-link-color);
+}
 .side-menu .nav-link{
   color: black;
   padding: 0.725rem 1rem;
@@ -109,9 +129,6 @@ h1, h2, h3, h4, h5{
   margin-bottom: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.separator.menu-admin{
-  text-transform: uppercase;
-}
 
 /* heros */
 .hero{
@@ -237,9 +254,10 @@ article li:not(:first-of-type){
   left: 0;
   justify-content: center;
   align-items: center;
-  font-size: 2rem;
-  line-height: .525;
+  font-size: 1.2em;
+  line-height: .425em;
   color: darkgray;
+  letter-spacing: .25em;
 }
 .profile .user-avatar{
   text-align: center;
@@ -249,7 +267,7 @@ article li:not(:first-of-type){
   height: 9rem;
   object-fit: cover;
   object-position: top;
-  border: 2px solid #f28705;
+  border: 2px solid white;
   border-radius: 50%;
 }
 .profile .label{
@@ -268,7 +286,7 @@ article li:not(:first-of-type){
 /* search filters */
 #search-filters{
   border: 1px solid white;
-  background-color: var(--accent-light);
+  background-color: rgba(255,255,255,.5);
   margin-top: 0.5rem;
 }
 #search-filters form{
@@ -368,15 +386,18 @@ footer a img{
   min-height: 2.5em;
 }
 .ui-btn{
-  padding: 1rem;
+  display: inline-flex;
   background-color: white;
-  width: fit-content;
   border-radius: 0.5rem;
 }
 .icon-ui{
-  width: 1.5em;
-  height: 1.5em;
-  margin-right: 0.75rem;
+  width: 1.25em;
+  height: 1.25em;
+  margin-right: 0.65em;
+}
+nav .icon-ui{
+  display: inline-flex;
+  margin-right: .75rem;
 }
 /* media queries */
 @media (width <= 576px) {
@@ -387,10 +408,6 @@ footer a img{
     --div-padding: 2em;
     --bottom-bar: 40px;
   }
-
-  .navbar-toggler-icon {
-    width: 1em;
-  }
   .navbar-brand{
     margin-left: 1rem;
   }
@@ -449,10 +466,13 @@ footer a img{
     flex-direction: column !important;
   }
   .offcanvas .nav-link{
+    display: flex;
+    align-items: center;
     background: none;
     padding: var(--bs-nav-link-padding-y) calc(var(--div-padding) / 2);
     border-radius: 0;
     color: black;
+    width: 100%;
   }
   .offcanvas .nav-link.active{
     background-color: rgba(255,255,255,.5);
@@ -470,6 +490,10 @@ footer a img{
   .offcanvas li:not(:first-child){
     margin-top: initial;
   }
+  .offcanvas .user-pseudo{
+    font-weight: 700;
+    margin-top: .5em;
+  }
   #side-lang{
     display: flex;
     align-items: center;
@@ -477,8 +501,12 @@ footer a img{
     padding: var(--div-padding);
   }
   .separator.menu-admin{
-    margin-top: 1.5rem;
+    margin-top: .5rem;
     padding-left: 2rem;
+    padding-bottom: 0;
+  }
+  .separator.menu-admin > .btn-link{
+    padding: .725rem 1rem .725rem 0;
   }
 }
 @media (576px <= width <= 992px) {