commit 0670f805f8970a64413c7c46e94bc130fce0ecd5
parent 8d49bed27a07ef3628f9f36626b25e826e4d426b
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Sat, 26 Sep 2026 13:04:49 +0530
Replace SVG skyline with static image in footer
Replaced SVG skyline illustration with a static image for the footer divider. Updated styles for responsive design and removed unused SVG elements.
Diffstat:
1 file changed, 14 insertions(+), 151 deletions(-)
diff --git a/docs/.vitepress/theme/components/DocFooterExtra.vue b/docs/.vitepress/theme/components/DocFooterExtra.vue
@@ -1,122 +1,8 @@
<template>
<div class="doc-footer-extra">
- <!-- Decorative divider: original isometric skyline illustration -->
+ <!-- Decorative divider: static skyline illustration (fixed colors, not theme-linked) -->
<div class="footer-divider" aria-hidden="true">
- <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="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="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" />
-
- <!-- ===== 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" />
-
- <!-- ===== Middle: low wide connector building bridges the gap ===== -->
- <g class="cube">
- <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>
-
- <!-- ===== Cluster 2: box building with </> motif ===== -->
- <g class="cube">
- <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>
- <!-- </> 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="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="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="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>
+ <img src="/skyline3.svg" alt="" class="footer-divider-img" />
</div>
<div class="footer-top-row">
@@ -198,48 +84,25 @@ const editUrl = computed(() =>
font-family: inherit;
}
-/* Decorative divider */
+/* Decorative divider — plain PNG, fixed colors, no theme dependency.
+ Height scales down on narrow screens instead of a fixed crop box,
+ so buildings never get cut off on mobile. */
.footer-divider {
width: 100%;
- height: 130px;
- overflow: hidden;
opacity: 0.95;
+ line-height: 0; /* removes the inline-image baseline gap under the img */
}
-.footer-divider svg {
+.footer-divider-img {
width: 100%;
- height: 100%;
+ height: auto; /* scales proportionally, whole scene always visible */
+ max-height: 130px;
+ object-fit: contain;
display: block;
}
-
-.ground-line {
- stroke: var(--vp-c-divider);
- stroke-width: 1;
-}
-
-.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;
-}
-
-.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;
+@media (max-width: 639px) {
+ .footer-divider-img {
+ max-height: 90px; /* smaller on phones so it doesn't dominate the footer */
+ }
}
.footer-top-row {
