diff --git a/.gitignore b/.gitignore
index 549e00a..4abf3bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,7 @@ build/
### VS Code ###
.vscode/
+
+### css compiled by tailwind ###
+src/main/resources/static/main.css
+
diff --git a/src/main/java/dev/araozu/jerguero/sample/SampleController.java b/src/main/java/dev/araozu/jerguero/sample/SampleController.java
new file mode 100644
index 0000000..12bef48
--- /dev/null
+++ b/src/main/java/dev/araozu/jerguero/sample/SampleController.java
@@ -0,0 +1,31 @@
+package dev.araozu.jerguero.sample;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+import java.util.Calendar;
+
+@Controller
+public class SampleController {
+
+ @GetMapping(
+ value = "/sampuru",
+ produces = "text/html"
+ )
+ public String sampuru(Model model) {
+ // number of milliseconds since unix epoch
+ long millis = Calendar.getInstance().getTimeInMillis();
+ String additionalColor = "";
+ if (Math.random() > 0.5) {
+ additionalColor = "#B71C1C";
+ } else {
+ additionalColor = "#0D47A1";
+ }
+
+ model.addAttribute("millis", millis);
+ model.addAttribute("additionalColor", additionalColor);
+ return "partial-response";
+ }
+
+}
diff --git a/src/main/resources/frontend/main.css b/src/main/resources/frontend/main.css
index b5c61c9..48dc013 100644
--- a/src/main/resources/frontend/main.css
+++ b/src/main/resources/frontend/main.css
@@ -1,3 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+/* Base variables */
+:root {
+
+}
+
+/* Dark theme by default */
+:root {
+ --c-bg: #202020;
+ --c-on-bg: white;
+}
+
+
+
+html {
+ background-color: var(--c-bg);
+ color: var(--c-on-bg);
+}
diff --git a/src/main/resources/frontend/tailwind.config.js b/src/main/resources/frontend/tailwind.config.js
index a7a8246..9a91173 100644
--- a/src/main/resources/frontend/tailwind.config.js
+++ b/src/main/resources/frontend/tailwind.config.js
@@ -1,8 +1,19 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["../templates/**/*.{html,js}"], // it will be explained later
+ content: [
+ "../templates/**/*.{html,js}",
+ "../static/**/*.{html,js}",
+ ],
theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ "mono": ["Iosevka", "monospace"],
+ }
+ },
+ colors: {
+ "c-bg": "var(--c-bg)",
+ "c-on-bg": "var(--c-on-bg)",
+ }
},
plugins: [],
}
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
new file mode 100644
index 0000000..1872c7b
--- /dev/null
+++ b/src/main/resources/static/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Jerguero
+
+
+
+
+
+
+
+ Jerguero D:
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index 45d2cea..a6e0aa2 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -16,7 +16,7 @@
/* 2 */
border-style: solid;
/* 2 */
- border-color: #e5e7eb;
+ border-color: currentColor;
/* 2 */
}
@@ -129,7 +129,7 @@ code,
kbd,
samp,
pre {
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-family: Iosevka, monospace;
/* 1 */
font-size: 1em;
/* 2 */
@@ -543,10 +543,6 @@ video {
margin-bottom: 0.5rem;
}
-.rounded {
- border-radius: 0.25rem;
-}
-
.rounded-md {
border-radius: 0.375rem;
}
@@ -555,49 +551,58 @@ video {
border-radius: 0.75rem;
}
-.rounded-2xl {
- border-radius: 1rem;
-}
-
-.rounded-full {
- border-radius: 9999px;
-}
-
-.bg-teal-900 {
- --tw-bg-opacity: 1;
- background-color: rgb(19 78 74 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600 {
- --tw-bg-opacity: 1;
- background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
-.bg-white {
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.p-4 {
- padding: 1rem;
-}
-
-.p-1 {
- padding: 0.25rem;
+.bg-c-on-bg {
+ background-color: var(--c-on-bg);
}
.p-2 {
padding: 0.5rem;
}
-.text-white {
+.p-4 {
+ padding: 1rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.font-mono {
+ font-family: Iosevka, monospace;
+}
+
+.text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.text-\[white\] {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-.text-teal-900 {
- --tw-text-opacity: 1;
- color: rgb(19 78 74 / var(--tw-text-opacity));
+.text-c-bg {
+ color: var(--c-bg);
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
@@ -606,8 +611,19 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
-.shadow {
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+/* Base variables */
+
+:root {
+}
+
+/* Dark theme by default */
+
+:root {
+ --c-bg: #202020;
+ --c-on-bg: white;
+}
+
+html {
+ background-color: var(--c-bg);
+ color: var(--c-on-bg);
}
diff --git a/src/main/resources/templates/greeting.html b/src/main/resources/templates/greeting.html
index e3d6629..a1505af 100644
--- a/src/main/resources/templates/greeting.html
+++ b/src/main/resources/templates/greeting.html
@@ -12,10 +12,14 @@
-
+
still a piece of garbage
+
+
+
+