Layout change :)

app/assets/css/fonts.css

@@ -1,3 +1,4 @@
+/* Sohne Buch */
 /*@font-face {
     font-family: 'SohneBuch';
     src:
@@ -7,7 +8,7 @@
 }*/
 
 /* 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 {

app/assets/css/main.css

@@ -3,20 +3,21 @@
 :root {
     /*--font: 'Baskervville', serif;*/
     /*--font: 'EB Garamond', serif;*/
-    /* --font: 'Plantin MT Pro', serif; */
+    --font: 'Plantin MT Pro', serif;
     /*--font: 'Young Serif', serif;*/
-    /* --font: "SohneBuch", sans-serif; */
+    /*--font: 'SohneBuch', sans-serif;*/
-    --font-plain: 'SohneBuch', sans-serif;
+    /*--font-plain: 'SohneBuch', sans-serif;*/
-    --font: 'Redaction', serif;
+    /*--font: 'Redaction', serif;*/
-    --font-hover: 'Redaction 70', serif;
+    /*--font-hover: 'Redaction 70', serif;*/
-    /* --font-hover: var(--font); */
+    --font-plain: var(--font);
+    --font-hover: var(--font);
     --text: #333;
     --muted: #666;
-    --bg: #fbfbf7;
+    --bg: #f6f7f9;
-    --bg-secondary: #efefe8;
+    --bg-secondary: #e9ebef;
     --dot-color: #666;
 
-    --color-white-500: #fbfbf7;
+    --color-white-500: #f6f7f9;
 
     --gap: 1rem;
 

app/layouts/main.vue

@@ -37,36 +37,29 @@ onMounted(() => {
             defaults: { ease: 'power3.out' },
         });
 
-        // trace lines draw down the page
+        tl.from('.header-lower', {
-        tl.from('.trace', {
+            autoAlpha: 0,
-            scaleY: 0,
+            y: 12,
-            transformOrigin: 'top center',
+            duration: 0.9,
-            duration: 1.4,
+            ease: 'power2.out',
-            ease: 'power3.inOut',
         })
-            // header panel fades in as the lines pass it
+            .from('.name', { yPercent: 110, duration: 0.9 }, 0.2)
             .from(
-                '.header-lower',
+                '.title',
-                { autoAlpha: 0, duration: 0.9, ease: 'power2.out' },
+                { yPercent: 120, autoAlpha: 0, duration: 0.8 },
-                0.3,
+                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.55);
-            .from('.header-upper', { autoAlpha: 0, duration: 0.7 }, 0.9);
 
-        // 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(() => {
             </filter>
         </svg>
         <div class="page-wrapper" ref="pageEl">
-            <div class="trace left"></div>
-
-            <div class="trace right"></div>
-
             <header class="header">
                 <div class="header-upper">
                     <slot name="header-upper">
@@ -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);
+    padding: 3.25rem 2.5rem;
-    border-bottom: 1px solid var(--muted);
+    min-height: 22vh;
-    padding: 2rem;
     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);
+    padding: 3.25rem 2.5rem;
-    border-bottom: 1px solid var(--muted);
-    padding: 2rem;
     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 {
+    .header-lower,
-        display: none;
+    .footer-upper {
+        border-radius: 12px;
+    }
+
+    .header-lower::before,
+    .footer-upper::before {
+        border-radius: 12px;
     }
 }
 </style>

app/pages/index.vue

@@ -269,7 +269,7 @@ onMounted(() => {
 <template>
     <div ref="pageRoot">
         <NuxtLayout name="main">
-            <section class="selected-work">
+            <section class="rows">
                 <h5>Selected Work</h5>
                 <div class="section__content">
                     <a
@@ -295,7 +295,7 @@ onMounted(() => {
                     </a>
                 </div>
             </section>
-            <section class="projects">
+            <section class="rows">
                 <h5>Projects</h5>
                 <div class="section__content">
                     <a
@@ -356,44 +356,66 @@ onMounted(() => {
 
 <style scoped>
 section {
-    margin-top: 2rem;
+    margin-top: calc(var(--gap) * 2);
 }
 
 section > .section__content {
-    padding: 0 2rem;
+    padding: 0 calc(var(--gap) * 2);
 }
 
 /* section:not(:has(h5)) > .section__content {
     padding: 2rem;
 } */
 
-section > h5::before {
-    content: '';
-    height: 1px;
-    background: var(--muted);
-    order: 0;
-    width: 1rem;
-}
-
-section > h5::after {
-    content: '';
-    height: 1px;
-    background: var(--muted);
-    flex-grow: 1;
-}
-
 section > h5 {
+    --flare-length: 1.125rem; /* how far the flare extends horizontally */
+    --flare-spread: 1.125rem; /* how far the arms open up/down */
+
     font-weight: 400;
     font-style: italic;
     color: var(--muted);
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin-top: 0;
+    margin: 0 0 var(--gap) 0;
+    line-height: 1;
+}
+
+section > h5::before {
+    content: '';
+    width: var(--flare-length);
+    height: var(--flare-spread);
+    flex-shrink: 0;
+    background-color: var(--muted);
+    /* Optically center */
+    transform: translateY(-0.12em);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M20 8H10M10 8C5 8 2.5 4.5 1 2M10 8C5 8 2.5 11.5 1 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
+        center / 100% 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M20 8H10M10 8C5 8 2.5 4.5 1 2M10 8C5 8 2.5 11.5 1 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
+        center / 100% 100% no-repeat;
+}
+
+section > h5::after {
+    content: '';
+    height: var(--flare-spread);
+    flex-grow: 1;
+    background-color: var(--muted);
+    /* Optically center */
+    transform: translateY(-0.12em);
+    -webkit-mask:
+        linear-gradient(#000, #000) left center /
+            calc(100% - var(--flare-length) * 0.45) 1px no-repeat,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 8H10M10 8C15 8 17.5 4.5 19 2M10 8C15 8 17.5 11.5 19 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
+            right center / var(--flare-length) 100% no-repeat;
+    mask:
+        linear-gradient(#000, #000) left center /
+            calc(100% - var(--flare-length) * 0.45) 1px no-repeat,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 8H10M10 8C15 8 17.5 4.5 19 2M10 8C15 8 17.5 11.5 19 14' stroke='black' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
+            right center / var(--flare-length) 100% no-repeat;
 }
 
 section:last-of-type {
-    margin-bottom: 2rem;
+    margin-bottom: calc(var(--gap) * 2);
 }
 
 .work {
@@ -467,10 +489,16 @@ section:last-of-type {
     justify-content: center;
 }
 
+.rows > .section__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+}
+
 .project,
 .work {
     /*border-bottom: 1px solid var(--muted);*/
-    padding: var(--gap) 0;
+    /*padding: var(--gap) 0;*/
     display: block;
     text-decoration: none;
     color: inherit;