commit a910ae3ba1c04ee83411cc581cea654710f14a3a
author Omkar Sonawane <163371960+OmkarSonawane1230@users.noreply.github.com> Tue Mar 19 13:42:08 2024 +0000
committer Omkar Sonawane <163371960+OmkarSonawane1230@users.noreply.github.com> Tue Mar 19 13:42:08 2024 +0000
tree 8d01ad59a1590d8dc7d8a86c63f41266a34b4841
parent c1087eb18a6d51d64e568c1f2fc39bcd7e490b58

Update the navigation and give some final touches

content/css/new-ui.css

diff --git a/content/css/new-ui.css b/content/css/new-ui.css
new file mode 100644
index 0000000..8cc8e9c
--- /dev/null
+++ b/content/css/new-ui.css
@@ -0,0 +1,30 @@
+/* Updating the Navbar */
+.n-navbar-padding {
+    padding-bottom: 5px;
+}
+
+.dropdown > a {
+    padding-block: 10px !important;
+    border-radius: 5px;
+}
+
+.dropdown > a > span {
+    scale: 1.35;
+    transition: 500ms;
+}
+
+/* Giving a rotating animation when in focus */
+.dropdown.open > a > span {
+    transform: rotate(180deg);
+}
+
+/* Updating dropdown */
+.dropdown-menu {
+    min-width: 100%;
+    border: .5px solid grey;
+    border-radius: 0 0 10px 10px;
+}
+
+.dropdown-menu > li > a {
+    padding-block: 10px;
+}
\ No newline at end of file

theme/apache/templates/base.html

diff --git a/theme/apache/templates/base.html b/theme/apache/templates/base.html
index 080d91a..753a386 100644
--- a/theme/apache/templates/base.html
+++ b/theme/apache/templates/base.html
@@ -30,6 +30,7 @@
   <link href="/css/Montserrat-300-600.css" rel="stylesheet">
   <link href="/css/min.bootstrap.css" rel="stylesheet">
   <link href="/css/styles.css" rel="stylesheet">
+  <link href="/css/new-ui.css" rel="stylesheet">
   <style>
     {% include "styles.css" %}
   </style>
@@ -109,7 +110,7 @@
             </div>
             <a href="/foundation/sponsorship" class="btn btn-default" onclick="_paq.push(['trackEvent', 'click', 'SponsorASF Button']);">Sponsor the ASF</a>
           </div>
-          <ul class="nav navbar-nav navbar-justified">
+          <ul class="nav navbar-nav navbar-justified n-navbar-padding">
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Community&nbsp;<span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
@@ -320,6 +321,7 @@
   <script src="/js/jquery.min.js"></script>
   <script src="/js/bootstrap.js"></script>
   <script src="/js/slideshow.js"></script>
+  <script src="/js/new-ui.js"></script>
   <script>
     (function($){
       $(document).ready(function(){