Added a body to the home page

2026-10-23 19:35:05 +02:00
1 parent 7b51551856
commit badec1af77
@@ -0,0 +1,136 @@
+/* Home page sections: intro / motivation / to be done.
+   Colors come from the page itself (currentColor), so it follows style.css.
+   If your theme has an accent variable with a different name, change --home-accent. */
+
+/* Tighten the gap under the logo: the old "nothing here yet" layout
+   probably made .home fill the viewport, so we undo that here. */
+main.home {
+  min-height: 0 !important;
+  height: auto !important;
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+main.home .logo {
+  margin-bottom: 0;
+}
+
+.landing {
+  --home-accent: var(--accent, currentColor);
+  --home-line: color-mix(in srgb, currentColor 18%, transparent);
+  --home-soft: color-mix(in srgb, currentColor 6%, transparent);
+  max-width: 62rem;
+  margin: 0 auto;
+  padding: 0 1.25rem 6rem;
+}
+
+.landing .block {
+  margin: 0 0 clamp(3.5rem, 9vw, 6.5rem);
+}
+
+.landing h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  margin: 0 0 1.25rem;
+  font-size: clamp(1.5rem, 3.2vw, 2rem);
+  line-height: 1.2;
+}
+
+/* line after the heading */
+.landing h2::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, var(--home-line), transparent);
+}
+
+.landing p {
+  margin: 0 0 1.1rem;
+  max-width: 68ch;
+  font-size: 1.05rem;
+  line-height: 1.75;
+}
+
+.landing .closing {
+  margin-top: 1.6rem;
+  padding-left: 1rem;
+  border-left: 2px solid var(--home-accent);
+  font-size: 1.15rem;
+}
+
+/* ---------- intro with portrait ---------- */
+
+.intro {
+  display: grid;
+  grid-template-columns: minmax(180px, 280px) 1fr;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  align-items: center;
+}
+
+.portrait {
+  position: relative;
+  margin: 0;
+}
+
+.portrait img {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  object-position: 50% 30%;
+  border: 1px solid var(--home-line);
+  border-radius: 6px;
+  background: var(--home-soft);
+}
+
+/* offset frame behind the photo */
+.portrait::before {
+  content: "";
+  position: absolute;
+  inset: 0.7rem -0.7rem -0.7rem 0.7rem;
+  border: 1px solid var(--home-accent);
+  border-radius: 6px;
+  opacity: 0.45;
+  z-index: -1;
+}
+
+@media (max-width: 680px) {
+  .intro {
+    grid-template-columns: 1fr;
+  }
+  .portrait {
+    width: min(70%, 260px);
+    margin: 0 auto 0.5rem;
+  }
+}
+
+/* ---------- scroll reveal ---------- */
+
+.reveal-on .reveal {
+  opacity: 0;
+  transform: translateY(26px);
+  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
+              transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
+  transition-delay: var(--delay, 0ms);
+  will-change: opacity, transform;
+}
+
+.reveal-on .reveal.reveal-left {
+  transform: translateX(-30px);
+}
+
+.reveal-on .reveal.is-visible {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal-on .reveal,
+  .reveal-on .reveal.reveal-left {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}