navigation

qizhang94 · Dec 11, 2023 · 51a6527 · 51a6527
1 parent 5cddbf2
commit 51a6527
Show file tree

Hide file tree

Showing 3 changed files with 301 additions and 0 deletions.
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -33,9 +33,35 @@
     <link rel="stylesheet" href="./assets/css/style-no-dark-mode.css">
     <link rel="stylesheet" href="./assets/css/publications-no-dark-mode.css">
     {% endif %}
+
+   <script>
+      function myFunction() {
+      var x = document.getElementById("myLinks");
+      if (x.style.display === "block") {
+        x.style.display = "none";
+      } else {
+        x.style.display = "block";
+      }
+      }
+   </script>	
 
   </head>
   <body>
+
+    <div class="topnav">
+
+      <a href="{{ site.affiliation_link }}"><img width="190" src="{{ site.affiliation_logo }}"></a>
+
+      <div id="myLinks">
+      {% include navigation.md %}
+      </div>
+
+      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+        <i class="fa fa-bars"></i>
+      </a>
+
+    </div>  
+
     <div class="wrapper">
       <header>
 

diff --git a/assets/css/nav-ori.css b/assets/css/nav-ori.css
@@ -0,0 +1,113 @@
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #002D72;
+    overflow: hidden;
+	position:fixed;
+	z-index:999;
+    width:100%;
+  }
+
+  .topnav img {
+    margin-bottom:-17.5pt;
+    margin-top:-16.5pt;
+    margin-left:30%;
+  }
+
+  /* Style the links inside the navigation bar */
+  .topnav a {
+    float: right;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 18px 9px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+
+  /* Change the color of links on hover */
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  /* Add a color to the active/current link */
+  .topnav a.right {
+    margin-right:30%;
+  }
+
+  @media print, screen and (max-width: 1000px) { 
+
+    .topnav img {
+        margin-left:3%;
+      }
+
+    .topnav a.right {
+        margin-right:3%;
+      }
+
+    .topnav a {
+        padding: 18px 5px;
+    }
+
+   }
+
+   @media print, screen and (max-width: 1200px) and (min-width: 1001px) { 
+
+    .topnav img {
+        margin-left:6%;
+      }
+    .topnav a.right {
+        margin-right:6%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 1400px) and (min-width: 1201px) { 
+
+    .topnav img {
+        margin-left:12%;
+      }
+    .topnav a.right {
+        margin-right:12%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 1600px) and (min-width: 1401px) { 
+
+    .topnav img {
+        margin-left:16%;
+      }
+    .topnav a.right {
+        margin-right:16%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 1800px) and (min-width: 1601px) { 
+
+    .topnav img {
+        margin-left:19%;
+      }
+    .topnav a.right {
+        margin-right:19%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 2000px) and (min-width: 1801px) { 
+
+    .topnav img {
+        margin-left:22%;
+      }
+    .topnav a.right {
+        margin-right:22%;
+      }
+
+   }
+
+
+   @media print, screen and (max-width: 480px) { .topnav { visibility: hidden; } .topnav { visibility: hidden; } }
+
+   @media print, screen and (max-width: 960px) { .topnav { visibility: hidden; } .topnav { visibility: hidden; } }
+
+
diff --git a/assets/css/nav.css b/assets/css/nav.css
@@ -0,0 +1,162 @@
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #002D72;
+    overflow: hidden;
+	position:fixed;
+	z-index:999;
+    width:100%;
+  }
+
+
+  .topnav #myLinks {
+    display: inline;
+  }
+
+.topnav a.icon {
+    display: none;
+}
+
+  .topnav img {
+    margin-bottom:-16.5pt;
+    margin-top:-12.5pt;
+    margin-left:30%;
+  }
+
+  /* Style the links inside the navigation bar */
+  .topnav a.normal {
+    float: right;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 10px 9px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+
+  /* Change the color of links on hover */
+  .topnav a.normal:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  /* Add a color to the active/current link */
+  .topnav a.right {
+    margin-right:30%;
+  }
+
+  @media print, screen and (max-width: 1000px) { 
+
+    .topnav img {
+        margin-left:3%;
+      }
+
+    .topnav a.right {
+        margin-right:3%;
+      }
+
+    .topnav a.normal {
+        padding: 10px 5px;
+    }
+
+   }
+
+   @media print, screen and (max-width: 1200px) and (min-width: 1001px) { 
+
+    .topnav img {
+        margin-left:6%;
+      }
+    .topnav a.right {
+        margin-right:6%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 1400px) and (min-width: 1201px) { 
+
+    .topnav img {
+        margin-left:12%;
+      }
+    .topnav a.right {
+        margin-right:12%;
+      }
+
+      }
+
+
+   @media print, screen and (max-width: 1600px) and (min-width: 1401px) { 
+
+    .topnav img {
+        margin-left:16%;
+      }
+    .topnav a.right {
+        margin-right:16%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 1800px) and (min-width: 1601px) { 
+
+    .topnav img {
+        margin-left:19%;
+      }
+    .topnav a.right {
+        margin-right:19%;
+      }
+
+   }
+
+   @media print, screen and (max-width: 2000px) and (min-width: 1801px) { 
+
+    .topnav img {
+        margin-left:22%;
+      }
+    .topnav a.right {
+        margin-right:22%;
+      }
+
+   }
+
+
+   @media print, screen and (max-width: 480px) { 
+    .topnav #myLinks {
+        display: none;
+      }
+   }
+
+   @media print, screen and (max-width: 960px) { 
+    .topnav #myLinks {
+        display: none;
+      }
+
+      .topnav a.normal {
+        color: white;
+        float: none;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+        display: block;
+      }
+
+      .topnav a.icon {
+        color: white;
+        display: block;
+        padding: 10px 16px;
+        font-size: 17px;
+        position: absolute;
+        float: right;
+        right: 0;
+        top: 0;
+        margin-right:5%;
+      }
+
+      .topnav a.right {
+        color: white;
+        float: none;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+        display: block;
+        margin-right:0;
+      }
+   }
+
+