chore: remove lit

feat: add main header component
2024-05-04 09:18:31 +03:00 · 2024-05-04 09:18:31 +03:00 · 345d0bed05
commit 345d0bed05
parent 070bfd8d62
11 changed files with 150 additions and 279 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+public
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1 @@
+{}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,8 @@
+{
+    "eslint.format.enable": true,
+    "prettier.configPath": ".prettierrc",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,8 +1,6 @@
-import { defineConfig } from 'astro/config';
-
-import lit from "@astrojs/lit";
+import { defineConfig } from "astro/config";

 // https://astro.build/config
 export default defineConfig({
-  integrations: [lit()]
-});
+  integrations: [],
+});
--- a/package-lock.json
+++ b/package-lock.json
@ -9,12 +9,11 @@
      "version": "0.0.1",
      "dependencies": {
        "@astrojs/check": "^0.5.10",
-        "@astrojs/lit": "^4.0.1",
-        "@webcomponents/template-shadowroot": "^0.2.1",
-        "animejs": "^3.2.2",
        "astro": "^4.7.0",
-        "lit": "^3.1.3",
        "typescript": "^5.4.5"
+      },
+      "devDependencies": {
+        "prettier": "3.2.5"
      }
    },
    "node_modules/@ampproject/remapping": {
@ -95,21 +94,6 @@
        }
      }
    },
-    "node_modules/@astrojs/lit": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/lit/-/lit-4.0.1.tgz",
-      "integrity": "sha512-dBTtsTlKC3TJhsZl5uzcwwTAuP1mgY3bHZDdAQVT7uVYXOfpeYeS9crQbr32BKRGx5WbqqZPDdz0TVyFpjBHSA==",
-      "dependencies": {
-        "@lit-labs/ssr": "^3.2.0",
-        "@lit-labs/ssr-client": "^1.1.5",
-        "@lit-labs/ssr-dom-shim": "^1.1.2",
-        "parse5": "^7.1.2"
-      },
-      "peerDependencies": {
-        "@webcomponents/template-shadowroot": "^0.2.1",
-        "lit": "^3.1.0"
-      }
-    },
    "node_modules/@astrojs/markdown-remark": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-5.1.0.tgz",
@ -485,6 +469,14 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/@babel/types": {
      "version": "7.24.5",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
@ -1347,55 +1339,6 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
-    "node_modules/@lit-labs/ssr": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-3.2.2.tgz",
-      "integrity": "sha512-He5TzeNPM9ECmVpgXRYmVlz0UA5YnzHlT43kyLi2Lu6mUidskqJVonk9W5K699+2DKhoXp8Ra4EJmHR6KrcW1Q==",
-      "dependencies": {
-        "@lit-labs/ssr-client": "^1.1.7",
-        "@lit-labs/ssr-dom-shim": "^1.2.0",
-        "@lit/reactive-element": "^2.0.4",
-        "@parse5/tools": "^0.3.0",
-        "@types/node": "^16.0.0",
-        "enhanced-resolve": "^5.10.0",
-        "lit": "^3.1.2",
-        "lit-element": "^4.0.4",
-        "lit-html": "^3.1.2",
-        "node-fetch": "^3.2.8",
-        "parse5": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=13.9.0"
-      }
-    },
-    "node_modules/@lit-labs/ssr-client": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-client/-/ssr-client-1.1.7.tgz",
-      "integrity": "sha512-VvqhY/iif3FHrlhkzEPsuX/7h/NqnfxLwVf0p8ghNIlKegRyRqgeaJevZ57s/u/LiFyKgqksRP5n+LmNvpxN+A==",
-      "dependencies": {
-        "@lit/reactive-element": "^2.0.4",
-        "lit": "^3.1.2",
-        "lit-html": "^3.1.2"
-      }
-    },
-    "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
-      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
-    },
-    "node_modules/@lit-labs/ssr/node_modules/@types/node": {
-      "version": "16.18.96",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz",
-      "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ=="
-    },
-    "node_modules/@lit/reactive-element": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
-      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.2.0"
-      }
-    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -1428,14 +1371,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/@parse5/tools": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@parse5/tools/-/tools-0.3.0.tgz",
-      "integrity": "sha512-zxRyTHkqb7WQMV8kTNBKWb1BeOFUKXBXTBWuxg9H9hfvQB3IwP6Iw2U75Ia5eyRxPNltmY7E8YAlz6zWwUnjKg==",
-      "dependencies": {
-        "parse5": "^7.0.0"
-      }
-    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.17.2",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@ -1732,11 +1667,6 @@
        "undici-types": "~5.26.4"
      }
    },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
-    },
    "node_modules/@types/unist": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
@ -1847,11 +1777,6 @@
      "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.16.tgz",
      "integrity": "sha512-JT5CvrIYYCrmB+dCana8sUqJEcGB1ZDXNLMQ2+42bW995WmNoenijWMUdZfwmuQUTQcEVVIa2OecZzTYWUW9Cg=="
    },
-    "node_modules/@webcomponents/template-shadowroot": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@webcomponents/template-shadowroot/-/template-shadowroot-0.2.1.tgz",
-      "integrity": "sha512-fXL/vIUakyZL62hyvUh+EMwbVoTc0hksublmRz6ai6et8znHkJa6gtqMUZo1oc7dIz46exHSIImml9QTdknMHg=="
-    },
    "node_modules/acorn": {
      "version": "8.11.3",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@ -1863,11 +1788,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/animejs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
-      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
-    },
    "node_modules/ansi-align": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@ -2539,14 +2459,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -2665,18 +2577,6 @@
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
    },
