commit 1cced127b322ecc660602f94953a53b504f590df
parent 8f7173e4f7ac9909af915dc54fe6f0b6b3c0543b
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Sat, 26 Sep 2026 12:34:31 +0530
Revise footer SVG and remove voting feature
Updated the decorative divider SVG to feature an isometric skyline illustration instead of an isometric cube. Removed the voting section and adjusted the footer layout and styles.
Diffstat:
1 file changed, 128 insertions(+), 94 deletions(-)
diff --git a/docs/.vitepress/theme/components/DocFooterExtra.vue b/docs/.vitepress/theme/components/DocFooterExtra.vue
@@ -1,79 +1,120 @@
<template>
<div class="doc-footer-extra">
- <!-- Decorative divider: original isometric-cube illustration -->
+ <!-- Decorative divider: original isometric skyline illustration -->
<div class="footer-divider" aria-hidden="true">
- <svg viewBox="0 0 700 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
-
- <!-- LEFT CLUSTER: Downward Arrow (3 Cubes) -->
- <g class="cube">
- <polygon points="100,38 134,55 100,72 66,55" class="face-top" />
- <polygon points="66,55 100,72 100,106 66,89" class="face-left" />
- <polygon points="100,72 134,55 134,89 100,106" class="face-right" />
+ <svg viewBox="0 0 900 140" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
+
+ <!-- Ground line -->
+ <line x1="0" y1="128" x2="900" y2="128" class="ground-line" />
+
+ <!-- ===== Far background row (smaller, dimmer, fills gaps) ===== -->
+ <g class="bldg bg-row">
+ <polygon points="60,90 100,90 100,128 60,128" />
+ <polygon points="230,78 265,78 265,128 230,128" />
+ <polygon points="420,85 450,85 450,128 420,128" />
+ <polygon points="600,72 640,72 640,128 600,128" />
+ <polygon points="760,88 795,88 795,128 760,128" />
</g>
+
+ <!-- ===== Cluster 1: low pitched-roof building ===== -->
<g class="cube">
- <polygon points="155,15 185,30 155,45 125,30" class="face-top" />
- <polygon points="125,30 155,45 155,75 125,60" class="face-left" />
- <polygon points="155,45 185,30 185,60 155,75" class="face-right" />
+ <polygon points="40,70 70,55 100,70 100,110 40,110" class="face-front" />
+ <polygon points="40,70 70,55 70,95 40,110" class="face-side" />
+ <polygon points="70,55 100,70 100,110 70,95" class="face-front" />
</g>
+ <polygon points="46,80 54,80 54,90 46,90" class="window heat-1" />
+ <polygon points="60,80 68,80 68,90 60,90" class="window heat-1" />
+ <polygon points="46,95 54,95 54,105" class="window heat-2" />
+
+ <!-- ===== Cluster 1: tall slim tower ===== -->
<g class="cube">
- <polygon points="40,27 66,40 40,53 14,40" class="face-top" />
- <polygon points="14,40 40,53 40,79 14,66" class="face-left" />
- <polygon points="40,53 66,40 66,66 40,79" class="face-right" />
+ <polygon points="105,20 130,8 155,20 155,110 105,110" class="face-front" />
+ <polygon points="105,20 130,8 130,98 105,110" class="face-side" />
+ <polygon points="130,8 155,20 155,110 130,98" class="face-front" />
</g>
+ <polygon points="111,30 118,30 118,40 111,40" class="window heat-2" />
+ <polygon points="123,25 130,25 130,35 123,35" class="window heat-1" />
+ <polygon points="111,45 118,45 118,55 111,55" class="window heat-3" />
+ <polygon points="123,40 130,40 130,50 123,50" class="window heat-1" />
+ <polygon points="111,60 118,60 118,70 111,70" class="window heat-1" />
+ <polygon points="123,55 130,55 130,65 123,65" class="window heat-4" />
+ <polygon points="111,75 118,75 118,85 111,85" class="window heat-2" />
+ <polygon points="123,70 130,70 130,80 123,80" class="window heat-1" />
+ <polygon points="136,25 143,25 143,35" class="window heat-1" />
+ <polygon points="148,20 155,20 155,30" class="window heat-2" />
+ <polygon points="136,45 143,45 143,55" class="window heat-2" />
+ <polygon points="136,65 143,65 143,75" class="window heat-1" />
- <!-- RIGHT CLUSTER: Playground Podium / Steps (Ordered Back-to-Front) -->
- <!-- Each pillar's windows are drawn immediately after its own body, not batched
- at the end — otherwise windows paint over pillars that should occlude them. -->
+ <!-- ===== Cluster 1: mid box building ===== -->
+ <g class="cube">
+ <polygon points="160,50 190,38 220,50 220,110 160,110" class="face-front" />
+ <polygon points="160,50 190,38 190,98 160,110" class="face-side" />
+ <polygon points="190,38 220,50 220,110 190,98" class="face-front" />
+ </g>
+ <polygon points="167,60 176,60 176,70 167,70" class="window heat-2" />
+ <polygon points="182,55 191,55 191,65 182,65" class="window heat-1" />
+ <polygon points="167,75 176,75 176,85 167,85" class="window heat-4" />
+ <polygon points="182,70 191,70 191,80 182,80" class="window heat-2" />
+ <polygon points="167,90 176,90 176,100 167,100" class="window heat-1" />
+ <polygon points="196,50 205,50 205,60" class="window heat-1" />
+ <polygon points="210,45 219,45 219,55" class="window heat-3" />
+ <polygon points="196,65 205,65 205,75" class="window heat-1" />
+ <polygon points="196,80 205,80 205,90" class="window heat-2" />
- <!-- 3. Tallest Step (Rank 1 / Peak: Height 88px) - Rendered 1st (deepest in background) -->
+ <!-- ===== Middle: low wide connector building bridges the gap ===== -->
<g class="cube">
- <polygon points="600,0 630,15 600,30 570,15" class="face-top" />
- <polygon points="570,15 600,30 600,106 570,91" class="face-left" />
- <polygon points="600,30 630,15 630,91 600,106" class="face-right" />
+ <polygon points="440,95 480,80 520,95 520,110 440,110" class="face-front" />
+ <polygon points="440,95 480,80 480,100 440,110" class="face-side" />
+ <polygon points="480,80 520,95 520,110 480,100" class="face-front" />
</g>
- <polygon points="603.6,34.2 612.6,29.7 612.6,38.7 603.6,43.2" class="window heat-1" />
- <polygon points="617.4,27.3 626.4,22.8 626.4,31.8 617.4,36.3" class="window heat-1" />
- <polygon points="603.6,47.2 612.6,42.7 612.6,51.7 603.6,56.2" class="window heat-3" />
- <polygon points="617.4,40.3 626.4,35.8 626.4,44.8 617.4,49.3" class="window heat-2" />
- <polygon points="603.6,60.2 612.6,55.7 612.6,64.7 603.6,69.2" class="window heat-2" />
- <polygon points="617.4,53.3 626.4,48.8 626.4,57.8 617.4,62.3" class="window heat-2" />
- <polygon points="603.6,73.2 612.6,68.7 612.6,77.7 603.6,82.2" class="window heat-1" />
- <polygon points="617.4,66.3 626.4,61.8 626.4,70.8 617.4,75.3" class="window heat-1" />
- <polygon points="603.6,86.2 612.6,81.7 612.6,90.7 603.6,95.2" class="window heat-4" />
- <polygon points="617.4,79.3 626.4,74.8 626.4,83.8 617.4,88.3" class="window heat-1" />
-
- <!-- 4. Medium-Tall Step (Height 66px, between 2nd & 3rd) - Positioned to the right -->
+
+ <!-- ===== Cluster 2: box building with </> motif ===== -->
<g class="cube">
- <polygon points="645,22 675,37 645,52 615,37" class="face-top" />
- <polygon points="615,37 645,52 645,106 615,91" class="face-left" />
- <polygon points="645,52 675,37 675,91 645,106" class="face-right" />
+ <polygon points="600,45 635,30 670,45 670,110 600,110" class="face-front" />
+ <polygon points="600,45 635,30 635,95 600,110" class="face-side" />
+ <polygon points="635,30 670,45 670,110 635,95" class="face-front" />
</g>
- <polygon points="648.6,56.2 657.6,51.7 657.6,60.7 648.6,65.2" class="window heat-1" />
- <polygon points="662.4,49.3 671.4,44.8 671.4,53.8 662.4,58.3" class="window heat-1" />
- <polygon points="648.6,69.2 657.6,64.7 657.6,73.7 648.6,78.2" class="window heat-2" />
- <polygon points="662.4,62.3 671.4,57.8 671.4,66.8 662.4,71.3" class="window heat-2" />
- <polygon points="648.6,82.2 657.6,77.7 657.6,86.7 648.6,91.2" class="window heat-1" />
- <polygon points="662.4,75.3 671.4,70.8 671.4,79.8 662.4,84.3" class="window heat-2" />
-
- <!-- 2. Taller Step (Height 52px) - Overlaps Step 3 slightly -->
+ <!-- </> emblem panel -->
+ <rect x="611" y="55" width="46" height="30" rx="3" class="emblem-panel" />
+ <text x="634" y="76" text-anchor="middle" class="emblem-text"></></text>
+ <polygon points="607,95 616,95 616,105 607,105" class="window heat-2" />
+ <polygon points="622,95 631,95 631,105 622,105" class="window heat-1" />
+ <polygon points="641,90 650,90 650,100" class="window heat-2" />
+ <polygon points="656,85 665,85 665,95" class="window heat-1" />
+
+ <!-- ===== Cluster 2: tallest tower ===== -->
<g class="cube">
- <polygon points="555,36 585,51 555,66 525,51" class="face-top" />
- <polygon points="525,51 555,66 555,106 525,91" class="face-left" />
- <polygon points="555,66 585,51 585,91 555,106" class="face-right" />
+ <polygon points="675,15 705,2 735,15 735,110 675,110" class="face-front" />
+ <polygon points="675,15 705,2 705,97 675,110" class="face-side" />
+ <polygon points="705,2 735,15 735,110 705,97" class="face-front" />
</g>
- <polygon points="558.6,70.2 567.6,65.7 567.6,74.7 558.6,79.2" class="window heat-4" />
- <polygon points="572.4,63.3 581.4,58.8 581.4,67.8 572.4,72.3" class="window heat-2" />
- <polygon points="558.6,83.2 567.6,78.7 567.6,87.7 558.6,92.2" class="window heat-4" />
- <polygon points="572.4,76.3 581.4,71.8 581.4,80.8 572.4,85.3" class="window heat-3" />
-
- <!-- 1. Smallest Step (Height 30px) - Rendered last (closest in foreground).
- Too short to fit a window row at this scale — stays plain, which reads fine
- for the smallest building in the row. -->
+ <polygon points="681,25 689,25 689,35 681,35" class="window heat-1" />
+ <polygon points="696,20 704,20 704,30 696,30" class="window heat-3" />
+ <polygon points="681,40 689,40 689,50 681,50" class="window heat-2" />
+ <polygon points="696,35 704,35 704,45 696,45" class="window heat-1" />
+ <polygon points="681,55 689,55 689,65 681,65" class="window heat-4" />
+ <polygon points="696,50 704,50 704,60 696,60" class="window heat-1" />
+ <polygon points="681,70 689,70 689,80 681,80" class="window heat-1" />
+ <polygon points="696,65 704,65 704,75 696,75" class="window heat-2" />
+ <polygon points="681,85 689,85 689,95 681,95" class="window heat-2" />
+ <polygon points="710,20 718,20 718,30" class="window heat-1" />
+ <polygon points="724,15 732,15 732,25" class="window heat-2" />
+ <polygon points="710,40 718,40 718,50" class="window heat-1" />
+ <polygon points="724,35 732,35 732,45" class="window heat-1" />
+ <polygon points="710,60 718,60 718,70" class="window heat-3" />
+ <polygon points="724,55 732,55 732,65" class="window heat-1" />
+ <polygon points="710,80 718,80 718,90" class="window heat-1" />
+
+ <!-- ===== Cluster 2: small stepped building ===== -->
<g class="cube">
- <polygon points="510,58 540,73 510,88 480,73" class="face-top" />
- <polygon points="480,73 510,88 510,106 480,91" class="face-left" />
- <polygon points="510,88 540,73 540,91 510,106" class="face-right" />
+ <polygon points="740,68 765,56 790,68 790,110 740,110" class="face-front" />
+ <polygon points="740,68 765,56 765,102 740,110" class="face-side" />
+ <polygon points="765,56 790,68 790,110 765,102" class="face-front" />
</g>
+ <polygon points="746,78 754,78 754,88 746,88" class="window heat-1" />
+ <polygon points="759,74 767,74 767,84 759,84" class="window heat-1" />
+ <polygon points="746,92 754,92 754,102 746,102" class="window heat-2" />
+ <polygon points="772,68 780,68 780,78" class="window heat-1" />
</svg>
</div>
@@ -100,15 +141,6 @@
</div>
<div class="footer-columns">
- <div class="col helpful-col">
- <p class="col-title">Was this page helpful?</p>
- <div class="helpful-btns" v-if="!voted">
- <button class="vote-btn" @click="vote(true)">Yes</button>
- <button class="vote-btn" @click="vote(false)">No</button>
- </div>
- <p class="thanks" v-else>Thanks for the feedback!</p>
- </div>
-
<div class="col contribute-col">
<p class="col-title">Help improve this page</p>
<p class="col-text">Spotted a mistake or something unclear? All content is open source.</p>
@@ -137,15 +169,10 @@
</template>
<script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
import { useData } from 'vitepress'
const { frontmatter, page } = useData()
-const voted = ref(false)
-
-function vote(isYes) {
- voted.value = true
-}
function scrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -174,27 +201,47 @@ const editUrl = computed(() =>
/* Decorative divider */
.footer-divider {
width: 100%;
- height: 105px;
+ height: 130px;
overflow: hidden;
- opacity: 0.9;
+ opacity: 0.95;
}
.footer-divider svg {
width: 100%;
height: 100%;
+ display: block;
+}
+
+.ground-line {
+ stroke: var(--vp-c-divider);
+ stroke-width: 1;
}
-.cube .face-top { fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 70%, white 30%); }
-.cube .face-right { fill: var(--vp-c-brand-3, #30a46c); }
-.cube .face-left { fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 65%, black 35%); }
-.cube { opacity: 0.9; }
+.face-front { fill: var(--vp-c-brand-3, #30a46c); }
+.face-side { fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 60%, black 40%); }
+
+.bg-row polygon {
+ fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 35%, black 65%);
+ opacity: 0.7;
+}
-/* Windows — same 4-level intensity scale as a GitHub contribution graph */
.window { stroke: none; }
.heat-1 { fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 20%, black 20%); opacity: 0.5; }
.heat-2 { fill: #9be9a8; opacity: 0.85; }
.heat-3 { fill: #40c463; opacity: 0.9; }
.heat-4 { fill: #ffd166; opacity: 0.95; } /* brightest windows read as "lit" against the green */
+.emblem-panel {
+ fill: color-mix(in srgb, var(--vp-c-brand-3, #30a46c) 60%, black 40%);
+ stroke: #ffd166;
+ stroke-width: 1;
+}
+.emblem-text {
+ fill: #ffd166;
+ font-family: var(--vp-font-family-mono, monospace);
+ font-size: 13px;
+ font-weight: 600;
+}
+
.footer-top-row {
display: flex;
align-items: center;
@@ -221,7 +268,7 @@ const editUrl = computed(() =>
.footer-columns {
display: grid;
- grid-template-columns: 1fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 1.75rem 0;
border-bottom: 1px solid var(--vp-c-divider);
@@ -245,19 +292,6 @@ const editUrl = computed(() =>
line-height: 1.5;
}
-.helpful-btns { display: flex; gap: 0.5rem; }
-.vote-btn {
- border: 1px solid var(--vp-c-divider);
- background: var(--vp-c-bg-soft);
- color: var(--vp-c-text-1);
- border-radius: 6px;
- padding: 0.3rem 0.9rem;
- font-size: 13px;
- cursor: pointer;
-}
-.vote-btn:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
-.thanks { font-size: 13px; color: var(--vp-c-brand-3); }
-
.contribute-btn {
display: inline-block;
border: 1px solid var(--vp-c-divider);
