feat(a11y): make layout a bit more responsive

H1ghBre4k3r · Dec 26, 2024 · 9070318 · 9070318
1 parent 64f7650
commit 9070318
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "vite": "^6.0.3"
   },
   "dependencies": {
-    "@pesca-dev/atomicity": "^0.1.4",
+    "@pesca-dev/atomicity": "^0.1.5",
     "simple-icons": "^14.0.0"
   }
 }
diff --git a/src/header.css b/src/header.css
@@ -3,8 +3,6 @@ website-header {
 }
 
 header {
-  padding-inline-start: 25px;
-
   a {
     text-decoration: none;
     color: inherit;
@@ -31,10 +29,8 @@ header {
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1420px) {
   header {
-    padding-inline-start: 100px;
-
     h1 {
       font-size: 6em;
     }

diff --git a/src/main.tsx b/src/main.tsx
@@ -9,6 +9,10 @@ export class WebsiteMain extends AbstractElement {
   }
 
   render() {
-    return <website-header></website-header>;
+    return (
+      <main>
+        <website-header></website-header>
+      </main>
+    );
   }
 }
diff --git a/src/style.css b/src/style.css
@@ -14,6 +14,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 svg {
   fill: currentColor;
 }
@@ -28,3 +34,15 @@ svg {
 website-main {
   display: contents;
 }
+
+main {
+  width: 800px;
+  max-width: calc(100vw - 40px);
+}
+
+@media only screen and (min-width: 1420px) {
+  main {
+    width: 1400px;
+    max-width: calc(100vw - 20px);
+  }
+}