Refactor layout structure and styles: rename content class to content…

…-layer, enhance responsiveness, and update typography variables for improved readability

apps/hub/app/layouts/default.vue

@@ -17,9 +17,11 @@ onKeyStroke('Escape', () => {
 <template>
   <div class="layout" :class="classObject">
     <div class="burger" @click="toggleReveal" />
-    <div class="content">
+    <div class="content-layer">
       <div class="vignet" @click="toggleReveal" />
-      <slot />
+      <main class="page">
+        <slot />
+      </main>
     </div>
     <div class="underbar">
       <header>
@@ -35,10 +37,11 @@ onKeyStroke('Escape', () => {
 
 <style lang="scss">
 .layout {
-  --header-height: 60px;
+  --header-height: calc(var(--h1-display-size) + var(--space-2));
   --sidebar-width: calc(100dvw / 3);
   position: relative;
   width: 100dvw;
+  background: red;
 }
 
 @media (max-width: 800px) {
@@ -47,9 +50,79 @@ onKeyStroke('Escape', () => {
   }
 }
 
+.layout .content-layer {
+  position: relative;
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  place-items: center;
+
+  padding-bottom: var(--space-5);
+  background-color: var(--base-20);
+
+  transform: translateY(0px) translateX(0px);
+  transition: var(--slow);
+}
+
+.layout .content-layer main.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  place-items: center;
+
+  width: 80dvw;
+  max-width: 1900px;
+  gap: var(--space-4);
+
+  transform: translateY(0px) translateX(0px);
+
+  width: 100dvw;
+  overflow: hidden;
+  min-height: 100vh;
+  padding-bottom: var(--space-5);
+  background-color: var(--base-20);
+
+  transition: var(--slow);
+}
+
+.layout .content-layer .vignet {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--accent);
+  opacity: 0;
+  z-index: 1;
+  pointer-events: none;
+  transition: opacity var(--slow);
+  border-radius: var(--radius);
+}
+
+.layout.reveal .content-layer .vignet {
+  opacity: 0.7;
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.layout.reveal .content-layer .vignet:hover {
+  opacity: 0.3;
+}
+
+.layout.reveal .content-layer {
+  pointer-events: none;
+  transform: translateY(var(--header-height)) translateX(calc(0px - var(--sidebar-width) + 1px));
+  @media (max-width: 800px) {
+    transform: translateY(0) translateX(calc(0px - var(--sidebar-width) + 1px));
+    transition: var(--slower);
+  }
+}
+
 .underbar {
   position: fixed;
-  z-index: -1;
+  z-index: 0;
   top: 0;
   left: 0;
   height: 100dvh;
@@ -67,6 +140,7 @@ onKeyStroke('Escape', () => {
 .underbar header {
   display: grid;
   grid-template-columns: 1fr auto;
+  align-items: center;
 
   grid-column: span 2;
   grid-area: header;
@@ -75,7 +149,7 @@ onKeyStroke('Escape', () => {
 
 .layout .burger {
   position: fixed;
-  right: 17px;
+  right: 0px;
   z-index: 2;
   width: 60px;
   height: 60px;
@@ -93,50 +167,4 @@ onKeyStroke('Escape', () => {
   grid-area: content;
   background-color: var(--base-20);
 }
-
-.layout > .content {
-  display: grid;
-  justify-content: center;
-  position: relative;
-  z-index: 0;
-  transform: translateY(0px) translateX(0px);
-  background-color: var(--base-20);
-  transition: var(--slow);
-  width: 100dvw;
-  overflow: hidden;
-  min-height: 100vh;
-  padding-bottom: var(--space-5);
-}
-
-.layout .content .vignet {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--accent);
-  opacity: 0;
-  z-index: 1;
-  pointer-events: none;
-  transition: opacity var(--slow);
-  border-radius: var(--radius);
-}
-
-.layout.reveal .content .vignet {
-  opacity: 0.7;
-  cursor: pointer;
-  pointer-events: all;
-}
-
-.layout.reveal .content .vignet:hover {
-  opacity: 0.3;
-}
-
-.layout.reveal > .content {
-  transform: translateY(var(--header-height)) translateX(calc(0px - var(--sidebar-width) + 1px));
-  @media (max-width: 800px) {
-    transform: translateY(0) translateX(calc(0px - var(--sidebar-width) + 1px));
-    transition: var(--slower);
-  }
-}
 </style>

apps/hub/app/pages/index.vue

@@ -3,35 +3,27 @@ import PostFeed from '~/components/PostFeed.vue'
 </script>
 
 <template>
-  <main class="page">
-    <div class="artickle">
-      <RichArtickle />
-    </div>
-    <PostFeed />
-  </main>
+  <div class="artickle">
+    <RichArtickle />
+  </div>
+  <PostFeed />
 </template>
 
-<style scoped>
-.page {
-  display: flex;
-  flex-direction: column;
-  place-items: center;
-
-  width: 100dvw;
-  max-width: 1300px;
-  gap: var(--space-4);
-}
-
+<style scoped lang="scss">
 .artickle {
   margin-top: 200px;
 
   display: grid;
   gap: var(--space-1);
-  padding: var(--space-3);
-  padding-bottom: var(--space-6);
+  padding: var(--space-5);
+  padding-bottom: var(--space-7);
   border-radius: var(--radius);
   background-color: var(--base-10);
   width: 100%;
   /* border: solid var(--border-size) var(--base-40); */
+
+  h2 {
+    margin: var(--space-6);
+  }
 }
 </style>

packages/nobel/styles/_base.scss

@@ -18,9 +18,14 @@ html {
 html,
 body {
   height: 100%;
-  overflow-x: hidden;
+  overflow: auto;
+  overflow: initial;
   transition: background 0.2s;
 }
+
+body {
+  overflow-x: hidden;
+}
 /*
     6. Improve media defaults
   */

packages/nobel/styles/_typography.scss

@@ -8,6 +8,17 @@
   --font-light: 'wght' 200, 'wdth' 100;
 }
 
+:root {
+  --paragraph: 1.2rem;
+  --h1-display-size: clamp(2.4rem, 5vw, 5rem);
+  --h1-size: clamp(2rem, 2.9vw, 5rem);
+  --h2-size: clamp(1.8rem, 2vw, 3rem);
+  --h3-size: clamp(1rem, 1.6vw, 2rem);
+  --h4-size: clamp(1rem, 1.3vw, 1.5rem);
+  --h5-size: clamp(1rem, 1.2vw, 1.2rem);
+  --h6-size: clamp(1rem, 1vw, 1rem);
+}
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -36,57 +47,50 @@ button {
 
 h1.display,
 .h1.display {
-  --size: clamp(2.4rem, 5vw, 5rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h1-display-size);
+  line-height: var(--h1-display-size);
   font-variation-settings: var(--font-bold);
 }
 
 h1,
 .h1 {
-  --size: clamp(2rem, 2.9vw, 5rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h1-size);
+  line-height: var(--h1-size);
   font-variation-settings: var(--font-bold);
 }
 
 h2,
 .h2 {
-  --size: clamp(1.8rem, 2vw, 3rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h2-size);
+  line-height: var(--h2-size);
   font-variation-settings: var(--font-bold);
 }
 
 h3,
 .h3 {
-  --size: clamp(1rem, 1.6vw, 2rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h3-size);
+  line-height: var(--h3-size);
   font-variation-settings: var(--font-bold);
 }
 
 h4,
 .h4 {
-  --size: clamp(1rem, 1.3vw, 1.5rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h4-size);
+  line-height: var(--h4-size);
   font-variation-settings: var(--font-bold);
 }
 
 h5,
 .h5 {
-  --size: clamp(1rem, 1.2vw, 1.2rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h5-size);
+  line-height: var(--h5-size);
   font-variation-settings: var(--font-bold);
 }
 
 h6,
 .h6 {
-  --size: clamp(1rem, 1vw, 1rem);
-  font-size: var(--size);
-  line-height: var(--size);
+  font-size: var(--h6-size);
+  line-height: var(--h6-size);
   font-variation-settings: var(--font-bold);
 }
 
@@ -97,10 +101,6 @@ h6,
   background: var(--accent-20) !important;
 }
 
-:root {
-  --paragraph: 1.2rem;
-}
-
 p,
 button,
 .bodycopy,