Improved the design of Navbar publiclab#596

ThisisMS11 · May 22, 2023 · a28765c · a28765c
1 parent 394b3c0
commit a28765c
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 44 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -1,26 +1,39 @@
 /* https://github.com/theleagueof/league-spartan */
 @font-face {
     font-family: 'League Spartan';
-      src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'),
-           url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff');
+    src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'),
+        url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff');
     font-weight: bold;
     font-style: normal;
 }
 
 body {
-  padding: 20px;
-  margin: 0 auto 20px;
-  max-width: 1000px;
-  background: #f8f8fa;
+    padding: 20px;
+    margin: 0 auto 20px;
+    max-width: 1000px;
+    background: #f8f8fa;
 }
 
 /* Navbar CSS */
-#logo-img{
+#logo-img {
     height: 100px;
 }
 
 nav {
     z-index: 100;
+    /* background-color: black; */
+    color: white;
+}
+
+nav::before {
+    content: "";
+    background-color: rgb(81, 80, 80);
+    border-radius: 150px;
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100px;
+    z-index: -1;
 }
 
 nav:after {
@@ -34,6 +47,7 @@ nav ul {
     list-style: none;
     margin-right: 40px;
     position: relative;
+    top: 16px;
 }
 
 
@@ -46,23 +60,26 @@ nav ul li a {
     color: #a1a1a1;
     text-decoration: none;
     line-height: 70px;
-    font-size: 15px;
+    font-size: 20px;
     padding: 8px 15px;
 }
 
 nav ul li a:hover {
     text-decoration: none;
-    color: #669dc9;
-    box-shadow: 0 0 5px #669dc9,
-        0 0 5px #669dc9;
-}  
+    color: white;
+    /* box-shadow: 0 0 5px #669dc9,0 0 5px #669dc9; */
+}
 
