From 6fe01ca1f8762514e3205bfa8b3e846426fa25a9 Mon Sep 17 00:00:00 2001
From: Sravan Balaji <balajsra@umich.edu>
Date: Thu, 2 Jan 2025 10:05:06 -0500
Subject: [PATCH] Fix duplicate bootstrap causing strange issues

---
 src/_includes/partials/navigation.html |   5 +-
 src/_includes/partials/site-head.html  |  17 ++--
 src/style.css                          | 130 ++++++++++++-------------
 3 files changed, 78 insertions(+), 74 deletions(-)

diff --git a/src/_includes/partials/navigation.html b/src/_includes/partials/navigation.html
index cd4d0ed..6513865 100644
--- a/src/_includes/partials/navigation.html
+++ b/src/_includes/partials/navigation.html
@@ -10,13 +10,12 @@
       </a>
 
       <!-- Toggler/collapsible Button -->
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"
-        aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler">
         <span class="navbar-toggler-icon"></span>
       </button>
 
       <!-- Navbar links -->
-      <div class="collapse navbar-collapse" id="collapsibleNavbar">
+      <div class="collapse navbar-collapse" id="navbarToggler">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             {% for item in navigation.items %}
             <li class="nav-item">
diff --git a/src/_includes/partials/site-head.html b/src/_includes/partials/site-head.html
index 5e93a27..3f1a0ac 100644
--- a/src/_includes/partials/site-head.html
+++ b/src/_includes/partials/site-head.html
@@ -5,13 +5,18 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <!-- Bootstrap -->
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+    crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+    integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
+    crossorigin="anonymous"></script>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
 <!-- jQuery -->
-<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+    integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
 
 <!-- highlight.js -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
@@ -25,4 +30,4 @@
 <link rel="icon" href="/assets/branding/favicon.ico" type="image/x-icon" />
 
 <!-- Title -->
-<title>{{ title }}</title>
+<title>{{ title }}</title>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 54d833e..84ba3c1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,178 +3,178 @@
  ****************/
 /* Light Mode */
 :root[color-mode="light"] {
-	--primary-color: #ffcb05;
-	--secondary-color: #00274c;
-	--tertiary-color: #007bff;
-	--quaternary-color: #ffffff;
-	--quinary-color: #e83e8c;
-	--background-color: #e8eef2;
-	--font-color: #000000;
+  --primary-color: #ffcb05;
+  --secondary-color: #00274c;
+  --tertiary-color: #007bff;
+  --quaternary-color: #ffffff;
+  --quinary-color: #e83e8c;
+  --background-color: #e8eef2;
+  --font-color: #000000;
 }
 
 /* Dark Mode */
 :root[color-mode="dark"] {
-	--primary-color: #bd93f9;
-	--secondary-color: #44475a;
-	--tertiary-color: #8be9fd;
-	--quaternary-color: #6272a4;
-	--quinary-color: #ff79c6;
-	--background-color: #282a36;
-	--font-color: #f8f8f2;
+  --primary-color: #bd93f9;
+  --secondary-color: #44475a;
+  --tertiary-color: #8be9fd;
+  --quaternary-color: #6272a4;
+  --quinary-color: #ff79c6;
+  --background-color: #282a36;
+  --font-color: #f8f8f2;
 }
 
 /***********
  * General *
  ***********/
 body {
-	background-color: var(--background-color);
-	padding-top: 65px;
-	font-family: Arial, Verdana, Tahoma, sans-serif;
+  background-color: var(--background-color);
+  padding-top: 65px;
+  font-family: Arial, Verdana, Tahoma, sans-serif;
 }
 
 label {
-	color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 a {
-	color: var(--tertiary-color);
+  color: var(--tertiary-color);
 }
 
 code {
-	color: var(--quinary-color);
+  color: var(--quinary-color);
 }
 
 hr {
-	border-color: var(--font-color);
-	opacity: 0.1;
+  border-color: var(--font-color);
+  opacity: 0.1;
 }
 
 /****************
  * Main Content *
  ****************/
 .my-nav {
-	background: var(--secondary-color);
-	font-size: 18px;
+  background: var(--secondary-color);
+  font-size: 18px;
 }
 
 .my-nav .nav-link {
-	color: var(--primary-color);
+  color: var(--primary-color);
 }
 
 .my-nav .nav-link:hover {
-	color: var(--tertiary-color);
+  color: var(--tertiary-color);
 }
 
 .my-nav .navbar-toggler-icon {
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 39, 76, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }
 
 .my-nav .navbar-toggler {
-	background: var(--primary-color);
+  background: var(--primary-color);
 }
 
 .container-fluid {
-	color: var(--font-color);
-	font-size: 18px;
+  color: var(--font-color);
+  font-size: 18px;
 }
 
 .container-fluid h1 {
-	padding: 10px 10px;
-	background: var(--secondary-color);
-	color: var(--primary-color);
+  padding: 10px 10px;
+  background: var(--secondary-color);
+  color: var(--primary-color);
 }
 
 .row {
-	/* border: 1px solid red; */
-	margin-bottom: 10px;
+  /* border: 1px solid red; */
+  margin-bottom: 10px;
 }
 
 /* Add an invisible target before
    anchor links so navbar doesn't
    block content */
 :target::before {
-	content: "";
-	display: block;
-	margin-top: -80px;
-	height: 80px;
-	width: 1px;
+  content: "";
+  display: block;
+  margin-top: -80px;
+  height: 80px;
+  width: 1px;
 }
 
 /* Side Padding */
 @media (min-width: 768px) {
-	.px-md-6 {
-		padding-left: 12.5% !important;
-		padding-right: 12.5% !important;
-	}
+  .px-md-6 {
+    padding-left: 12.5% !important;
+    padding-right: 12.5% !important;
+  }
 }
 
 #bio img {
-	max-height: 500px;
+  max-height: 500px;
 }
 
 #contact_me img {
-	max-height: 100px;
+  max-height: 100px;
 }
 
 #software img {
-	max-height: 200px;
+  max-height: 200px;
 }
 
 #hardware img {
-	max-height: 400px;
+  max-height: 400px;
 }
 
 #video_games img {
-	max-height: 250px;
+  max-height: 250px;
 }
 
 #podcasts img {
-	max-height: 200px;
+  max-height: 200px;
 }
 
 #resume iframe {
-	width: 100%;
-	height: 750px;
+  width: 100%;
+  height: 750px;
 }
 
 #education img {
-	max-height: 225px;
+  max-height: 225px;
 }
 
 #professional_experience img {
-	max-height: 225px;
+  max-height: 225px;
 }
 
 #research img {
-	max-height: 400px;
+  max-height: 400px;
 }
 
 #projects img {
-	max-height: 400px;
+  max-height: 400px;
 }
 
 .blog-cover img {
-	max-height: 500px;
-	margin: auto;
-	display: block;
+  max-height: 500px;
+  margin: auto;
+  display: block;
 }
 
 .card {
-	background-color: var(--background-color);
+  background-color: var(--background-color);
 }
 
 .card-header {
-	background-color: var(--secondary-color);
+  background-color: var(--secondary-color);
 }
 
 .card-body {
-	background-color: var(--quaternary-color);
+  background-color: var(--quaternary-color);
 }
 
 .dropdown-menu {
-	background-color: var(--quaternary-color);
+  background-color: var(--quaternary-color);
 }
 
 .dropdown-item {
-	color: var(--font-color);
-}
+  color: var(--font-color);
+}
\ No newline at end of file