Add tailwind

Author: GearsDatapacks

.gitignore

@@ -2,4 +2,5 @@
 *.ez
 /build
 /priv
+/node_modules
 erl_crash.dump

build.sh

@@ -0,0 +1,2 @@
+gleam run -m build
+npx tailwindcss -i ./static/main.css -o ./priv/style.css

package.json

@@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"tailwindcss": "^3.4.16"
+	}
+}

pnpm-lock.yaml

@@ -31,6 +31,11 @@ pub fn head(page: String) -> Element(a) {
   ])
 }
 
-pub fn page(name: String, body: List(Element(a))) -> Element(a) {
-  html.html([attribute("lang", "en")], [head(name), html.body([], body)])
+pub fn page(name: String, content: List(Element(a))) -> Element(a) {
+  html.html([attribute("lang", "en")], [
+    head(name),
+    html.body([attribute.class("min-h-screen bg-slate-800 text-white")], [
+      html.main([attribute.class("py-24")], content),
+    ]),
+  ])
 }

src/website/components.gleam

@@ -4,31 +4,56 @@ import website/components
 
 pub fn view() {
   components.page("Home", [
-    html.main([], [
-      html.div([], [
-        html.h1([], [html.text("Hello and welcome to my website!")]),
-      ]),
-      html.div([], [
-        html.p([], [
+    html.div([attribute.class("mx-auto max-w-3xl px-4 sm:px-6 lg:px-8")], [
+      html.h1(
+        [attribute.class("text-3xl font-bold leading-tight text-center")],
+        [html.text("Hello and welcome to my website!")],
+      ),
+    ]),
+    html.div(
+      [attribute.class("mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8 leading-8")],
+      [
+        html.p([attribute.class("text-xl")], [
           html.text("I am Gears, a software developer and Minecraft YouTuber."),
           html.br([]),
           html.text("More about me in the "),
-          html.a([attribute.href("/about/")], [html.text("about")]),
+          html.a(
+            [attribute.href("/about/"), attribute.class("underline font-bold")],
+            [html.text("about")],
+          ),
           html.text(" section."),
           html.br([]),
           html.text("You can check out my finished and ongoing projects in "),
-          html.a([attribute.href("/projects/")], [html.text("projects")]),
+          html.a(
+            [
+              attribute.href("/projects/"),
+              attribute.class("underline font-bold"),
+            ],
+            [html.text("projects")],
+          ),
           html.text("."),
           html.br([]),
           html.text("For information on Minecraft datapack commissions, see "),
-          html.a([attribute.href("/commissions/")], [html.text("commissions")]),
+          html.a(
+            [
+              attribute.href("/commissions/"),
+              attribute.class("underline font-bold"),
+            ],
+            [html.text("commissions")],
+          ),
           html.text("."),
           html.br([]),
           html.text("If you have more questions, you can "),
-          html.a([attribute.href("/contact/")], [html.text("contact me")]),
+          html.a(
+            [
+              attribute.href("/contact/"),
+              attribute.class("underline font-bold"),
+            ],
+            [html.text("contact me")],
+          ),
           html.text("."),
         ]),
-      ]),
-    ]),
+      ],
+    ),
   ])
 }

src/website/page/index.gleam

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

static/main.css

@@ -0,0 +1,49 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+  content:["./src/**/*.gleam"],
+  theme: {
+    screens: {
+      xs: '375px',
+      mob: '450px',
+      sm: '640px',
+      md: '768px',
+      tab: '860px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      hd: '1920px',
+    },
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        celandine: ['Celandine', ...defaultTheme.fontFamily.sans],
+      },
+      width: {
+        icon: '48px',
+      },
+      height: {
+        icon: '48px',
+      },
+      maxWidth: {
+        icon: '48px',
+        icon_padding: '72px',
+      },
+      animation: {
+        write: 'write 3s linear forwards',
+      },
+      keyframes: {
+        write: {
+          '90%': { 'stroke-dashoffset': '0', fill: 'rgba(255,255,255,0)' },
+          '100%': { fill: 'rgba(255,255,255,255)' },
+        },
+      },
+      scale: {
+        105: '105%',
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+};
+