Design

alineacms · Jun 10, 2022 · 92ded2a · 92ded2a
1 parent c70d9df
commit 92ded2a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 8 deletions.
diff --git a/apps/web/src/view/DocPage.module.scss b/apps/web/src/view/DocPage.module.scss
@@ -1,7 +1,7 @@
 .root {
   &-nav {
     margin-top: auto;
-    padding-top: 40px;
+    padding-top: 30px;
 
     &-link {
       display: block;

diff --git a/apps/web/src/view/DocPage.tsx b/apps/web/src/view/DocPage.tsx
@@ -30,7 +30,7 @@ export function DocPage({
         <Layout.Scrollable>
           <Breadcrumbs parents={parents.concat(doc)} />
           <Blocks blocks={blocks} />
-          <HStack center gap={20} className={styles.root.nav()}>
+          <HStack gap={20} className={styles.root.nav()}>
             {prev && (
               <Link href={prev.url} passHref>
                 <a className={styles.root.nav.link()}>

diff --git a/apps/web/src/view/layout/Footer.module.scss b/apps/web/src/view/layout/Footer.module.scss
@@ -2,8 +2,12 @@
 
 .root {
   position: relative;
-  padding: 80px 0;
   background: var(--web-background-variant);
+  padding: 30px 0;
+
+  @include ml {
+    padding: 80px 0;
+  }
 
   &-bg {
     position: absolute;

diff --git a/apps/web/src/view/layout/Footer.tsx b/apps/web/src/view/layout/Footer.tsx
@@ -34,7 +34,7 @@ export function Footer({footer}: FooterProps) {
                 <nav>
                   {section.links.map(link => {
                     return (
-                      <Link href={link.url}>
+                      <Link key={link.id} href={link.url}>
                         <a key={link.id}>{link.label}</a>
                       </Link>
                     )

diff --git a/apps/web/src/view/layout/Header.module.scss b/apps/web/src/view/layout/Header.module.scss
@@ -3,7 +3,6 @@
 .root {
   --bg-faded: hsla(var(--web-header-background-hsl), 0.9);
   --bg: var(--web-header-background);
-
   position: sticky;
   top: 0;
   color: var(--web-foreground-faded);
@@ -12,7 +11,6 @@
   background-color: var(--bg-faded);
   backdrop-filter: blur(12px);
   flex-shrink: 0;
-  // box-shadow: 0 2px 4px rgb(0 0 0 / 2%), inset 0 -1px 0 rgb(0 0 0 / 6%);
   border-bottom: 1px solid hsla(var(--web-negative-hsl), 0.09);
 
   &.is-transparent {

diff --git a/apps/web/src/view/layout/Layout.module.scss b/apps/web/src/view/layout/Layout.module.scss
@@ -31,7 +31,17 @@
   flex: 1 0 0;
   display: flex;
   flex-direction: column;
-  padding: 20px 45px 45px 45px;
+  padding-top: 20px;
+  padding-bottom: 45px;
+  min-width: 0;
+
+  @media (min-width: 980px) {
+    padding-left: 20px;
+  }
+
+  @include l {
+    padding-left: 45px;
+  }
 
   &-inner {
     width: 100%;

diff --git a/apps/web/src/view/layout/WebTypo.module.scss b/apps/web/src/view/layout/WebTypo.module.scss
@@ -1,3 +1,5 @@
+@import '@alinea/web/src/style.scss';
+
 .hyphenate {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -11,14 +13,18 @@
   min-width: 0;
   font-size: 45px;
   font-weight: 700;
-  line-height: 1.25;
+  line-height: 1;
   margin: 35px 0 20px 0;
   white-space: pre-line;
   text-rendering: optimizeLegibility;
   @extend .hyphenate;
   &.is-flat {
     margin: 0;
   }
+
+  @include s {
+    font-size: 30px;
+  }
 }
 
 .h2 {