-nav ul ul li{
-    background-color: #f8f8fa;
+nav ul ul li {
+    background-color: rgb(81, 80, 80);
+}
+
+nav ul ul li a{
+    font-size: 15px;
 }
 
 nav ul ul li a:hover {
-    color: #34A7C1;
+    color: white;
 
     box-shadow: none;
 }
@@ -73,7 +90,7 @@ nav ul ul {
     opacity: 0;
     visibility: hidden;
     transition: top .3s;
-    border-top: 3px solid #aaa3a3;
+    /* border-top: 3px solid #aaa3a3; */
 }
 
 nav ul ul ul {
@@ -92,7 +109,7 @@ nav ul ul li {
     width: 200px;
     float: none;
     display: list-item;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0.4); */
 }
 
 ul {
@@ -106,16 +123,17 @@ a {
 nav ul ul li a {
     line-height: 50px;
 }
+
 /* Navbar ends  */
 
 
 
 /* dependency chart */
-#dependency-div{
+#dependency-div {
     text-align: center;
 }
 
-.dependency-chart{
+.dependency-chart {
     border-radius: 8px;
     width: 100%;
 }
@@ -132,24 +150,26 @@ nav ul ul li a {
     height: 5px;
 }
 
-h1, h2, .section h3 {
-  font-family: 'League Spartan';
-  color: #445;
-  padding-top: 20px;
-  text-align: center;
-  line-height: 1.3em;
+h1,
+h2,
+.section h3 {
+    font-family: 'League Spartan';
+    color: #445;
+    padding-top: 20px;
+    text-align: center;
+    line-height: 1.3em;
 }
 
-.row.section  img {
-  max-width: 90%;
+.row.section img {
+    max-width: 90%;
 }
 
 .row.section p {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 .header {
-  text-align: center;
+    text-align: center;
 }
 
 #back2Top {
@@ -178,6 +198,7 @@ h1, h2, .section h3 {
     color: #000;
     box-shadow: -1px 1px 1px 1px lightgrey;
 }
+
 #back2Top:active {
     box-shadow: none;
 }
@@ -213,7 +234,7 @@ h1, h2, .section h3 {
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
 }
 
 
@@ -267,10 +288,12 @@ h1, h2, .section h3 {
     display: inline-block;
     height: 100%;
 }
+
 .recent-contribs-dropdown {
     margin-right: 10px;
     text-align: center;
 }
+
 .recent-contribs-show-dropdown {
     width: 12em;
 }
@@ -289,6 +312,7 @@ h1, h2, .section h3 {
 #dropdownMenuButtonRCS {
     font-weight: bolder;
 }
+
 #dropdownMenuButtonRC,
 #dropdownMenuButtonRCS {
     font-family: 'Open sans', serif;
@@ -340,7 +364,8 @@ h1, h2, .section h3 {
 }
 
 
-.pics img, .avatars img {
+.pics img,
+.avatars img {
     margin: 5px 5px;
 }
 
@@ -361,8 +386,9 @@ h1, h2, .section h3 {
     overflow: scroll;
     max-height: 1000px;
 }
+
 /* Languages list */
-.language{
+.language {
     margin-bottom: 20px;
     padding: 10px;
     background-color: rgba(221, 221, 221, 0.493);
@@ -373,8 +399,8 @@ h1, h2, .section h3 {
     flex-wrap: wrap;
 }
 
-.conatiner-language{
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+.conatiner-language {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     line-height: 1.42857143;
     color: #333;
@@ -387,11 +413,12 @@ h1, h2, .section h3 {
     position: relative;
     display: block;
 }
-.repo-name{
+
+.repo-name {
     width: 76%;
 }
 
-.badge{
+.badge {
     border-radius: 5px;
 }
 
@@ -432,6 +459,7 @@ h1, h2, .section h3 {
     border-radius: 1em;
     background-color: rgba(231, 226, 219, 0.548);
 }
+
 /* 
 #refresh-status {
     margin: 0;
@@ -452,13 +480,15 @@ h1, h2, .section h3 {
     transform: rotate(100deg) scale3d(0.97, 0.99, 0.96);
     cursor: pointer;
 }
-.sort-options{
+
+.sort-options {
     width: auto;
     height: 2em;
     text-align: center;
     cursor: pointer;
 }
-.side-display{
+
+.side-display {
     display: flex;
     justify-content: space-between;
 }
@@ -469,4 +499,4 @@ h1, h2, .section h3 {
     .links {
         margin: 10px 0;
     }
-}
+}
diff --git a/index.html b/index.html
@@ -50,11 +50,12 @@
         <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"alt="Fork me on GitHub"></a>
       </div>
     </div> 
+
     <nav class="navbar">
         <img id="logo-img" src="./images/Boots-ground-02.png" alt="publiclab-logo" >
         <ul>
             <li class="list-i">
-                <a  href="#">LEARN</a>
+                <a  href="#">Learn</a>
                 <ul>
                     <li><a class="line" href="https://github.com/publiclab/plots2/blob/master/README.md">Get Started</a>
                     </li>
@@ -67,14 +68,14 @@
                 </ul>
             </li>
             <li class="list-i">
-                <a  href="#">ISSUES</a>
+                <a  href="#">Issues</a>
                 <ul>
                     <li><a class="line" href="#fto-issue-D">FTO Issues</a></li>
                     <li><a class="line" href="#stale-head">Stale Issues</a></li>
                 </ul>
             </li>
             <li class="list-i">
-                <a  href="#">PARTICIPANTS</a>
+                <a  href="#">Participants</a>
                 <ul>
                     <li><a class="line" href="#candidate">Candidates</a></li>
                     <li><a class="line" href="#fto-author">FTO Authors</a></li>
@@ -83,9 +84,9 @@
                     <li><a class="line" href="#lang-sec">Languages Used</a></li>
                 </ul>
             </li>
-            <li class="list-i"><a  class="line" href="https://publiclab.org/chat">CHATROOM</a></li>
+            <li class="list-i"><a  class="line" href="https://publiclab.org/chat">Chatroom</a></li>
             <li class="list-i">
-                <a  class="line" href="#">MORE</a>
+                <a  class="line" href="#">More</a>
                 <ul>
                     <li><a class="line" href="https://github.com/publiclab/community-toolbox">Source Code</a></li>
                     <li><a class="line" href="https://publiclab.org/conduct">Conduct</a></li>