Refactor layout styles: adjust width for mobile responsiveness and up…

…date typography alignment for improved readability
UmbraJS · Dec 17, 2024 · ee66257 · ee66257
1 parent 0e78ab5
commit ee66257
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/apps/hub/app/layouts/default.vue b/apps/hub/app/layouts/default.vue
@@ -76,15 +76,13 @@ onKeyStroke('Escape', () => {
   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);
+  @media (max-width: 800px) {
+    width: 100dvw;
+  }
 }
 
 .layout .content-layer .vignet {

diff --git a/packages/nobel/styles/_typography.scss b/packages/nobel/styles/_typography.scss
@@ -43,6 +43,7 @@ button {
   word-break: break-all;
   white-space: pre-wrap;
   text-transform: capitalize;
+  text-align: center;
 }
 
 h1.display,
@@ -54,6 +55,7 @@ h1.display,
 
 h1,
 .h1 {
+  text-align: left;
   font-size: var(--h1-size);
   line-height: var(--h1-size);
   font-variation-settings: var(--font-bold);