git.99rst.org / flatnotes.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: 7d9096d)
Buttons & Breakpoints
authorAdam Dullage <redacted>
Tue, 23 Apr 2024 20:36:10 +0000 (21:36 +0100)
committerAdam Dullage <redacted>
Tue, 23 Apr 2024 20:36:10 +0000 (21:36 +0100)
client/App.vue patch | blob | history
client/components/Button.vue [new file with mode: 0644] patch | blob
client/index.html patch | blob | history
client/partials/NavBar.vue patch | blob | history
client/views/HomeView.vue patch | blob | history
tailwind.config.js patch | blob | history

diff --git a/client/App.vue b/client/App.vue
index b5a92c9a359fb1b961868e62e0840da350c44f0c..8eb3d254cb716e033201907509df3691af48d2eb 100644 (file)
--- 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 (file)
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 3f315feeb9a0ab2ddc3a2f92721ed18c36058428..49c8804d1719422e3165566f2eb79f2b09beda5e 100644 (file)
--- 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 d9b192d052a44f908343b1730dc3b61938267d8d..ff3e08b0b6adbda8867487e1d91cd888b6cb65d2 100644 (file)
--- 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 a9cd06f001278833519483dde6ef84344f3251a2..a6694ced7cdd64d9b4c537fd126984f565288b89 100644 (file)
--- 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 9a715f4d705c3365788728e650c299ad51aad7b8..85594e2e7c5f840e6d13313bb4b08d4c67f6e4b0 100644 (file)
--- 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>)",
       },
git clone https://git.99rst.org/PROJECT