update

rafizunaed · Mar 17, 2024 · 17222e6 · 17222e6
1 parent 0010a9b
commit 17222e6
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -26,33 +26,27 @@
  <div class="navbar">
 
  <!-- Coloumn/Section 1: Home Button -->
- <div class="nav_button">
- <a class="a_nav_button" href="#about_me">Home</a>
- </div>
-
- <!-- Coloumn/Section 2: Other Buttons -->
- <div class="non-home">
-
- <div class="nav_button">
+ <div class="dropdown">
+ <button class="dropbtn">
+ <div class="dropbtn_block">
+ <div>Menu</div>
+ <div class="triangle-down"></div>
+ </div>
+ </button>
+ <div class="dropdown-content">
+ <a class="a_nav_button" href="#about_me">Home</a>
+ <a class="a_nav_button" href="#news_section">News</a>
  <a class="a_nav_button" href="#publications_section">Publications</a>
- </div>
-
- <!-- <div class="nav_button">
  <a class="a_nav_button" href="#achievements_section">Achievements</a>
- </div>
-
- <div class="nav_button">
  <a class="a_nav_button" href="#experience_section">Experience</a>
  </div>
- 
- <div class="nav_button">
- <a class="a_nav_button" href="#news_section">News</a>
- </div>-->
-
+ </div>
+
+ <!-- Coloumn/Section 2: Other Buttons -->
+ <div class="non-home">
  <div class="nav_button">
  <a class="a_nav_button" href="https://drive.google.com/file/d/1E2wkQke_x5_o1kKpNNS3uGhJ2DKnouIG/view?usp=sharing" target="_blank">CV</a>
  </div>
-
  </div>
 
  </div>

diff --git a/styles/body.css b/styles/body.css
@@ -1,7 +1,7 @@
 :root {
  --desktop-body-margin-left: 2vw;
  --desktop-body-margin-right: 2vw;
- --desktop-body-margin-top: 5.5vw;
+ --desktop-body-margin-top: 8vw;
 
  --desktop-body-fontsize: 1.4vw;
  --body-font-family: Helvetica;
@@ -45,12 +45,12 @@ a:hover{
 
 .section_anchor {
  position: relative;
- top: -5vh;
+ top: -7.5vh;
 }
 
 .first_section_anchor {
  position: relative;
- top: -12vh;
+ top: -15vh;
 }
 
 

diff --git a/styles/common.css b/styles/common.css
@@ -8,7 +8,7 @@
 .experience {
  margin-left: var(--desktop-body-margin-left);
  margin-right: var(--desktop-body-margin-right);
- margin-top: var(--desktop-body-margin-top);
+ margin-top: 5vh; /*var(--desktop-body-margin-top);*/
 }
 
 .achievements_main_header,

diff --git a/styles/navbar.css b/styles/navbar.css
@@ -5,14 +5,17 @@
  --desktop-navbar-padding-bottom: 1vw;
 
  --desktop-navbar-fontsize: 1.75vw;
- --desktop-navbar-nonhome-width: 15vw; /* 50vw */
+ --desktop-navbar-nonhome-width: 5vw; /* 50vw */
 
  --navbar-fontcolor: rgb(225, 149, 9);
  --navbar-fontcolor-hover: rgb(36, 39, 226);
  --navbar-background-color: rgb(25, 26, 26);
  --navbar-border-bottom-size: 0.1vw;
  --navbar-border-bottom-color: white;
  --navbar-color-transition: 0.5s;
+
+ --mobile-navbar-fontsize: 4vw;
+ --mobile-navbar-nonhome-width: 7vw;
 }
 
 .navbar {
@@ -68,11 +71,82 @@
  cursor: pointer;
 }
 
+
+/* The dropdown container */
+.dropdown {
+ float: left;
+ overflow: hidden;
+}
+
+/* Dropdown button */
+.dropdown .dropbtn {
+ font-size: var(--desktop-navbar-fontsize);
+ font-weight: bold;
+ color: var(--navbar-fontcolor);
+
+ border: none;
+ outline: none;
+ /*color: white;*/
+ padding: 0.5vw 0.5vw; /*14px 16px;*/
+ background-color: inherit;
+ font-family: inherit; /* Important for vertical align on mobile phones */
+ margin: 0; /* Important for vertical align on mobile phones */
+}
+
+/* Dropdown content (hidden by default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: var(--body-background-color); /*rgba(50, 48, 48, 1);*/
+ min-width: 10vw; /* 160px;*/
+ /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
+ z-index: 1;
+}
+
+.dropdown:hover .dropbtn {
+ background-color: var(--body-background-color); /*rgba(50, 48, 48, 1);*/
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ float: none;
+ color: black;
+ padding: 0.5vw 0.5vw; /*12px 16px;*/
+ text-decoration: none;
+ display: block;
+ text-align: left;
+}
+
+/* Add a grey background color to dropdown links on hover */
+/*.dropdown-content a:hover {
+ background-color: #ddd;
+}*/
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.triangle-down {
+ width: 0;
+ height: 0;
+ border-left: 0.4vw solid transparent;
+ border-right: 0.4vw solid transparent;
+ border-top: 0.8vw solid var(--navbar-fontcolor);
+}
+
+.dropbtn_block{
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ align-items: center;
+ column-gap: 0.4vw;
+}
+
 /* Mobile Device Changes */
 @media screen and (max-aspect-ratio:1.5)
 {
  .navbar {
- font-size: 4vw;
+ font-size: var(--mobile-navbar-fontsize);
  /*flex-direction: column;
  align-items: center;
  justify-content: space-between;
@@ -81,7 +155,7 @@
  }
 
  .non-home {
- width: 35vw; /*none;*/
+ width: var(--mobile-navbar-nonhome-width); /*none;*/
  /*display: flex;
  flex-direction: column;
  align-items: center;
@@ -91,6 +165,18 @@
  .a_nav_button:link,
  .a_nav_button:visited,
  .a_nav_button:active {
- font-size: 4vw;
+ font-size: var(--mobile-navbar-fontsize);
+ }
+
+ .dropdown .dropbtn {
+ font-size: var(--mobile-navbar-fontsize);
+ }
+
+ .triangle-down {
+ width: 0;
+ height: 0;
+ border-left: 1vw solid transparent;
+ border-right: 1vw solid transparent;
+ border-top: 2vw solid var(--navbar-fontcolor);
  }
 }