jason/mempalace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing hero container

Browse Source
This commit is contained in:
Dominique Deschatre
2026-04-17 15:53:50 -03:00
parent c8727b3a2d
commit 28d4f67ba2
1 changed files with 82 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.vitepress/theme/Landing.vue
+15 -4
View File
@@ -408,6 +408,7 @@ onBeforeUnmount(() => {
<section class="hero" id="hero"> <section class="hero" id="hero">
<span class="corner-ticks" aria-hidden="true"><span></span></span> <span class="corner-ticks" aria-hidden="true"><span></span></span>
<div class="hero-inner">
<div class="hero-copy"> <div class="hero-copy">
<h1 class="display"> <h1 class="display">
<span class="line">Memory is</span> <span class="line">Memory is</span>
@@ -482,6 +483,7 @@ onBeforeUnmount(() => {
disablepictureinpicture disablepictureinpicture
></video> ></video>
</div> </div>
</div>
</section> </section>
<!-- THE FORGETTING --> <!-- THE FORGETTING -->
@@ -1039,15 +1041,24 @@ body.mempalace-active { overflow-x: hidden; }
/* Hero */ /* Hero */
.mempalace-landing .hero { .mempalace-landing .hero {
position: relative;
width: 100%;
min-height: calc(100vh - 54px); min-height: calc(100vh - 54px);
max-height: 900px; max-height: 900px;
display: flex;
align-items: center;
justify-content: center;
padding-top: clamp(2rem, 4vw, 3.5rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
overflow: hidden;
}
.mempalace-landing .hero-inner {
width: 100%;
max-width: 1240px;
display: grid; display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 4rem); gap: clamp(2rem, 4vw, 4rem);
align-items: center; align-items: center;
padding-top: clamp(2rem, 4vw, 3.5rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
overflow: hidden;
} }
.mempalace-landing .hero-copy { position: relative; z-index: 3; } .mempalace-landing .hero-copy { position: relative; z-index: 3; }
.mempalace-landing .hero h1 { .mempalace-landing .hero h1 {
@@ -1957,7 +1968,7 @@ body.mempalace-active { overflow-x: hidden; }
.mempalace-landing .mech:nth-child(2) { border-bottom: var(--rule) solid var(--hair); } .mempalace-landing .mech:nth-child(2) { border-bottom: var(--rule) solid var(--hair); }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.mempalace-landing .hero { grid-template-columns: 1fr; gap: 2rem; } .mempalace-landing .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
.mempalace-landing .palace-stage { justify-self: center; max-width: 400px; order: -1; aspect-ratio: 1 / 0.85; } .mempalace-landing .palace-stage { justify-self: center; max-width: 400px; order: -1; aspect-ratio: 1 / 0.85; }
.mempalace-landing .anatomy-head { grid-template-columns: 1fr; } .mempalace-landing .anatomy-head { grid-template-columns: 1fr; }
.mempalace-landing .anatomy-diagram { grid-template-columns: 1fr; } .mempalace-landing .anatomy-diagram { grid-template-columns: 1fr; }