Remove bootstrap entirely

This commit is contained in:
Yan Lin 2025-10-05 19:21:11 +02:00
parent adc327e462
commit a35c1491cb
9 changed files with 427 additions and 79 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

472
dist/css/index.css vendored
View file

@ -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 */
main.container {
p {
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 (prefers-color-scheme: dark) {
.bg-body-secondary {
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: 576px) {
.container {
max-width: 540px;
}
}
@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 {
font-size: 0.8rem;
font-family: var(--link-font-family);
}
/* ===== TRANSITIONS ===== */
.transition-shadow {
transition: box-shadow 0.2s ease-in-out;
}

11
dist/index.html vendored
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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