Replace Tailwind CSS with pure CSS for frontend

This commit is contained in:
2026-05-20 21:30:20 +02:00
parent 6e2c381d90
commit 12f18ba12c
4 changed files with 8 additions and 26 deletions
-18
View File
@@ -1,18 +0,0 @@
@import "tailwindcss";
#search-container {
text-align: center;
}
#search_term {
width: 60vw;
font-size: 2vh;
}
#clear {
font-size: 2vh;
}
#games-container{
font-size: 2vh;
}
+4 -4
View File
@@ -2,15 +2,15 @@ package web
templ Base() {
<!DOCTYPE html>
<html lang="en" class="h-screen">
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Music Search</title>
<link href="assets/css/output.css" rel="stylesheet"/>
<link href="assets/css/styles.css" rel="stylesheet"/>
<script src="assets/js/htmx.min.js"></script>
</head>
<body class="bg-gray-100">
<main class="mx-auto p-4">
<body>
<main>
{ children... }
</main>
</body>
+3 -3
View File
@@ -3,12 +3,12 @@ package web
templ HelloForm() {
@Base() {
<div id="search-container">
<input class="bg-gray-200 text-black p-2 border border-gray-400 rounded-lg" id="search_term" name="search_term" type="text" hx-post="/find" hx-trigger="keyup changed delay:0.25s" hx-target="#games-container"/>
<button type="button" class="bg-orange-500 hover:bg-orange-700 text-white py-2 px-4 rounded" id="clear" name="clear">Clear</button>
<input id="search_term" name="search_term" type="text" hx-post="/find" hx-trigger="keyup changed delay:0.25s" hx-target="#games-container"/>
<button type="button" id="clear" name="clear">Clear</button>
</div>
<div id="games-container"></div>
<script>
document.addEventListener('readystatechange', () => {
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') {
htmx.ajax('POST', '/find', '#games-container');
document.getElementById("search_term").focus();