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> </a>
<!-- Toggler/collapsible Button --> <!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler">
aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- Navbar links --> <!-- 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"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% for item in navigation.items %} {% for item in navigation.items %}
<li class="nav-item"> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap --> <!-- 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/@popperjs/core@2.11.8/dist/umd/popper.min.js"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> crossorigin="anonymous"></script>
<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/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 --> <!-- 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 --> <!-- highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <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" /> <link rel="icon" href="/assets/branding/favicon.ico" type="image/x-icon" />
<!-- Title --> <!-- Title -->
<title>{{ title }}</title> <title>{{ title }}</title>

130
src/style.css
View File

@@ -3,178 +3,178 @@
****************/ ****************/
/* Light Mode */ /* Light Mode */
:root[color-mode="light"] { :root[color-mode="light"] {
--primary-color: #ffcb05; --primary-color: #ffcb05;
--secondary-color: #00274c; --secondary-color: #00274c;
--tertiary-color: #007bff; --tertiary-color: #007bff;
--quaternary-color: #ffffff; --quaternary-color: #ffffff;
--quinary-color: #e83e8c; --quinary-color: #e83e8c;
--background-color: #e8eef2; --background-color: #e8eef2;
--font-color: #000000; --font-color: #000000;
} }
/* Dark Mode */ /* Dark Mode */
:root[color-mode="dark"] { :root[color-mode="dark"] {
--primary-color: #bd93f9; --primary-color: #bd93f9;
--secondary-color: #44475a; --secondary-color: #44475a;
--tertiary-color: #8be9fd; --tertiary-color: #8be9fd;
--quaternary-color: #6272a4; --quaternary-color: #6272a4;
--quinary-color: #ff79c6; --quinary-color: #ff79c6;
--background-color: #282a36; --background-color: #282a36;
--font-color: #f8f8f2; --font-color: #f8f8f2;
} }
/*********** /***********
* General * * General *
***********/ ***********/
body { body {
background-color: var(--background-color); background-color: var(--background-color);
padding-top: 65px; padding-top: 65px;
font-family: Arial, Verdana, Tahoma, sans-serif; font-family: Arial, Verdana, Tahoma, sans-serif;
} }
label { label {
color: var(--primary-color); color: var(--primary-color);
} }
a { a {
color: var(--tertiary-color); color: var(--tertiary-color);
} }
code { code {
color: var(--quinary-color); color: var(--quinary-color);
} }
hr { hr {
border-color: var(--font-color); border-color: var(--font-color);
opacity: 0.1; opacity: 0.1;
} }
/**************** /****************
* Main Content * * Main Content *
****************/ ****************/
.my-nav { .my-nav {
background: var(--secondary-color); background: var(--secondary-color);
font-size: 18px; font-size: 18px;
} }
.my-nav .nav-link { .my-nav .nav-link {
color: var(--primary-color); color: var(--primary-color);
} }
.my-nav .nav-link:hover { .my-nav .nav-link:hover {
color: var(--tertiary-color); color: var(--tertiary-color);
} }
.my-nav .navbar-toggler-icon { .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 { .my-nav .navbar-toggler {
background: var(--primary-color); background: var(--primary-color);
} }
.container-fluid { .container-fluid {
color: var(--font-color); color: var(--font-color);
font-size: 18px; font-size: 18px;
} }
.container-fluid h1 { .container-fluid h1 {
padding: 10px 10px; padding: 10px 10px;
background: var(--secondary-color); background: var(--secondary-color);
color: var(--primary-color); color: var(--primary-color);
} }
.row { .row {
/* border: 1px solid red; */ /* border: 1px solid red; */
margin-bottom: 10px; margin-bottom: 10px;
} }
/* Add an invisible target before /* Add an invisible target before
anchor links so navbar doesn't anchor links so navbar doesn't
block content */ block content */
:target::before { :target::before {
content: ""; content: "";
display: block; display: block;
margin-top: -80px; margin-top: -80px;
height: 80px; height: 80px;
width: 1px; width: 1px;
} }
/* Side Padding */ /* Side Padding */
@media (min-width: 768px) { @media (min-width: 768px) {
.px-md-6 { .px-md-6 {
padding-left: 12.5% !important; padding-left: 12.5% !important;
padding-right: 12.5% !important; padding-right: 12.5% !important;
} }
} }
#bio img { #bio img {
max-height: 500px; max-height: 500px;
} }
#contact_me img { #contact_me img {
max-height: 100px; max-height: 100px;
} }
#software img { #software img {
max-height: 200px; max-height: 200px;
} }
#hardware img { #hardware img {
max-height: 400px; max-height: 400px;
} }
#video_games img { #video_games img {
max-height: 250px; max-height: 250px;
} }
#podcasts img { #podcasts img {
max-height: 200px; max-height: 200px;
} }
#resume iframe { #resume iframe {
width: 100%; width: 100%;
height: 750px; height: 750px;
} }
#education img { #education img {
max-height: 225px; max-height: 225px;
} }
#professional_experience img { #professional_experience img {
max-height: 225px; max-height: 225px;
} }
#research img { #research img {
max-height: 400px; max-height: 400px;
} }
#projects img { #projects img {
max-height: 400px; max-height: 400px;
} }
.blog-cover img { .blog-cover img {
max-height: 500px; max-height: 500px;
margin: auto; margin: auto;
display: block; display: block;
} }
.card { .card {
background-color: var(--background-color); background-color: var(--background-color);
} }
.card-header { .card-header {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }
.card-body { .card-body {
background-color: var(--quaternary-color); background-color: var(--quaternary-color);
} }
.dropdown-menu { .dropdown-menu {
background-color: var(--quaternary-color); background-color: var(--quaternary-color);
} }
.dropdown-item { .dropdown-item {
color: var(--font-color); color: var(--font-color);
} }