-    "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -2832,28 +2732,6 @@
        "reusify": "^1.0.4"
      }
    },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -2897,17 +2775,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -2983,14 +2850,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@ -3499,34 +3358,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/lit": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
-      "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
-      "dependencies": {
-        "@lit/reactive-element": "^2.0.4",
-        "lit-element": "^4.0.4",
-        "lit-html": "^3.1.2"
-      }
-    },
-    "node_modules/lit-element": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
-      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.2.0",
-        "@lit/reactive-element": "^2.0.4",
-        "lit-html": "^3.1.2"
-      }
-    },
-    "node_modules/lit-html": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
-      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
-      "dependencies": {
-        "@types/trusted-types": "^2.0.2"
-      }
-    },
    "node_modules/load-yaml-file": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz",
@ -4486,41 +4317,6 @@
        "url": "https://opencollective.com/unified"
      }
    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
    "node_modules/node-releases": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@ -4885,6 +4681,21 @@
        "node": ">=8.15"
      }
    },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "devOptional": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/prismjs": {
      "version": "1.29.0",
      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@ -5829,14 +5640,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/to-fast-properties": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@ -6424,14 +6227,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -11,11 +11,10 @@
  },
  "dependencies": {
    "@astrojs/check": "^0.5.10",
-    "@astrojs/lit": "^4.0.1",
-    "@webcomponents/template-shadowroot": "^0.2.1",
-    "animejs": "^3.2.2",
    "astro": "^4.7.0",
-    "lit": "^3.1.3",
    "typescript": "^5.4.5"
+  },
+  "devDependencies": {
+    "prettier": "3.2.5"
  }
 }
--- a/src/components/MainHeader.astro
+++ b/src/components/MainHeader.astro
@ -0,0 +1,36 @@
+---
+
+---
+
+<div class="header">
+  <ul class="contact-links undecorated-anchor">
+    <li><a href="#">Eposta</a></li>
+    <li><a href="#">Github</a></li>
+    <li><a href="#">LinkedIn</a></li>
+    <li><a href="#">CV</a></li>
+  </ul>
+
+  <div class="title-and-nav">
+    <div class="title-and-gol">
+      <h1 class="main-title">log101</h1>
+      <div id="board" class="board"></div>
+    </div>
+    <div>
+      <ul class="nav-links undecorated-anchor">
+        <li><a href="#">Teknik</a></li>
+        <li><a href="#">Felsefi</a></li>
+        <li><a href="#">Babür'ün Serüvenleri</a></li>
+        <li><a href="#">Ansiklopedi</a></li>
+      </ul>
+      <hr />
+    </div>
+  </div>
+</div>
+
+<script>
+  import ConwaySimulator from "../scripts/conway-simulator";
+
+  let gol = new ConwaySimulator(10, 46, 10, 250);
+  document.getElementById("board")?.append(gol.canvas);
+  gol.start();
+</script>
--- a/src/components/header.js
+++ b/src/components/header.js
@ -1,9 +0,0 @@
-import { LitElement, html } from 'lit';
-
-export class Title extends LitElement {
-    render() {
-        return html`<h1>Log101</h1>`;
-    }
-}
-
-customElements.define('main-title', Title);
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -23,7 +23,10 @@ const { title } = Astro.props;
 <style is:global>
 	:root {
 		--h1-desktop: 3.815rem;
+		--h6-desktop: 1.25rem;
 		font-size: 18px;
+		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
+			sans-serif;
 	}
 	body {
 		display: flex;
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,26 +1,11 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import '../styles/gol.css';
+import MainHeader from "../components/MainHeader.astro";
+import Layout from "../layouts/Layout.astro";
+import "../styles/gol.css";
 ---

 <Layout title="log101">
-	<div class="container">
-		<div class="header">
-			<h1 class="main-title">log101</h1>
-			<div id="board" class="board"></div>
-		</div>
-
-		<button id="startButton">Start Game</button>
-		<button id="changeWidthButton">Change Width</button>
-	</div>
+  <div class="container">
+    <MainHeader />
+  </div>
 </Layout>
-
-<script>
-	import ConwaySimulator from '../scripts/conway-simulator';
-
-	let gol = new ConwaySimulator(10, 46, 10, 250);
-	document.getElementById('board')?.append(gol.canvas);
-	gol.start();
-	const startButton = document.getElementById('startButton');
-	startButton!.onclick = () => gol.stop();
-</script>
--- a/src/styles/gol.css
+++ b/src/styles/gol.css
@ -1,14 +1,65 @@
 .container {
-    width: 710;
-}
-
-.main-title {
-    font-family: 'Courier New', Courier, monospace;
-    font-size: var(--h1-desktop);
-    max-width: 250;
+  width: 710px;
 }

 .header {
-    display: flex;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  gap: 6px;
+}
+
+.contact-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  gap: 12px;
+}
+
+.contact-links a {
+  color: grey;
+}
+
+.undecorated-anchor a {
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  gap: 12px;
+}
+
+.nav-links a {
+  font-size: var(--h6-desktop);
+  color: inherit;
+}
+
+.title-and-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.title-and-gol {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 110px;
+}
+
+.main-title {
+  font-family: "Courier New", Courier, monospace;
+  font-size: var(--h1-desktop);
+  max-width: 250;
+  margin: 0;
+  padding: 0;
 }