Adding statics files (css for now), updating Task, and ready to test tailwind

Taskfile.yml

@@ -77,7 +77,6 @@ tasks:
         summary: Creates a production build of the application
         deps:
             - task: go:mod:tidy
-            - task: build:frontend
               vars:
                   BUILD_FLAGS: "{{.BUILD_FLAGS}}"
             - task: generate:icons
@@ -130,7 +129,6 @@ tasks:
         summary: Builds the application for Linux
         deps:
             - task: go:mod:tidy
-            - task: build:frontend
               vars:
                   BUILD_FLAGS: "{{.BUILD_FLAGS}}"
             - task: generate:icons
@@ -352,11 +350,6 @@ tasks:
             # Generates both .ico and .icns files
             - wails3 generate icons -input appicon.png
 
-    build:frontend:
-        summary: Build the frontend project
-        cmds:
-            - templ generate
-
     go:mod:tidy:
         summary: Runs `go mod tidy`
         internal: true
@@ -394,5 +387,4 @@ tasks:
     dev:reload:
         summary: Reloads the application
         cmds:
-            - templ generate
             - task: run

components/Hello.templ

-package components
-
-templ Hello() {
-	<div>
-		Hello, World!
-	</div>
-}

components/Nav.templ

@@ -4,8 +4,9 @@ import "astroproject/astro/services"
 
 templ CompetitionElement(competition *services.Competition) {
 	// Onclick, redirect to the competition page
-	<div class="competition text-blue-600 overline" hx-on:click={ Redirect(competition.CompetitionID) }>
-		{ competition.CompetitionName }
+	<div class="competition-el" hx-on:click={ Redirect(competition.CompetitionID) }>
+		<span>{ competition.CompetitionName }</span>
+		<button>X</button>
 	</div>
 }
 
@@ -23,13 +24,12 @@ templ Nav(session *services.Session) {
 			}
 		</div>
 		<div class="competition-modifier">
-			<input
+			<button
 				type="submit"
-				value="Add competition"
 				hx-post="/add-competition"
 				hx-target=".competition-container"
-				hx-swap="afterend"
-			/>
+				hx-swap="beforeend"
+			>Add competition</button>
 		</div>
 	</div>
 }

components/Page.templ

@@ -7,8 +7,10 @@ templ Head() {
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
 		<title>AstroProject</title>
-		<link rel="stylesheet" href="/style.css"/>
+		<link rel="stylesheet" href="/static/main.css"/>
+		<link rel="stylesheet" href="/static/nav.css"/>
 		<script src="https://unpkg.com/htmx.org"></script>
+		// <script src="https://cdn.tailwindcss.com"></script>
 	</head>
 }
 

routes/app.go

@@ -20,6 +20,9 @@ func NewChiRouter(session *services.Session) *chi.Mux {
 	r.Use(middleware.Logger)
 	r.Use(middleware.Recoverer)
 
+	// Serve static files.
+	r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
+
 	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
 		HXRender(w, r, pages.HomePage(), session)
 	})

static/main.css

+:root {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""), url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #003566;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+}
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+table {
+    font-size: small;
+    width: 70%;
+    border-collapse: separate;
+    border-spacing: 0 20px;
+}
+
+th,
+.el {
+    margin: 3px;
+    padding-left: 20px;
+    text-align: left;
+    border-left: dashed rgba(119, 141, 169, 30%) 3px;
+}
+
+tr {
+    border-radius: 20px;
+}
+
+.first,
+th:first-child {
+    border-left: none;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+}
+
+.last,
+th:last-child {
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+tr:nth-child(even) .el {
+    background-color: #e9ecef;
+}
+
+tr:nth-child(odd) .el {
+    background-color: #dee2e6;
+}
+
+tr:last-child {
+    background: none;
+}
+
+th {
+    background-color: #f8f9fa;
+    cursor: pointer;
+}

static/nav.css

+.nav-bar {
+    padding: 25px 10px 25px;
+    display: grid;
+    grid-template-columns: 70% 30%;
+    gap: 10px;
+    border-bottom: solid #003566 3px;
+}
+
+.competition-container {
+    display: grid;
+    overflow-x: scroll;
+    grid-auto-flow: column;
+    gap: 10px;
+}
+
+.competition-modifier {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.competition-el {
+    min-width: 20vw;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}