feat: font support

AlwaysNur · AlwaysNur · commit eb8e53377ce8 · 2025-08-19T12:11:37.000+12:00
diff --git a/src/config.html b/src/config.html
@@ -6,9 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Starpage Config</title>
     <link rel="stylesheet" href="" id="theme" />
-    <script src="js/config.js"></script>
+    <script src="js/config.js" defer></script>
     <script src="js/theme.js"></script>
+    <script src="js/font.js" defer></script>
     <link rel="stylesheet" href="css/config.css">
+    <link href="" rel="stylesheet" id="font">
+    <style id="font-set">
+    </style>
 </head>
 
 <body>
@@ -23,6 +27,8 @@ <h3>Theme</h3>
             <option value="6">Nord Light</option>
             <option value="5">Nord Dark</option>
         </select><br>
+        <h3>Font</h3>
+        <input type="text" placeholder="Type font name..." id="font-picker">
         <h2>Search Engine</h2>
         <select name="search-engine-picker" id="search-engine-picker" oninput="changeSearchEngine()">
             <option value="1">DuckDuckGo</option>
diff --git a/src/css/config.css b/src/css/config.css
@@ -5,11 +5,16 @@ body {
     padding-left: 10px;
 }
 
-select {
+select,
+input {
     background-color: var(--bg-2);
     color: var(--fg);
     outline: none;
     border: none;
     padding: 9px;
     border-radius: 5px;
+}
+
+input::placeholder {
+    color: var(--fg-1);
 }
diff --git a/src/css/main.css b/src/css/main.css
@@ -30,7 +30,7 @@ body {
 
 #search-box::placeholder {
 	color: var(--fg-1);
-	font-size: 13pt;
+	font-size: 12pt;
 }
 
 h1#time {
@@ -114,7 +114,7 @@ body {
 	overflow: hidden;
 	font-size: 12pt;
 	opacity: 0;
-	transition: opacity 1.5s;
+	transition: opacity 1s;
 }
 
 h1 {
diff --git a/src/index.html b/src/index.html
@@ -9,13 +9,20 @@
 	<link rel="stylesheet" href="" id="theme" />
 	<script src="js/index.js"></script>
 	<script src="js/theme.js"></script>
+	<script src="js/font.js" defer></script>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="" rel="stylesheet" id="font">
+	<script src="js/font.js" defer></script>
+	<style id="font-set">
+	</style>
 </head>
 
 <body onload="document.body.style.opacity='1'">
 	<div class="container">
 		<h1 id="time">00:00</h1>
 		<form method="get" id="search">
-			<input name="q" type="search" id="search-box" autofocus/>
+			<input name="q" type="search" id="search-box" autofocus />
 		</form>
 		<br />
 		<div id="widgets">
diff --git a/src/js/config.js b/src/js/config.js
@@ -1,12 +1,21 @@
 function changeTheme() {
-    localStorage.setItem("theme", document.getElementById("theme-picker").value)
-    location.reload()
+    localStorage.setItem("theme", document.getElementById("theme-picker").value);
+    location.reload();
 }
 function changeSearchEngine() {
-    localStorage.setItem("se", document.getElementById("search-engine-picker").value)
+    localStorage.setItem("se", document.getElementById("search-engine-picker").value);
+}
+function changeFont() {
+    localStorage.setItem("font", document.getElementById("font-picker").value);
+    location.reload();
 }
 
-document.addEventListener("DOMContentLoaded", function () {
-    document.getElementById("theme-picker").value = localStorage.getItem("theme");
-    document.getElementById("search-engine-picker").value = localStorage.getItem("se");
+document.getElementById("theme-picker").value = localStorage.getItem("theme");
+document.getElementById("search-engine-picker").value = localStorage.getItem("se");
+document.getElementById("font-picker").value = localStorage.getItem("font")
+document.getElementById("font-picker").addEventListener("keyup", function (event) {
+    event.preventDefault();
+    if (event.key === "Enter") {
+        changeFont();
+    }
 });
diff --git a/src/js/font.js b/src/js/font.js
@@ -0,0 +1,3 @@
+var font = localStorage.getItem("font");
+document.getElementById("font").href = `https://fonts.googleapis.com/css2?family=${font.replaceAll(" ", "+")}&display=swap`
+document.getElementById("font-set").innerText = `body, input::placeholder, input,select,option{font-family: "${font}", sans-serif;}`

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ body {`
`30`	`30`
`31`	`31`	`#search-box::placeholder {`
`32`	`32`	`color: var(--fg-1);`
`33`		`- font-size: 13pt;`
	`33`	`+ font-size: 12pt;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`h1#time {`
`@@ -114,7 +114,7 @@ body {`
`114`	`114`	`overflow: hidden;`
`115`	`115`	`font-size: 12pt;`
`116`	`116`	`opacity: 0;`
`117`		`- transition: opacity 1.5s;`
	`117`	`+ transition: opacity 1s;`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`h1 {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+var font = localStorage.getItem("font");`
	`2`	+document.getElementById("font").href = `https://fonts.googleapis.com/css2?family=${font.replaceAll(" ", "+")}&display=swap`
	`3`	+document.getElementById("font-set").innerText = `body, input::placeholder, input,select,option{font-family: "${font}", sans-serif;}`