Improve navigation bar and tab styles

JuliaAI · Feb 23, 2024 · 8a0a5a0 · 8a0a5a0
1 parent 732aaaa
commit 8a0a5a0
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 194 deletions.
diff --git a/_css/extra.css b/_css/extra.css
@@ -24,9 +24,9 @@
         font-weight: 600 !important;
     }
 }
-@media (max-width: 1050px) {
+@media (max-width: 700px) {
     .header h1 {
-        font-size: 2.5em;
+        font-size: 2rem
     }
 }
 /* MENU adjustments */
@@ -128,7 +128,7 @@ h3 {
 .result-preview { color: #808080; }
 .resultCount { color: #808080; }
 .result-query { font-weight: bold; }
-#lunrSearchForm { margin-top: 1em; text-align: center;}
+#lunrSearchForm { margin-top: 0.7em; text-align: center;}
 #lunrSearchForm .input { }
 
 

diff --git a/_css/landing.css b/_css/landing.css
@@ -48,7 +48,8 @@
 }
 
 .selected {
-    background-color: #d1d1d166;
+    background-color: #9b59b6;
+    color: white;
 }
 .tab-content h2 {
     margin-top: 0.8rem !important;
@@ -57,12 +58,15 @@
     background-color: #d1d1d166;
     color: #1d1d1d;
     padding: 20px;
-    border-radius: 0px 25px 25px 25px;
+    border-radius: 0px 50px 50px 50px;
     display: none;
-    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
-    box-shadow: none 0 0 0 rgba(0, 0, 0, 0.2); 
+    //box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
+    //box-shadow: none 0 0 0 rgba(0, 0, 0, 0.2); 
     transition: display 0.3s;
     margin-bottom: 2rem;
+    border:  4px solid #9b59b6;
+    bord
+
 }
 @media only screen and (max-width: 630px) {
     .tab-content {

diff --git a/_css/nav.css b/_css/nav.css
@@ -1,166 +1,114 @@
 /* CSS for the top navigation bar */
 .navigation {
-	 height: 70px;
-     background-color: #f1f1f1;
-     color: #363636;
-     position: sticky;
-     top: 0;
-     left: 0;
-     right: 0;
-     z-index: 99;
-	 width: 100%;
-}
- .brand {
-	 position: absolute;
-	 padding-left: 0px;
-	 float: left;
-	 line-height: 70px;
-	 font-weight: 600;
-	 font-size: 1.2em;
+  height: 70px;
+  background-color: #f1f1f1;
+  color: #363636;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  width: 100%;
+}
+.brand {
+  line-height: 70px;
+  font-weight: 600;
+  font-size: 1.2em;
 }
+
 /* hide if screen size is from 900 to 1000 */
 @media screen and (max-width: 1200px) {
-    .brand {
-        display: none;
-    }
-}
- .brand a, .brand a:visited {
-    color: #363636;
-    text-decoration: none;
-}
- .nav-container {
-	 max-width: 95%;
-	 margin: 0 auto;
+  .brand {
+    display: none;
+  }
+}
+.brand a,
+.brand a:visited {
+  text-decoration: none;
+  color: #363636;
+}
+.brand a:hover,
+.brand a:visited:hover {
+  text-decoration: none;
+  color: #9b59b6;
+}
+.nav-container {
+  max-width: 95%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+}
+nav {
+  //float: right;
+  display: flex;
+  justify-content: space-around;
+  padding: 0.5rem;
+}
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nav ul li {
+  float: left;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 500;
 }
- nav {
-	 float: right;
+
+.nav-dropdown li {
+  float: none;
 }
- nav ul {
-	 list-style: none;
-	 margin: 0;
-	 padding: 0;
+
+
+.nav-list > li .main-nav-item {
+  padding: 0 20px;
+  border-radius: 2rem 2rem 2rem 2rem;
 }
- nav ul li {
-	 float: left;
-	 position: relative;
+.nav-list > li .main-nav-item:hover {
+  border-radius: 2rem 2rem 0rem 0rem;
 }
-.nav-list > li .main-nav-item {
-    padding: 0 20px;
+
+nav ul li a,
+nav ul li a:visited {
+  display: block;
+  //padding: 0 20px;
+  line-height: 50px;
+  background-color: #f1f1f1;
+  color: #363636;
+  text-decoration: none;
 }
 
- nav ul li a, nav ul li a:visited {
-	 display: block;
-	 //padding: 0 20px;
-	 line-height: 70px;
-     background-color: #f1f1f1;
-     color: #363636;
-	 text-decoration: none;
+nav ul li a:hover,
+nav ul li a:visited:hover {
+  background: #9b59b6;
+  color: #fff;
+}
+nav ul li a:not(:only-child):after,
+nav ul li a:visited:not(:only-child):after {
+  padding-left: 4px;
+  content: " ▾";
 }
 
+.long-item {
+  min-width: 240px;
+}
+.medium-item {
+	min-width: 190px;
+  }
+.short-item {
+  min-width: 150px;
+}
+nav ul li ul li a {
+  padding: 15px;
+  line-height: 20px;
+}
+.nav-dropdown {
+  position: absolute;
+  display: none;
+  z-index: 1;
+  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
+  border-radius: 0rem 0rem 1rem 1rem;
+  background-color: #f1f1f1;
 
- nav ul li a:hover, nav ul li a:visited:hover {
-	 background: #9b59b6;
-     color: #fff;
-}
- nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
-	 padding-left: 4px;
-	 content: ' ▾';
-}
- nav ul li ul li {
-	 min-width: 190px;
-}
- nav ul li ul li a {
-	 padding: 15px;
-	 line-height: 20px;
-}
- .nav-dropdown {
-	 position: absolute;
-	 display: none;
-	 z-index: 1;
-}
-/* Mobile navigation */
- .nav-mobile {
-	 display: none;
-	 position: absolute;
-	 top: 0;
-	 right: 0;
-     background-color: #f1f1f1;
-	 height: 70px;
-	 width: 70px;
-}
- @media only screen and (max-width: 798px) {
-	 .nav-mobile {
-		 display: block;
-	}
-	 nav {
-		 width: 100%;
-		 padding: 70px 0 15px;
-	}
-	 nav ul {
-		 display: none;
-	}
-    .main-nav-item {
-        padding: 14px 20px !important;
-    }
-	 nav ul li {
-		 float: none;
-	}
-	 nav ul li a {
-		 padding: 15px;
-		 line-height: 20px;
-         padding: 1em;
-	}
-	 nav ul li ul li a {
-		 padding-left: 30px;
-	}
-	 .nav-dropdown {
-		 position: static;
-	}
-}
- @media screen and (min-width: 799px) {
-	 .nav-list {
-		 display: block !important;
-	}
-}
- #nav-toggle {
-	 position: absolute;
-	 left: 18px;
-	 top: 22px;
-	 cursor: pointer;
-	 padding: 10px 35px 16px 0px;
-}
- #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
-	 cursor: pointer;
-	 border-radius: 1px;
-	 height: 5px;
-	 width: 35px;
-	 background: black;
-	 position: absolute;
-	 display: block;
-	 content: '';
-	 transition: all 300ms ease-in-out;
-}
- #nav-toggle span:before {
-	 top: -10px;
-}
- #nav-toggle span:after {
-	 bottom: -10px;
-}
- #nav-toggle.active span {
-	 background-color: transparent;
-}
- #nav-toggle.active span:before, #nav-toggle.active span:after {
-	 top: 0;
-}
- #nav-toggle.active span:before {
-	 transform: rotate(45deg);
-}
- #nav-toggle.active span:after {
-	 transform: rotate(-45deg);
-}
- article {
-	 max-width: 1000px;
-	 margin: 0 auto;
-	 padding: 10px;
-}
-
+}
diff --git a/_css/side-menu.css b/_css/side-menu.css
@@ -59,12 +59,29 @@ The content `<div>` is where all your content goes.
      text-align: center;
      padding: 2.5em 2em 0;
      border-bottom: 1px solid #eee;
+     position: relative;
  }
     .header h1 {
         margin: 0.2em 0;
         font-size: 3em;
         font-weight: 300;
     }
+    .header h1::before {
+        content: url('https://seeklogo.com/images/J/julia-logo-DC9698BAF9-seeklogo.com.png');
+        display: inline-block;
+        vertical-align: middle;
+        margin-bottom: 2.8rem;
+        margin-left: -3rem;
+        transform: scale(0.19);
+        width: 120px;
+        height: 40px;
+      }
+      /* media queries for header */
+      @media only screen and (max-width: 800px) {
+        .header h1::before {
+         display: none;
+        }
+      }
      .header h2 {
         font-weight: 300;
         color: #ccc;