An error occured
@@ -36,8 +36,8 @@
-
Or sign in with
+ class="flex items-center text-center w-full after:border-b after:border-background-200 after:flex-1 after:ml-2 before:border-b before:border-background-200 before:flex-1 before:mr-2">
+ Or sign in with
-
+
You are signing in to {{ hostname }}. If you did not intend to sign in
here, please close this page.
@@ -62,14 +62,14 @@
-
Invalid access
+ Invalid access
parameters
-
This page should be accessed
+
This page should be accessed
through a valid OAuth2 authorization request. Please use a Mastodon
API client to access this page.
-
Here are some recommended clients:
+
Here are some recommended clients:
-
+
Many other clients exist, but they have not been tested for
compatibility. Bug reports are nevertheless welcome.
-
+
Found a problem? Report it on the issue tracker.
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index 59b8bb9..9bde472 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -2,19 +2,19 @@
-
Here's your code
+ Here's your code
-
You have signed in successfully. Your code is
+
You have signed in successfully. Your code is
{{ code }}
+ class="overflow-x-hidden whitespace-normal break-all bg-background-500 ring-1 ring-white/10">
{{ code }}
-
Paste this code into the application you are signing in
+
Paste this code into the application you are signing in
to.
-
+
Found a problem? Report it on the issue tracker.
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index c31df09..ef7d9c6 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -4,17 +4,17 @@
-
Invalid access
+ Invalid access
parameters
-
This page should be accessed
+
This page should be accessed
through a valid OAuth2 authorization request. Please use a Mastodon
API client to access this page.
-
Here are some recommended clients:
+
Here are some recommended clients:
-
+
Many other clients exist, but they have not been tested for
compatibility. Bug reports are nevertheless welcome.
-
+
Found a problem? Report it on the issue tracker.
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index 432ea89..b240085 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -6,7 +6,7 @@
- Reset your password
+ Reset your password
An error occured
@@ -43,22 +43,22 @@
-
Password reset
+ Password reset
successful!
-
+
You can now login to your account with your new password.
-
Invalid access
+ Invalid access
parameters
-
This page should be accessed
+
This page should be accessed
through a valid password reset request. Please ask your admin to reset your password.
-
+
Found a problem? Report it on the issue tracker.
diff --git a/pages/register/index.vue b/pages/register/index.vue
index e3871e3..2ea4bdb 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -9,7 +9,7 @@
{{ errors.error }}
Account details
+ Account details
@@ -60,7 +60,7 @@
-
@@ -73,12 +73,12 @@
+ class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-background-700 rounded mt-3">
-
+
Passwords are stored securely and hashed. We do not store your password in plain text.
Administrators
cannot see your password.
@@ -90,10 +90,10 @@
-
Registrations are
+ Registrations are
disabled
-
Ask this instance's admin to enable them in
+
Ask this instance's admin to enable them in
config!
diff --git a/pages/register/success.vue b/pages/register/success.vue
index be3f703..c40dc83 100644
--- a/pages/register/success.vue
+++ b/pages/register/success.vue
@@ -1,10 +1,10 @@
-
Registration was a
+ Registration was a
success!
-
You can now login to your account in any
+
You can now login to your account in any
Mastodon
client
diff --git a/styles/theme.css b/styles/theme.css
index 4821973..cc5b876 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -1,25 +1,44 @@
+/*
+ * This file is used to define the theme colors for the application.
+ * Each color is defined in the HSL format, without the hsl() function.
+ * hsl(0deg 0% 0%) should be changed to 0deg 0% 0%.
+ *
+ * This format is due to limited support for Relative Colors in CSS.
+ */
:root {
- --theme-dark-50: #4a4a4a;
- --theme-dark-100: #3c3c3c;
- --theme-dark-200: #323232;
- --theme-dark-300: #2d2d2d;
- --theme-dark-400: #222222;
- --theme-dark-500: #1f1f1f;
- --theme-dark-600: #1c1c1e;
- --theme-dark-700: #1b1b1b;
- --theme-dark-800: #181818;
- --theme-dark-900: #0f0f0f;
- --theme-dark-950: #080808;
+ --theme-background-50: 0deg 0% 29%;
+ --theme-background-100: 0deg 0% 24%;
+ --theme-background-200: 0deg 0% 20%;
+ --theme-background-300: 0deg 0% 18%;
+ --theme-background-400: 0deg 0% 13%;
+ --theme-background-500: 0deg 0% 12%;
+ --theme-background-600: 240deg 3% 11%;
+ --theme-background-700: 0deg 0% 11%;
+ --theme-background-800: 0deg 0% 9%;
+ --theme-background-900: 0deg 0% 6%;
+ --theme-background-950: 0deg 0% 3%;
- --theme-primary-50: #fdf2f8;
- --theme-primary-100: #fce7f3;
- --theme-primary-200: #fbcfe8;
- --theme-primary-300: #f9a8d4;
- --theme-primary-400: #f472b6;
- --theme-primary-500: #ec4899;
- --theme-primary-600: #db2777;
- --theme-primary-700: #be185d;
- --theme-primary-800: #9d174d;
- --theme-primary-900: #831843;
- --theme-primary-950: #500724;
+ --theme-primary-50: 327deg 73% 97%;
+ --theme-primary-100: 326deg 78% 95%;
+ --theme-primary-200: 326deg 85% 90%;
+ --theme-primary-300: 327deg 87% 82%;
+ --theme-primary-400: 329deg 86% 70%;
+ --theme-primary-500: 330deg 81% 60%;
+ --theme-primary-600: 333deg 71% 51%;
+ --theme-primary-700: 335deg 78% 42%;
+ --theme-primary-800: 336deg 74% 35%;
+ --theme-primary-900: 336deg 69% 30%;
+ --theme-primary-950: 336deg 84% 17%;
+
+ --theme-text-50: 210 20% 98%;
+ --theme-text-100: 220 14% 96%;
+ --theme-text-200: 220 13% 91%;
+ --theme-text-300: 216 12% 84%;
+ --theme-text-400: 218 11% 65%;
+ --theme-text-500: 220 9% 46%;
+ --theme-text-600: 215 14% 34%;
+ --theme-text-700: 217 19% 27%;
+ --theme-text-800: 215 28% 17%;
+ --theme-text-900: 221 39% 11%;
+ --theme-text-950: 224 71% 4%;
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2417310..e613519 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,26 +2,20 @@ import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
import type { Config } from "tailwindcss";
-const themeVariables = (color: string) => ({
- 50: `var(--theme-${color}-50)`,
- 100: `var(--theme-${color}-100)`,
- 200: `var(--theme-${color}-200)`,
- 300: `var(--theme-${color}-300)`,
- 400: `var(--theme-${color}-400)`,
- 500: `var(--theme-${color}-500)`,
- 600: `var(--theme-${color}-600)`,
- 700: `var(--theme-${color}-700)`,
- 800: `var(--theme-${color}-800)`,
- 900: `var(--theme-${color}-900)`,
- 950: `var(--theme-${color}-950)`,
-});
+const themeVariables = (color: string) =>
+ Object.fromEntries(
+ [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].flatMap((n) => [
+ [n, `hsl(var(--theme-${color}-${n}) /
)`],
+ ]),
+ );
export default ({
theme: {
extend: {
colors: {
- dark: themeVariables("dark"),
+ background: themeVariables("background"),
primary: themeVariables("primary"),
+ text: themeVariables("text"),
},
animation: {
like: "like 1s ease-in-out",