feat(mp-card): add mp-card--stack-bottom variant (text top, image bottom) and apply to mini-projects-grid

public/cases/mini-projects-showcase/index.html

@@ -1226,6 +1226,31 @@
                 </div>
               </a>
             </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
+              <a class="mp-card mp-card--link mp-card--stack-bottom" href="#" aria-label="[2] height=400 · stack-bottom · ссылка">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    [2] height=400 · stack-bottom · ссылка
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">плагин</li>
+                  </ul>
+                  <p class="mp-card__desc">Текст сверху, изображение снизу. Высота 400px.</p>
+                </div>
+              </a>
+            </li>
           </ol>
         </div>
       </section>

public/css/main.css

@@ -3405,6 +3405,42 @@ html[data-theme="light"] .hero__portrait-shell {
   aspect-ratio: 16 / 9;
 }
 
+.mp-card--stack-bottom {
+  flex-direction: column-reverse;
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+}
+
+.mp-card--stack-bottom .mp-card__body {
+  padding: 1.2rem 1.35rem 1.45rem;
+}
+
+.mp-card--stack-bottom .mp-card__media {
+  width: 100%;
+  flex-shrink: 0;
+  padding: 0 1.35rem 1.2rem;
+}
+
+.mp-card--stack-bottom .mp-card__image {
+  aspect-ratio: 16 / 9;
+}
+
+.mp-card--stack-bottom.mp-card--hor-image .mp-card__image {
+  object-fit: contain;
+  aspect-ratio: 16 / 9;
+  background: color-mix(in srgb, var(--text-muted) 10%, var(--surface));
+}
+
+/* внутри варианта: Название → микротекст → тэг */
+.mp-card--stack-bottom .mp-card__desc {
+  order: 1;
+}
+
+.mp-card--stack-bottom .mp-card__tags {
+  order: 2;
+}
+
 .mp-card--horizontal {
   flex-direction: row;
   align-items: stretch;

public/en/cases/mini-projects-showcase/index.html

@@ -1226,6 +1226,31 @@
                 </div>
               </a>
             </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
+              <a class="mp-card mp-card--link mp-card--stack-bottom" href="#" aria-label="[2] height=400 · stack-bottom · link">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../../../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    [2] height=400 · stack-bottom · link
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Project Type">
+                    <li class="mp-card__tag">plugin</li>
+                  </ul>
+                  <p class="mp-card__desc">Text on top, image at the bottom. Height 400px.</p>
+                </div>
+              </a>
+            </li>
           </ol>
         </div>
       </section>

public/en/index.html

@@ -1177,7 +1177,7 @@
           <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://www.figma.com/@mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1207,7 +1207,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://dribbble.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1237,7 +1237,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://t.me/designnotpizza"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1267,7 +1267,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://github.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1297,7 +1297,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/ai-assistant-figma/"
                 aria-label="AI assistant — open case"
               >
@@ -1312,7 +1312,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/card-columns-obsidian/"
                 aria-label="Card Columns — open case"
               >
@@ -1327,7 +1327,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/site-with-ai-ide/"
                 aria-label="This site — open case"
               >

public/index.html

@@ -1199,7 +1199,7 @@
           <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://www.figma.com/@mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1229,7 +1229,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://dribbble.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1259,7 +1259,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://t.me/designnotpizza"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1289,7 +1289,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://github.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -1319,7 +1319,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/ai-assistant-figma/"
                 aria-label="AI assistant — открыть кейс"
               >
@@ -1334,7 +1334,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/card-columns-obsidian/"
                 aria-label="Card Columns — открыть кейс"
               >
@@ -1349,7 +1349,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/site-with-ai-ide/"
                 aria-label="Этот сайт — открыть кейс"
               >

src/pages/cases/mini-projects-showcase.en.html

@@ -631,6 +631,31 @@
                 </div>
               </a>
             </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
+              <a class="mp-card mp-card--link mp-card--stack-bottom" href="#" aria-label="[2] height=400 · stack-bottom · link">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    [2] height=400 · stack-bottom · link
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Project Type">
+                    <li class="mp-card__tag">plugin</li>
+                  </ul>
+                  <p class="mp-card__desc">Text on top, image at the bottom. Height 400px.</p>
+                </div>
+              </a>
+            </li>
           </ol>
         </div>
       </section>

src/pages/cases/mini-projects-showcase.html

@@ -631,6 +631,31 @@
                 </div>
               </a>
             </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2" data-mp-height="400">
+              <a class="mp-card mp-card--link mp-card--stack-bottom" href="#" aria-label="[2] height=400 · stack-bottom · ссылка">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    [2] height=400 · stack-bottom · ссылка
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">плагин</li>
+                  </ul>
+                  <p class="mp-card__desc">Текст сверху, изображение снизу. Высота 400px.</p>
+                </div>
+              </a>
+            </li>
           </ol>
         </div>
       </section>

src/partials/mini-projects-section.en.html

@@ -20,7 +20,7 @@
           <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://www.figma.com/@mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -50,7 +50,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://dribbble.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -80,7 +80,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://t.me/designnotpizza"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -110,7 +110,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://github.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -140,7 +140,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/ai-assistant-figma/"
                 aria-label="AI assistant — open case"
               >
@@ -155,7 +155,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/card-columns-obsidian/"
                 aria-label="Card Columns — open case"
               >
@@ -170,7 +170,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/site-with-ai-ide/"
                 aria-label="This site — open case"
               >

src/partials/mini-projects-section.html

@@ -20,7 +20,7 @@
           <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://www.figma.com/@mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -50,7 +50,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://dribbble.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -80,7 +80,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://t.me/designnotpizza"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -110,7 +110,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                class="mp-card mp-card--link mp-card--stack-bottom mp-card--hor-image"
                 href="https://github.com/mamadaevv"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -140,7 +140,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/ai-assistant-figma/"
                 aria-label="AI assistant — открыть кейс"
               >
@@ -155,7 +155,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/card-columns-obsidian/"
                 aria-label="Card Columns — открыть кейс"
               >
@@ -170,7 +170,7 @@
             </li>
             <li class="mini-projects-grid__item" data-mp-cells="2">
               <a
-                class="mp-card mp-card--link mp-card--compact"
+                class="mp-card mp-card--link mp-card--stack-bottom"
                 href="cases/site-with-ai-ide/"
                 aria-label="Этот сайт — открыть кейс"
               >