Remove bootstrap entirely

dist/css/index.css

@@ -1,10 +1,10 @@
 :root {
   --main-font-family: Georgia, "Times New Roman", serif;
   --link-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  
+
   /* Light mode variables */
   --background-color: #fff;
-  --background-secondary: #f8f9fa; 
+  --background-secondary: #f8f9fa;
   --text-color: #212529;
   --text-secondary: #6c757d;
   --border-color: #dee2e6;
@@ -31,6 +31,11 @@
   }
 }
 
+/* ===== BASE STYLES ===== */
+* {
+  box-sizing: border-box;
+}
+
 html, body {
   height: 100%;
   margin: 0;
@@ -43,72 +48,423 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
 }
 
-/* Make main content grow to push footer down */
+p {
-main.container {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  color: inherit;
+}
+
+img {
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+ul, ol {
+  padding-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* ===== GRID SYSTEM ===== */
+.container {
+  --bs-gutter-x: 1.5rem;
+  width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
   flex: 1 0 auto;
 }
 
-/* Dark mode overrides for Bootstrap components */
+@media (min-width: 576px) {
-@media (prefers-color-scheme: dark) {
+  .container {
-  .bg-body-secondary {
+    max-width: 540px;
-    background-color: var(--background-secondary) !important;
-  }
-  
-  .text-body-emphasis {
-    color: var(--text-color) !important;
-  }
-  
-  .border, .border-bottom {
-    border-color: var(--border-color) !important;
-  }
-  
-  .link-secondary {
-    color: var(--text-secondary) !important;
-  }
-  
-  .shadow-sm, .shadow {
-    box-shadow: 0 .125rem .25rem var(--shadow-color) !important;
-  }
-  
-  .btn-light {
-    background-color: var(--background-secondary);
-    color: var(--text-color);
-    border-color: var(--border-color);
-  }
-  
-  .list-group-flush .list-group-item {
-    background-color: transparent;
-    color: var(--text-color);
-    border-color: var(--border-color);
-  }
-  
-  .text-muted {
-    color: var(--text-secondary) !important;
-  }
-
-  .figure-caption {
-    color: var(--text-secondary) !important;
   }
 }
 
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}
+
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+
+.row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.row.g-0 {
+  --bs-gutter-x: 0;
+  --bs-gutter-y: 0;
+}
+
+.col {
+  flex: 1 0 0%;
+}
+
+.col-2 {
+  flex: 0 0 auto;
+  width: 16.66666667%;
+}
+
+.col-5 {
+  flex: 0 0 auto;
+  width: 41.66666667%;
+}
+
+.col-8 {
+  flex: 0 0 auto;
+  width: 66.66666667%;
+}
+
+@media (min-width: 1200px) {
+  .col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+}
+
+/* ===== SPACING UTILITIES ===== */
+.m-0 { margin: 0 !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-3 { margin-top: 1rem !important; }
+.mt-4 { margin-top: 1.5rem !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mb-auto { margin-bottom: auto !important; }
+.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
+.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
+.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
+.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+.p-4 { padding: 1.5rem !important; }
+.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.pt-3 { padding-top: 1rem !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.ps-3 { padding-left: 1rem !important; }
+
+/* ===== DISPLAY UTILITIES ===== */
+.d-none { display: none !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+
+@media (min-width: 768px) {
+  .d-md-none { display: none !important; }
+  .d-md-inline { display: inline !important; }
+  .d-md-block { display: block !important; }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none { display: none !important; }
+  .d-lg-inline { display: inline !important; }
+  .d-lg-inline-block { display: inline-block !important; }
+  .d-lg-block { display: block !important; }
+  .d-lg-flex { display: flex !important; }
+}
+
+/* ===== FLEXBOX UTILITIES ===== */
+.flex-column { flex-direction: column !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+.flex-grow-1 { flex-grow: 1 !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-end { justify-content: flex-end !important; }
+.justify-content-evenly { justify-content: space-evenly !important; }
+.align-items-center { align-items: center !important; }
+
+@media (min-width: 768px) {
+  .flex-md-row { flex-direction: row !important; }
+}
+
+/* ===== GAP UTILITIES ===== */
+.gap-2 { gap: 0.5rem !important; }
+.gap-3 { gap: 1rem !important; }
+
+@media (min-width: 576px) {
+  .gap-sm-5 { gap: 3rem !important; }
+}
+
+/* ===== TYPOGRAPHY ===== */
+h3 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.h2 {
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.h4 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.h5 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+}
+
+h5 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.text-center { text-align: center !important; }
+.text-start { text-align: left !important; }
+.fst-italic { font-style: italic !important; }
+.lh-1 { line-height: 1 !important; }
+
+small {
+  font-size: 0.875em;
+}
+
+/* ===== COLOR UTILITIES ===== */
+.text-secondary {
+  color: var(--text-secondary) !important;
+}
+
+.text-muted {
+  color: var(--text-secondary) !important;
+}
+
+.text-body-emphasis {
+  color: var(--text-color) !important;
+}
+
+.bg-body-secondary {
+  background-color: var(--background-secondary) !important;
+}
+
+.link-secondary {
+  color: var(--text-secondary) !important;
+  text-decoration: none;
+}
+
+.link-secondary:hover {
+  color: var(--link-hover-color) !important;
+}
+
+.border-secondary {
+  border-color: var(--border-color) !important;
+}
+
+/* ===== BORDERS ===== */
+.border {
+  border: 1px solid var(--border-color) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+.rounded {
+  border-radius: 0.375rem !important;
+}
+
+/* ===== SHADOWS ===== */
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem var(--shadow-color) !important;
+}
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem var(--shadow-color) !important;
+}
+
+/* ===== POSITIONING ===== */
+.position-relative { position: relative !important; }
+.position-static { position: static !important; }
+
+/* ===== SIZING ===== */
+.w-100 { width: 100% !important; }
+
+/* ===== NAVIGATION ===== */
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: row;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-item {
+  display: list-item;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out;
+}
+
+.nav-link:hover {
+  color: var(--link-hover-color);
+}
+
+/* ===== LIST GROUPS ===== */
+.list-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.list-group-flush {
+  border-radius: 0;
+}
+
+.list-group-flush .list-group-item {
+  border-width: 0 0 1px;
+}
+
+.list-group-flush .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.5rem 1rem;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+}
+
+/* ===== HR ===== */
+hr {
+  margin: 1rem 0;
+  color: var(--border-color);
+  border: 0;
+  border-top: 1px solid;
+  opacity: 0.25;
+}
+
+/* ===== LINKS ===== */
 .link {
   font-family: var(--link-font-family);
   color: var(--link-color);
+  text-decoration: none;
 }
 
 .link:hover {
   color: var(--link-hover-color);
 }
 
+.link-underline-opacity-0 {
+  text-decoration: none;
+}
+
+.icon-link {
+  text-decoration: none;
+}
+
+.icon-link-hover:hover {
+  text-decoration: underline;
+}
+
+/* ===== UL/LIST ===== */
+.list {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* ===== CUSTOM COMPONENT STYLES ===== */
+.header-icon svg {
+  display: block;
+}
+
 .section {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
 .paper-container {
-  padding: .8rem;
+  padding: 0.8rem;
 }
 
 .paper-title {
@@ -129,6 +485,11 @@ main.container {
   font-size: calc(0.7rem + 0.1vw);
 }
 
+.card-text {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .primary-text {
   color: var(--primary-text);
 }
@@ -148,12 +509,6 @@ blockquote p {
   margin: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  blockquote {
-    border-left-color: var(--border-color);
-  }
-}
-
 footer {
   margin-top: 0rem;
   padding: 1rem 0;
@@ -161,6 +516,11 @@ footer {
   flex-shrink: 0;
 }
 
+.footer-text {
+  font-size: 0.8rem;
+  font-family: var(--link-font-family);
+}
+
 .dark-mode-text {
   display: none;
 }
@@ -173,13 +533,13 @@ footer {
   .dark-mode-text {
     display: inline;
   }
-  
+
   .light-mode-text {
     display: none;
   }
 }
 
-.footer-text {
+/* ===== TRANSITIONS ===== */
-  font-size: 0.8rem;
+.transition-shadow {
-  font-family: var(--link-font-family);
+  transition: box-shadow 0.2s ease-in-out;
-}
+}

dist/index.html

@@ -14,7 +14,6 @@
   <meta name="apple-mobile-web-app-title" content="YL Homepage" />
   <link rel="manifest" href="/site.webmanifest" />
 
-  <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/index.css">
   
 </head>
@@ -111,7 +110,7 @@
         </p>
     </div>
     <div
-        class="col-5 col-xl-4 col-xxl-3 d-none d-lg-block d-flex align-items-center"
+        class="col-5 col-xl-4 col-xxl-3 d-none d-lg-flex align-items-center"
     >
         <img
             src="/profile.webp"
@@ -127,7 +126,7 @@
 <article class="section" id="publications">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-book"></i> Publications
+            Publications
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/publications/">
@@ -461,7 +460,7 @@
 <article class="section" id="projects">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-code-slash"></i> Projects
+            Projects
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/projects/">
@@ -558,7 +557,7 @@
 <article class="section" id="presentations">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-easel"></i> Presentations
+            Presentations
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/presentations/">
@@ -641,7 +640,7 @@
     onmouseover="this.classList.add('shadow-sm')"
     onmouseout="this.classList.remove('shadow-sm')"
 >
-    <h3 class="mb-3"><i class="bi bi-person-lines-fill"></i> Services</h3>
+    <h3 class="mb-3">Services</h3>
     <div id="service-list">
         <ul class="list ps-3">
             

dist/presentations/index.html

@@ -14,7 +14,6 @@
   <meta name="apple-mobile-web-app-title" content="YL Homepage" />
   <link rel="manifest" href="/site.webmanifest" />
 
-  <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/index.css">
   
 </head>

dist/projects/index.html

@@ -14,7 +14,6 @@
   <meta name="apple-mobile-web-app-title" content="YL Homepage" />
   <link rel="manifest" href="/site.webmanifest" />
 
-  <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/index.css">
   
 </head>

dist/publications/index.html

@@ -14,7 +14,6 @@
   <meta name="apple-mobile-web-app-title" content="YL Homepage" />
   <link rel="manifest" href="/site.webmanifest" />
 
-  <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/index.css">
   
 </head>

templates/base.html

@@ -14,7 +14,6 @@
   <meta name="apple-mobile-web-app-title" content="YL Homepage" />
   <link rel="manifest" href="/site.webmanifest" />
 
-  <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/index.css">
   {% block extra_head %}{% endblock %}
 </head>

templates/index.html

@@ -18,7 +18,7 @@ block content %}
         </p>
     </div>
     <div
-        class="col-5 col-xl-4 col-xxl-3 d-none d-lg-block d-flex align-items-center"
+        class="col-5 col-xl-4 col-xxl-3 d-none d-lg-flex align-items-center"
     >
         <img
             src="/profile.webp"
@@ -34,7 +34,7 @@ block content %}
 <article class="section" id="publications">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-book"></i> Publications
+            Publications
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/publications/">
@@ -64,7 +64,7 @@ block content %}
 <article class="section" id="projects">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-code-slash"></i> Projects
+            Projects
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/projects/">
@@ -88,7 +88,7 @@ block content %}
 <article class="section" id="teaching">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-mortarboard"></i> Teaching
+            Teaching
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/teaching/">
@@ -104,7 +104,7 @@ block content %}
 <article class="section" id="presentations">
     <div class="d-flex align-items-center mb-1">
         <h3 class="section-title d-inline-block mb-0">
-            <i class="bi bi-easel"></i> Presentations
+            Presentations
         </h3>
         <div class="flex-grow-1 mx-3" style="border-bottom: 1px dashed var(--border-color); height: 1px;"></div>
         <a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/presentations/">
@@ -124,7 +124,7 @@ block content %}
     onmouseover="this.classList.add('shadow-sm')"
     onmouseout="this.classList.remove('shadow-sm')"
 >
-    <h3 class="mb-3"><i class="bi bi-person-lines-fill"></i> Services</h3>
+    <h3 class="mb-3">Services</h3>
     <div id="service-list">
         <ul class="list ps-3">
             {% for service in data.services %}