From: Adam Dullage <redacted>
Date: Tue, 23 Apr 2024 20:36:10 +0000 (+0100)
Subject: Buttons & Breakpoints
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=2c74c2803fc797f73607ea716c8e33b563ae8829;p=flatnotes.git

Buttons & Breakpoints
---

diff --git a/client/App.vue b/client/App.vue
index b5a92c9..8eb3d25 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container mx-auto flex h-screen flex-col px-2 py-4">
     <NavBar />
     <RouterView />
   </div>
diff --git a/client/components/Button.vue b/client/components/Button.vue
new file mode 100644
index 0000000..782f795
--- /dev/null
+++ b/client/components/Button.vue
@@ -0,0 +1,11 @@
+<template>
+  <button class="text-theme-text-muted">
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  label: String,
+});
+</script>
diff --git a/client/index.html b/client/index.html
index 3f315fe..49c8804 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index d9b192d..ff3e08b 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,9 +1,17 @@
 <template>
-  <nav>
+  <nav class="flex justify-between">
     <Logo></Logo>
+    <div>
+      <Button label="Toggle Theme" @click="toggleTheme"></Button>
+    </div>
   </nav>
 </template>
 
 <script setup>
+import Button from "/components/Button.vue";
 import Logo from "/components/Logo.vue";
+
+function toggleTheme() {
+  document.body.classList.toggle("dark-theme");
+}
 </script>
diff --git a/client/views/HomeView.vue b/client/views/HomeView.vue
index a9cd06f..a6694ce 100644
--- a/client/views/HomeView.vue
+++ b/client/views/HomeView.vue
@@ -1 +1,6 @@
-<template><p>Home</p></template>
+<template>
+  <div class="flex h-full flex-col items-center justify-center">
+    <p>Home</p>
+    <p>Page</p>
+  </div>
+</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9a715f4..85594e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,16 +3,25 @@
 module.exports = {
   content: ["client/**/*.{html,js,vue}"],
   theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+    },
     extend: {
       colors: {
         "theme-brand": "rgb(var(--theme-brand) / <alpha-value>)",
         "theme-background": "rgb(var(--theme-background) / <alpha-value>)",
-        "theme-background-elevated": "rgb(var(--theme-background-elevated) / <alpha-value>)",
-        "theme-background-tint": "rgb(var(--theme-background-tint) / <alpha-value>)",
-        "theme-background-highlight": "rgb(var(--theme-background-highlight) / <alpha-value>)",
+        "theme-background-elevated":
+          "rgb(var(--theme-background-elevated) / <alpha-value>)",
+        "theme-background-tint":
+          "rgb(var(--theme-background-tint) / <alpha-value>)",
+        "theme-background-highlight":
+          "rgb(var(--theme-background-highlight) / <alpha-value>)",
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",
-        "theme-text-very-muted": "rgb(var(--theme-text-very-muted) / <alpha-value>)",
+        "theme-text-very-muted":
+          "rgb(var(--theme-text-very-muted) / <alpha-value>)",
         "theme-shadow": "rgb(var(--theme-shadow) / <alpha-value>)",
         "theme-border": "rgb(var(--theme-border) / <alpha-value>)",
       },
