From 91701343f6cd95dd216843da8fca7b1d1f5611b0 Mon Sep 17 00:00:00 2001 From: Jaron Date: Wed, 29 Jul 2026 20:12:44 -0500 Subject: [PATCH] Layout change :) --- app/assets/css/fonts.css | 11 ++--- app/assets/css/main.css | 25 ++++++------ app/layouts/main.vue | 88 ++++++++++++++++++---------------------- app/pages/index.vue | 72 ++++++++++++++++++++++---------- 4 files changed, 108 insertions(+), 88 deletions(-) diff --git a/app/assets/css/fonts.css b/app/assets/css/fonts.css index 33c39c7..2cb328a 100644 --- a/app/assets/css/fonts.css +++ b/app/assets/css/fonts.css @@ -1,13 +1,14 @@ -/* @font-face { +/* Sohne Buch */ +/*@font-face { font-family: 'SohneBuch'; src: url('~/assets/fonts/Sohne/Sohne-Buch.woff') format('woff'), url('~/assets/fonts/Sohne/Sohne-Buch.ttf') format('truetype'); font-display: swap; -} */ +}*/ /* Plantin MT Pro */ -/* @font-face { +@font-face { font-family: 'Plantin MT Pro'; src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRg.TTF') format('truetype'); @@ -59,7 +60,7 @@ font-weight: 300; font-style: italic; font-display: swap; -} */ +} /* Redaction */ @font-face { @@ -235,4 +236,4 @@ font-display: swap; } -/* @import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap'); */ +/*@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');*/ diff --git a/app/assets/css/main.css b/app/assets/css/main.css index d059a44..472503e 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -1,22 +1,23 @@ @import './fonts.css'; :root { - /* --font: 'Baskervville', serif; */ - /* --font: 'EB Garamond', serif; */ - /* --font: 'Plantin MT Pro', serif; */ - /* --font: 'Young Serif', serif; */ - /* --font: "SohneBuch", sans-serif; */ - --font-plain: 'SohneBuch', sans-serif; - --font: 'Redaction', serif; - --font-hover: 'Redaction 70', serif; - /* --font-hover: var(--font); */ + /*--font: 'Baskervville', serif;*/ + /*--font: 'EB Garamond', serif;*/ + --font: 'Plantin MT Pro', serif; + /*--font: 'Young Serif', serif;*/ + /*--font: 'SohneBuch', sans-serif;*/ + /*--font-plain: 'SohneBuch', sans-serif;*/ + /*--font: 'Redaction', serif;*/ + /*--font-hover: 'Redaction 70', serif;*/ + --font-plain: var(--font); + --font-hover: var(--font); --text: #333; --muted: #666; - --bg: #fbfbf7; - --bg-secondary: #efefe8; + --bg: #f6f7f9; + --bg-secondary: #e9ebef; --dot-color: #666; - --color-white-500: #fbfbf7; + --color-white-500: #f6f7f9; --gap: 1rem; diff --git a/app/layouts/main.vue b/app/layouts/main.vue index 3b82e56..84977ec 100644 --- a/app/layouts/main.vue +++ b/app/layouts/main.vue @@ -37,36 +37,29 @@ onMounted(() => { defaults: { ease: 'power3.out' }, }); - // trace lines draw down the page - tl.from('.trace', { - scaleY: 0, - transformOrigin: 'top center', - duration: 1.4, - ease: 'power3.inOut', + tl.from('.header-lower', { + autoAlpha: 0, + y: 12, + duration: 0.9, + ease: 'power2.out', }) - // header panel fades in as the lines pass it + .from('.name', { yPercent: 110, duration: 0.9 }, 0.2) .from( - '.header-lower', - { autoAlpha: 0, duration: 0.9, ease: 'power2.out' }, - 0.3, + '.title', + { yPercent: 120, autoAlpha: 0, duration: 0.8 }, + 0.35, ) - // masked title reveal - .from('.name', { yPercent: 110, duration: 0.9 }, 0.55) - .from('.title', { yPercent: 120, autoAlpha: 0, duration: 0.8 }, 0.7) - // footer appears as the lines reach the bottom .from( ['.footer-upper', '.footer-lower'], { autoAlpha: 0, duration: 0.7, ease: 'power2.out' }, - 0.9, + 0.55, ) - // nav chrome fades in last - .from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.9); + .from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.55); - // body content waits for the intro tl.from( 'main', { autoAlpha: 0, y: 16, duration: 0.8, ease: 'power2.out' }, - 0.7, + 0.4, ); }, pageEl.value); @@ -88,10 +81,6 @@ onMounted(() => {
-
- -
-
@@ -168,6 +157,7 @@ onMounted(() => { margin: 0 auto; display: flex; flex-direction: column; + /*gap: 1.5rem;*/ min-height: 100vh; position: relative; } @@ -178,23 +168,6 @@ main { flex-direction: column; } -.trace { - position: absolute; - top: 0; - height: 100%; - width: 1px; - background: var(--muted); - z-index: 1; -} - -.trace.left { - left: 0; -} - -.trace.right { - right: 0; -} - svg[height='0'] { position: fixed; } @@ -222,6 +195,12 @@ svg[height='0'] { flex-direction: column; } +.footer { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + .header-upper { height: 8vh; } @@ -237,12 +216,14 @@ svg[height='0'] { display: flex; flex-direction: column; align-items: flex-start; + justify-content: center; gap: 16px; - border-top: 1px solid var(--muted); - border-bottom: 1px solid var(--muted); - padding: 2rem; + padding: 3.25rem 2.5rem; + min-height: 22vh; color: var(--color-white-500); + border-radius: 16px; + overflow: hidden; position: relative; isolation: isolate; @@ -257,15 +238,16 @@ svg[height='0'] { background-position: left top; background-repeat: no-repeat; filter: url(#grainy); + border-radius: 16px; z-index: -1; } .footer-upper { - border-top: 1px solid var(--muted); - border-bottom: 1px solid var(--muted); - padding: 2rem; + padding: 3.25rem 2.5rem; color: var(--color-white-500); - min-height: 10vh; + min-height: 16vh; + border-radius: 16px; + overflow: hidden; position: relative; isolation: isolate; } @@ -279,6 +261,7 @@ svg[height='0'] { background-position: center; background-repeat: no-repeat; filter: url(#grainy); + border-radius: 16px; z-index: -1; } @@ -317,10 +300,17 @@ svg[height='0'] { @media (max-width: 768px) { .page-wrapper { --main-width: 100vw; + padding: 0 1rem; } - .trace { - display: none; + .header-lower, + .footer-upper { + border-radius: 12px; + } + + .header-lower::before, + .footer-upper::before { + border-radius: 12px; } } diff --git a/app/pages/index.vue b/app/pages/index.vue index 56538cd..1be9f6d 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -269,7 +269,7 @@ onMounted(() => {