feat: add new design for website

src/assets/styles/layout/base.css

@@ -0,0 +1,66 @@
+/** Base */
+.page-grid {
+  display: grid;
+  grid-template-columns: var(--grid-fullsize);
+  grid-template-rows: var(--grid-row) auto var(--grid-row);
+  min-height: 100vh;
+}
+
+.page-content {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  grid-template-columns: var(--grid-fullsize);
+  grid-template-rows: var(--grid-row);
+  margin-block-end: var(--grid-row);
+  row-gap: clamp(1.5rem, var(--space-55), 6rem);
+}
+
+.page-title {
+  align-items: center;
+  display: flex;
+  font-size: var(--font-size-4);
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+  justify-content: flex-end;
+  margin: 0;
+  padding-inline-end: calc(var(--space-55) / 2);
+  transform: rotate(180deg);
+  writing-mode: vertical-lr;
+}
+
+@media (--tablet) {
+  .page-title {
+    grid-column: 1;
+  }
+}
+
+.page-title-link {
+  font-weight: var(--font-weight-black);
+  text-decoration: none;
+}
+
+.svg-icons {
+  left: -9999px;
+  position: absolute;
+  top: -9999px;
+}
+
+/** Narrow */
+.layout-narrow {
+  grid-column: 3 / -3;
+  grid-row: 2 / 3;
+}
+
+@media (--tablet) {
+  .layout-narrow {
+    grid-column: 6 / -6;
+  }
+}
+
+@media (--desktop) {
+  .layout-narrow {
+    grid-column: 7 / -7;
+  }
+}