style: strip to grayscale wireframe
- Remap all non-gray colors (blue, green, red, purple, slate) to gray equivalents via Tailwind v4 @theme overrides in layout.css - Zero out all border-radius values (square everything) - Zero out all shadow values (no depth) - Disable all transitions and animations globally - Change theme-color meta tag from purple (#7B2D8E) to gray (#6b7280) - Clean up undefined 'underlined' class and typo bg-grey-200
This commit is contained in:
@@ -6,11 +6,8 @@
|
|||||||
<Window>
|
<Window>
|
||||||
{#if $page.status === 403}
|
{#if $page.status === 403}
|
||||||
<h1>Not Authorized</h1>
|
<h1>Not Authorized</h1>
|
||||||
<p>
|
<p>
|
||||||
You don't have permission to view this page. Click <a
|
You don't have permission to view this page. <a href="/">Go home</a>.
|
||||||
href="/"
|
</p>
|
||||||
class="underlined text-blue-600">here</a
|
|
||||||
> to return home.
|
|
||||||
</p>
|
|
||||||
{/if}
|
{/if}
|
||||||
</Window>
|
</Window>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<link rel="icon" href={favicon} />
|
<link rel="icon" href={favicon} />
|
||||||
<title>Rhema Wave Technologies</title>
|
<title>Rhema Wave Technologies</title>
|
||||||
<meta name="description" content="Rhema Wave Technologies User Portal — manage proclamations, audio content, and solfeggio frequencies." />
|
<meta name="description" content="Rhema Wave Technologies User Portal — manage proclamations, audio content, and solfeggio frequencies." />
|
||||||
<meta name="theme-color" content="#7B2D8E" />
|
<meta name="theme-color" content="#6b7280" />
|
||||||
<meta property="og:title" content="Rhema Wave Technologies" />
|
<meta property="og:title" content="Rhema Wave Technologies" />
|
||||||
<meta property="og:description" content="Manage proclamations, audio content, and solfeggio frequencies." />
|
<meta property="og:description" content="Manage proclamations, audio content, and solfeggio frequencies." />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
|
|||||||
@@ -1,3 +1,88 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
@plugin '@tailwindcss/forms';
|
@plugin '@tailwindcss/forms';
|
||||||
@plugin '@tailwindcss/typography';
|
@plugin '@tailwindcss/typography';
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Wireframe theme — remap all non-gray colors to grayscale */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
@theme {
|
||||||
|
/* blue → gray */
|
||||||
|
--color-blue-50: #f3f4f6;
|
||||||
|
--color-blue-100: #e5e7eb;
|
||||||
|
--color-blue-200: #d1d5db;
|
||||||
|
--color-blue-300: #9ca3af;
|
||||||
|
--color-blue-400: #6b7280;
|
||||||
|
--color-blue-500: #6b7280;
|
||||||
|
--color-blue-600: #4b5563;
|
||||||
|
--color-blue-700: #374151;
|
||||||
|
--color-blue-800: #1f2937;
|
||||||
|
/* green → gray */
|
||||||
|
--color-green-50: #f3f4f6;
|
||||||
|
--color-green-100: #e5e7eb;
|
||||||
|
--color-green-200: #d1d5db;
|
||||||
|
--color-green-300: #9ca3af;
|
||||||
|
--color-green-400: #6b7280;
|
||||||
|
--color-green-500: #6b7280;
|
||||||
|
--color-green-600: #4b5563;
|
||||||
|
--color-green-700: #374151;
|
||||||
|
--color-green-800: #1f2937;
|
||||||
|
/* red → gray */
|
||||||
|
--color-red-50: #f3f4f6;
|
||||||
|
--color-red-100: #e5e7eb;
|
||||||
|
--color-red-200: #d1d5db;
|
||||||
|
--color-red-300: #9ca3af;
|
||||||
|
--color-red-400: #6b7280;
|
||||||
|
--color-red-500: #6b7280;
|
||||||
|
--color-red-600: #4b5563;
|
||||||
|
--color-red-700: #374151;
|
||||||
|
--color-red-800: #1f2937;
|
||||||
|
/* purple → gray */
|
||||||
|
--color-purple-50: #f3f4f6;
|
||||||
|
--color-purple-100: #e5e7eb;
|
||||||
|
--color-purple-200: #d1d5db;
|
||||||
|
--color-purple-300: #9ca3af;
|
||||||
|
--color-purple-400: #6b7280;
|
||||||
|
--color-purple-500: #6b7280;
|
||||||
|
--color-purple-600: #4b5563;
|
||||||
|
--color-purple-700: #374151;
|
||||||
|
--color-purple-800: #1f2937;
|
||||||
|
--color-purple-900: #111827;
|
||||||
|
/* slate → gray */
|
||||||
|
--color-slate-50: #f8fafc;
|
||||||
|
--color-slate-100: #f1f5f9;
|
||||||
|
--color-slate-200: #e2e8f0;
|
||||||
|
--color-slate-300: #cbd5e1;
|
||||||
|
--color-slate-400: #94a3b8;
|
||||||
|
--color-slate-500: #64748b;
|
||||||
|
--color-slate-600: #475569;
|
||||||
|
--color-slate-700: #334155;
|
||||||
|
--color-slate-800: #1e293b;
|
||||||
|
--color-slate-900: #111827;
|
||||||
|
|
||||||
|
/* zero out decorative radii */
|
||||||
|
--radius: 0px;
|
||||||
|
--radius-sm: 0px;
|
||||||
|
--radius-md: 0px;
|
||||||
|
--radius-lg: 0px;
|
||||||
|
--radius-xl: 0px;
|
||||||
|
--radius-2xl: 0px;
|
||||||
|
--radius-3xl: 0px;
|
||||||
|
|
||||||
|
/* zero out shadows */
|
||||||
|
--shadow-sm: 0 0 #0000;
|
||||||
|
--shadow: 0 0 #0000;
|
||||||
|
--shadow-md: 0 0 #0000;
|
||||||
|
--shadow-lg: 0 0 #0000;
|
||||||
|
--shadow-xl: 0 0 #0000;
|
||||||
|
--shadow-2xl: 0 0 #0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Force-disable transitions, animations, and remaining decoration */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
transition: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -39,7 +39,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
<form
|
<form
|
||||||
onsubmit={handleSubmit}
|
onsubmit={handleSubmit}
|
||||||
class="bg-grey-200 my-6 flex flex-col items-center justify-center"
|
class="my-6 flex flex-col items-center justify-center"
|
||||||
>
|
>
|
||||||
<p>Login</p>
|
<p>Login</p>
|
||||||
<input type="email" placeholder="Email Address" bind:value={email} required class="my-2" />
|
<input type="email" placeholder="Email Address" bind:value={email} required class="my-2" />
|
||||||
|
|||||||
Reference in New Issue
Block a user