add overpass font and put text under anchor

4 files changed, 18 insertions, 1 deletions

diff --git a/package-lock.json b/package-lock.json
index a0b03f6..372f481 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@fontsource/overpass": "^5.2.5",
         "flickity": "^3.0.0"
       },
       "devDependencies": {
@@ -55,6 +56,15 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@fontsource/overpass": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/overpass/-/overpass-5.2.5.tgz",
+      "integrity": "sha512-xwxYbZXc4lDQi1z0r9LiJhHTJm4UqprdYcdIZVi7C4lVtWZOTX0nvyto6Be8wWJMeu+sHb9fzLN3byldibSF4A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
diff --git a/package.json b/package.json
index c6d4f57..be6dc67 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "dev": "webpack serve"
   },
   "dependencies": {
+    "@fontsource/overpass": "^5.2.5",
     "flickity": "^3.0.0"
   },
   "devDependencies": {
diff --git a/src/index.js b/src/index.js
index cac7bf4..c7e5885 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import "@fontsource/overpass"
 import "./style.css"
 import ImmichConnector from "./immich.js"
 import Page from "./pages.js"
diff --git a/src/style.css b/src/style.css
index 8149462..11ecba4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,6 +6,7 @@ body {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
+	font-family: "Overpass", sans-serif;
 }
 
 main, #slideshow {
@@ -86,7 +87,11 @@ footer {
 }
 
 #menu {
-	a { width: 100%; height: 48px }
+	a {
+		width: 100%;
+		padding: 12px;
+		svg { height: 24px }
+	}
 	display: flex;
 	width: 100%;
 	padding: 16px;