sravan/sravanbalaji.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix duplicate bootstrap causing strange issues

Browse Source
This commit is contained in:
Sravan Balaji
2025-01-02 10:05:06 -05:00
parent a72c989a7d
commit 6fe01ca1f8
3 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/_includes/partials/navigation.html
View File

@@ -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">

17
src/_includes/partials/site-head.html
View File

@@ -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>

130
src/style.css
View File

@@ -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);
}