commit 87286296175a7014cf0f766f99365c2f15115894
parent 5283d7aa05c3a6c6b6a721b4947178727eac264b
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Sun, 9 Aug 2026 16:02:02 +0530
Merge pull request #31 from notamitgamer/edit-20260809-160106
changed the ui to github inspired
Diffstat:
7 files changed, 316 insertions(+), 93 deletions(-)
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -10,7 +10,7 @@ const vitePressConfig = {
head: [
// Logo & Fonts
- ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo_light.svg' }],
+ ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' }],
@@ -175,8 +175,8 @@ const vitePressConfig = {
lazyLoading: true
},
theme: {
- light: 'catppuccin-latte',
- dark: 'catppuccin-mocha'
+ light: 'github-light',
+ dark: 'github-dark'
} as any
},
}
diff --git a/docs/.vitepress/theme/components/Banner.vue b/docs/.vitepress/theme/components/Banner.vue
@@ -115,7 +115,7 @@ const acceptTerms = () => {
}
.banner-btn {
- color: #fe640b;
+ color: #2f81f7;
}
@media (max-width: 640px) {
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -28,49 +28,59 @@
/* ==========================================================================
- THEME COLORS — LIGHT MODE (Catppuccin Latte Peach)
+ THEME COLORS — LIGHT MODE (ported from vitepress-carbon)
========================================================================== */
:root {
/* Backgrounds */
- --vp-c-bg: #eff1f5; /* base */
- --vp-c-bg-alt: #e6e9ef; /* mantle */
- --vp-c-bg-elv: #ffffff; /* crust (inverted for elevated surfaces on light) */
- --vp-c-bg-soft: #ccd0da; /* surface0 */
- --vp-c-divider: #bcc0cc; /* surface1 */
- --vp-c-b-divider: #4c4f69; /* text */
-
- /* Brand */
- --vp-c-brand-1: #fe640b; /* peach */
- --vp-c-brand-2: #dd7878; /* flamingo */
- --vp-c-brand-3: #e64553; /* maroon for hover/active states */
- --vp-c-brand: #fe640b;
- --banner-bg: #fe640b;
-
- /* Home hero gradient (light) */
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #fe640b 50%,
- #dd7878 50%
- );
- --vp-home-hero-image-filter: blur(100px);
+ --vp-c-bg: #ffffff;
+ --vp-c-bg-alt: #f6f6f7;
+ --vp-c-bg-elv: #ffffff;
+ --vp-c-bg-soft: #f6f6f7;
+ --vp-c-divider: #d1d9e0;
+ --vp-c-b-divider: #1f2328;
+
+ /* GitHub's real sidebar matches the main canvas color — the divider line
+ does the separating, not a darker shade. Override so it doesn't
+ inherit the darker --vp-c-bg-alt (which GitHub reserves for insets). */
+ --vp-sidebar-bg-color: var(--vp-c-bg);
+
+ /* Brand (GitHub-blue accent used by Carbon) */
+ --vp-c-brand-1: #2f81f7;
+ --vp-c-brand-2: #1f6feb;
+ --vp-c-brand-3: #30a46c; /* Carbon's green-3, used for hero name + brand-3 refs */
+ --vp-c-brand: #2f81f7;
+ --banner-bg: #2f81f7;
+
+ /* Primary buttons are GitHub-green in Carbon, not blue — links/sidebar stay blue */
+ --vp-button-brand-border: rgba(31, 35, 40, 0.1);
+ --vp-button-brand-text: #ffffff;
+ --vp-button-brand-bg: #1f883d;
+ --vp-button-brand-hover-border: rgba(31, 35, 40, 0.1);
+ --vp-button-brand-hover-text: #ffffff;
+ --vp-button-brand-hover-bg: #1a7f37;
+ --vp-button-brand-active-border: rgba(31, 35, 40, 0.1);
+ --vp-button-brand-active-text: #ffffff;
+ --vp-button-brand-active-bg: #197935;
+
+ /* Homepage feature-card icons pick up the same green touch */
+ --vp-home-card-icon-bg: rgba(16, 185, 129, 0.14);
+ --vp-home-card-icon-color: #3fb950;
+ --vp-home-card-border-hover-color: #2ea043;
+
+ --vp-home-hero-name-background: #30A46C;
--vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #fe640b 30%,
- #dd7878
- );
/* DocSearch hit colors (light) */
- --docsearch-hit-color: #4c4f69;
- --docsearch-hit-active-color: #4c4f69;
- --docsearch-hit-background: #e6e9ef;
+ --docsearch-hit-color: #1f2328;
+ --docsearch-hit-active-color: #1f2328;
+ --docsearch-hit-background: #f6f6f7;
- /* Semantic (Catppuccin Latte accents) */
- --vp-c-success: #40a02b;
- --vp-c-warning: #df8e1d;
- --vp-c-danger: #d20f39;
- --vp-c-info: #1e66f5;
+ /* Semantic (Carbon/GitHub accents) */
+ --vp-c-success: #3fb950;
+ --vp-c-warning: #9a6700;
+ --vp-c-danger: #d1242f;
+ --vp-c-info: #2f81f7;
/* Font */
--vp-font-family-base: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -79,47 +89,57 @@
/* ==========================================================================
- THEME COLORS — DARK MODE (Catppuccin Mocha Peach)
+ THEME COLORS — DARK MODE (ported from vitepress-carbon)
========================================================================== */
.dark {
/* Backgrounds */
- --vp-c-bg: #1e1e2e; /* base */
- --vp-c-bg-alt: #181825; /* mantle */
- --vp-c-bg-elv: #11111b; /* crust */
- --vp-c-bg-soft: #313244; /* surface0 */
- --vp-c-divider: #45475a; /* surface1 */
- --vp-c-b-divider: #cdd6f4; /* text */
+ --vp-c-bg: #0d1117;
+ --vp-c-bg-alt: #010409;
+ --vp-c-bg-elv: #161b22;
+
+ /* Same GitHub-sidebar fix as light mode — match canvas, not the inset tone. */
+ --vp-sidebar-bg-color: var(--vp-c-bg);
+
+ --vp-c-bg-soft: #161b22;
+ --vp-c-divider: #30363d;
+ --vp-c-b-divider: #c9d1d9;
/* Brand */
- --vp-c-brand-1: #fab387; /* peach */
- --vp-c-brand-2: #f2cdcd; /* flamingo */
- --vp-c-brand-3: #a6adc8; /* subtext0, for hover/active states */
- --vp-c-brand: #fab387;
-
- /* Home hero gradient (dark) */
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #fab387 50%,
- #f2cdcd 50%
- );
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #fab387 30%,
- #f2cdcd
- );
+ --vp-c-brand-1: #58a6ff;
+ --vp-c-brand-2: #79c0ff;
+ --vp-c-brand-3: #3fb950;
+ --vp-c-brand: #58a6ff;
+
+ /* Primary buttons: Carbon uses the identical green in both modes, no dark variant */
+ --vp-button-brand-border: rgba(240, 246, 252, 0.1);
+ --vp-button-brand-text: #ffffff;
+ --vp-button-brand-bg: #1f883d;
+ --vp-button-brand-hover-border: rgba(240, 246, 252, 0.1);
+ --vp-button-brand-hover-text: #ffffff;
+ --vp-button-brand-hover-bg: #1a7f37;
+ --vp-button-brand-active-border: rgba(240, 246, 252, 0.1);
+ --vp-button-brand-active-text: #ffffff;
+ --vp-button-brand-active-bg: #197935;
+
+ --vp-home-card-icon-bg: rgba(63, 185, 80, 0.12);
+ --vp-home-card-icon-color: #3fb950;
+ --vp-home-card-border-hover-color: #3fb950;
+
+ --vp-home-hero-name-background: #30A46C;
+ --vp-home-hero-name-color: transparent;
/* DocSearch hit colors (dark) */
- --docsearch-hit-color: #cdd6f4;
- --docsearch-hit-active-color: #cdd6f4;
- --docsearch-hit-background: #313244;
- --docsearch-modal-background: #1e1e2e !important;
+ --docsearch-hit-color: #c9d1d9;
+ --docsearch-hit-active-color: #c9d1d9;
+ --docsearch-hit-background: #161b22;
+ --docsearch-modal-background: #0d1117 !important;
- /* Semantic (Catppuccin Mocha accents) */
- --vp-c-success: #a6e3a1;
- --vp-c-warning: #f9e2af;
- --vp-c-danger: #f38ba8;
- --vp-c-info: #89b4fa;
+ /* Semantic (Carbon/GitHub dark accents) */
+ --vp-c-success: #3fb950;
+ --vp-c-warning: #f9b44e;
+ --vp-c-danger: #f66f81;
+ --vp-c-info: #58a6ff;
}
.dark ::-webkit-scrollbar-track {
@@ -305,10 +325,117 @@
========================================================================== */
.VPFeature:hover {
- border-color: var(--vp-c-brand-1) !important;
+ border-color: #2ea043 !important;
+ transition: border-color 0.2s;
+}
+
+.VPFeature .icon {
+ background-color: rgba(16, 185, 129, 0.14) !important;
+ color: #3fb950 !important;
+}
+
+.dark .VPFeature .icon {
+ background-color: rgba(63, 185, 80, 0.12) !important;
+ color: #3fb950 !important;
+}
+
+/* Hero action buttons: stock VitePress uses flex-wrap with content-width
+ buttons, which staggers into a jagged staircase on narrow screens when
+ labels are different lengths. Stack to one full-width button per row,
+ matching the default VitePress mobile behavior. */
+@media (max-width: 639px) {
+ .VPHero .actions {
+ flex-direction: column;
+ }
+
+ .VPHero .actions .action {
+ width: 100%;
+ padding: 6px 0;
+ }
+
+ .VPHero .actions .action .VPButton {
+ display: block;
+ width: 100%;
+ }
+}
+
+/* ==========================================================================
+ HOMEPAGE "WHY" SECTION (Carbon-style benefit grid)
+ ========================================================================== */
+
+.why-section {
+ max-width: 1152px;
+ margin: 0 auto;
+ padding: 64px 24px 16px;
+}
+
+@media (min-width: 640px) {
+ .why-section { padding: 64px 48px 16px; }
+}
+
+@media (min-width: 960px) {
+ .why-section { padding: 64px 64px 16px; }
+}
+
+.why-eyebrow {
+ color: var(--vp-c-brand-1);
+ font-size: 13px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ margin: 0 0 8px;
+}
+
+.why-title {
+ font-size: 28px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ margin: 0 0 40px;
+ max-width: 640px;
+}
+
+.why-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 24px;
+}
+
+@media (min-width: 640px) {
+ .why-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 960px) {
+ .why-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+.why-card {
+ border: 1px solid var(--vp-c-divider);
+ border-radius: 12px;
+ padding: 24px;
+ background-color: var(--vp-c-bg-soft);
transition: border-color 0.2s;
}
+.why-card:hover {
+ border-color: #2ea043;
+}
+
+.why-card h3 {
+ font-size: 16px;
+ font-weight: 600;
+ margin: 0 0 8px;
+ border: none;
+ padding: 0;
+}
+
+.why-card p {
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--vp-c-text-2);
+ margin: 0;
+}
+
+
@media (hover: none) and (pointer: coarse) {
.vp-doc [class*="language-"] > button.copy {
opacity: 1 !important;
@@ -419,19 +546,9 @@
box-shadow: none !important;
}
-:root {
- --vp-button-brand-bg: var(--vp-c-brand-1);
- --vp-button-brand-hover-bg: var(--vp-c-brand-2);
- --vp-button-brand-active-bg: var(--vp-c-brand-1);
-}
-
-/* Dark mode: peach (#fab387) is too light for white button text (~1.8:1
- contrast). Override VitePress's default brand-button text var. */
-.dark {
- --vp-button-brand-text: var(--vp-c-bg-elv); /* #11111b */
- --vp-button-brand-hover-text: var(--vp-c-bg-elv);
- --vp-button-brand-active-text: var(--vp-c-bg-elv);
-}
+/* Button-brand colors (green) and white button text are set directly in the
+ theme-color blocks above — no override needed, unlike the old peach brand
+ which couldn't carry white text at proper contrast. */
/* ==========================================================================
FORCE FONT ON DOCSEARCH & AI MODALS
@@ -483,4 +600,68 @@
/* Fallback just in case standard container is used */
.DocSearch-Container * {
font-family: var(--vp-font-family-base) !important;
+}
+
+/* ==========================================================================
+ CLOSING CTA SECTION (centered "Read the guide" style band)
+ ========================================================================== */
+
+.bsc-cta-section {
+ text-align: center;
+ max-width: 640px;
+ margin: 80px auto;
+ padding: 0 24px;
+}
+
+.bsc-cta-title {
+ font-size: 28px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ margin: 0 0 12px;
+ border: none;
+ padding: 0;
+}
+
+.bsc-cta-subtitle {
+ font-size: 16px;
+ line-height: 1.6;
+ color: var(--vp-c-text-2);
+ margin: 0 0 28px;
+}
+
+.bsc-cta-actions {
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.bsc-cta-btn {
+ display: inline-flex;
+ align-items: center;
+ padding: 10px 22px;
+ border-radius: 999px;
+ font-size: 14px;
+ font-weight: 600;
+ text-decoration: none !important;
+ border: 1px solid var(--vp-c-divider);
+ color: var(--vp-c-text-1) !important;
+ background-color: transparent;
+ transition: border-color 0.15s, background-color 0.15s;
+}
+
+.bsc-cta-btn:hover {
+ border-color: var(--vp-c-brand-1);
+ background-color: var(--vp-c-bg-soft);
+}
+
+.bsc-cta-btn-brand {
+ background-color: var(--vp-button-brand-bg);
+ border-color: var(--vp-button-brand-bg);
+ color: #ffffff !important;
+}
+
+.bsc-cta-btn-brand:hover {
+ background-color: var(--vp-button-brand-hover-bg);
+ border-color: var(--vp-button-brand-hover-bg);
}
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
@@ -21,10 +21,6 @@ hero:
alt: logo
features:
- - icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-code-icon lucide-square-code"><path d="m10 9-3 3 3 3"/><path d="m14 15 3-3-3-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg>'
- title: 400+ Programs in Sem 1
- details: Just getting started! Featuring over 400 C and R source files from the first semester alone. Expect this archive to scale massively over the full 4-year degree.
-
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>'
title: Searchable by Problem
details: Every page is indexed by its problem statement. Search what you need to solve, find the reference instantly.
@@ -103,3 +99,13 @@ This project is maintained by **Amit Dutta**, a BSc Computer Science student at
| **Personal Email** | [amitdutta4255@gmail.com](mailto:amitdutta4255@gmail.com) |
| **Work Email** | [mail@amit.is-a.dev](mailto:mail@amit.is-a.dev) |
| **License** | [MIT](https://github.com/notamitgamer/bsc/blob/main/LICENSE) |
+
+
+<div class="bsc-cta-section">
+ <h2 class="bsc-cta-title">Read the Guide</h2>
+ <p class="bsc-cta-subtitle">Full setup, configuration and theming reference — including how to extend the archive without forking it.</p>
+ <div class="bsc-cta-actions">
+ <a class="bsc-cta-btn bsc-cta-btn-brand" href="/semester_2/">Browse Semester 2</a>
+ <a class="bsc-cta-btn" href="/#environment-setup">Environment Setup</a>
+ </div>
+</div>+
\ No newline at end of file
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+ <defs>
+ <linearGradient id="favTag" x1="15" y1="8" x2="85" y2="88" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#2f81f7"/>
+ <stop offset="1" stop-color="#2ea043"/>
+ </linearGradient>
+ </defs>
+ <path d="M27 18C27 12.477 31.477 8 37 8H63C68.523 8 73 12.477 73 18V85.5C73 88.94 68.94 90.94 66.2 88.8L52.46 78.06C50.99 76.91 48.94 76.91 47.48 78.06L33.8 88.8C31.06 90.94 27 88.94 27 85.5V18Z" fill="url(#favTag)"/>
+ <circle cx="50" cy="24" r="5" fill="#ffffff"/>
+ <rect x="39" y="38" width="22" height="6" rx="3" fill="#ffffff"/>
+ <rect x="39" y="50" width="16" height="6" rx="3" fill="#ffffff" opacity="0.85"/>
+</svg>+
\ No newline at end of file
diff --git a/docs/public/logo_dark.svg b/docs/public/logo_dark.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fill="none" stroke="#fab387" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-text-icon lucide-book-open-text"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>-
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100 100">
+ <defs>
+ <linearGradient id="logoDarkTag" x1="15" y1="8" x2="85" y2="88" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#58a6ff"/>
+ <stop offset="1" stop-color="#3fb950"/>
+ </linearGradient>
+ </defs>
+ <path d="M27 18C27 12.477 31.477 8 37 8H63C68.523 8 73 12.477 73 18V85.5C73 88.94 68.94 90.94 66.2 88.8L52.46 78.06C50.99 76.91 48.94 76.91 47.48 78.06L33.8 88.8C31.06 90.94 27 88.94 27 85.5V18Z" fill="url(#logoDarkTag)"/>
+ <circle cx="50" cy="24" r="5" fill="#0d1117"/>
+ <rect x="39" y="38" width="22" height="6" rx="3" fill="#0d1117"/>
+ <rect x="39" y="50" width="16" height="6" rx="3" fill="#0d1117" opacity="0.85"/>
+</svg>+
\ No newline at end of file
diff --git a/docs/public/logo_light.svg b/docs/public/logo_light.svg
@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fill="none" stroke="#fe640b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-text-icon lucide-book-open-text"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>-
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100 100">
+ <defs>
+ <linearGradient id="logoLightTag" x1="15" y1="8" x2="85" y2="88" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#2f81f7"/>
+ <stop offset="1" stop-color="#2ea043"/>
+ </linearGradient>
+ </defs>
+ <path d="M27 18C27 12.477 31.477 8 37 8H63C68.523 8 73 12.477 73 18V85.5C73 88.94 68.94 90.94 66.2 88.8L52.46 78.06C50.99 76.91 48.94 76.91 47.48 78.06L33.8 88.8C31.06 90.94 27 88.94 27 85.5V18Z" fill="url(#logoLightTag)"/>
+ <circle cx="50" cy="24" r="5" fill="#ffffff"/>
+ <rect x="39" y="38" width="22" height="6" rx="3" fill="#ffffff"/>
+ <rect x="39" y="50" width="16" height="6" rx="3" fill="#ffffff" opacity="0.85"/>
+</svg>+
\ No newline at end of file
