Improved theming, added "modern" themes

This commit is contained in:
Mia Rose Winter 2024-01-25 16:39:03 +01:00
parent d1e58f7f2a
commit 4af471b48a
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
8 changed files with 101 additions and 9 deletions

View file

@ -1,7 +1,7 @@
@using Wave.Data
<ArticleLink Article="Article">
<article class="card card-compact bg-base-200 rounded-none h-full">
<article class="card card-compact bg-base-200 text-base-content rounded-none h-full">
<div class="card-body">
<h3 class="card-title line-clamp-2">@Article.Title</h3>
<small class="text-sm">By @Article.Author.Name</small>

View file

@ -64,6 +64,8 @@
<option selected="@(UserTheme is null)" value="">@Localizer["Theme_Default"]</option>
<option selected="@(UserTheme is "wave-light")" value="wave-light">@Localizer["Theme_WaveLight"]</option>
<option selected="@(UserTheme is "wave-dark")" value="wave-dark">@Localizer["Theme_WaveDark"]</option>
<option selected="@(UserTheme is "modern-light")" value="modern-light">@Localizer["Theme_ModernLight"]</option>
<option selected="@(UserTheme is "modern-dark")" value="modern-dark">@Localizer["Theme_ModernDark"]</option>
</select>
</div>
</footer>

View file

@ -22,10 +22,10 @@
@if (Articles.FirstOrDefault() is {} featured) {
<article class="mb-6">
<ArticleLink Article="featured">
<div class="hero bg-secondary text-secondary-content">
<div class="hero bg-secondary text-secondary-content border-l-8 border-current shadow rounded-box">
<div class="hero-content">
<div class="flex flex-col space-y-6 my-3">
<h2 class="text-2xl lg:text-4xl font-bold">
<h2 class="text-2xl lg:text-4xl">
@featured.Title<br />
</h2>
<p class="line-clamp-6">

View file

@ -113,4 +113,10 @@
<data name="Language_Label" xml:space="preserve">
<value>Sprache</value>
</data>
<data name="Theme_ModernDark" xml:space="preserve">
<value>Modern Dunkel</value>
</data>
<data name="Theme_ModernLight" xml:space="preserve">
<value>Moderl Hell</value>
</data>
</root>

View file

@ -113,4 +113,10 @@
<data name="Language_Label" xml:space="preserve">
<value>Language</value>
</data>
<data name="Theme_ModernLight" xml:space="preserve">
<value>Modern Light</value>
</data>
<data name="Theme_ModernDark" xml:space="preserve">
<value>Modern Dark</value>
</data>
</root>

View file

@ -16,8 +16,10 @@ module.exports = {
'5xl': '4.210rem'
},
fontFamily: {
heading: 'Nunito Sans',
body: ['Noto Sans Display', ...defaultTheme.fontFamily.sans]
heading: ["var(--wave-heading-font)", ...defaultTheme.fontFamily.sans],
body: ["var(--wave-body-font)", ...defaultTheme.fontFamily.sans],
modern: ["Tahoma", ...defaultTheme.fontFamily.sans],
"modern-heading": ["Verdana"]
},
fontWeight: {
normal: '400',
@ -30,8 +32,12 @@ module.exports = {
themes: [
{
"wave-light": {
"--wave-heading-font": "Nunito Sans",
"--wave-body-font": "Noto Sans Display",
"primary": "#F2E530",
"secondary": "#ffb3c8",
"secondary-content": "#0D0D0D",
"accent": "#6FD4F2",
"neutral": "#A69D21",
@ -44,16 +50,21 @@ module.exports = {
"success": "#2CDB00",
"warning": "#FFF000",
"error": "#B3020E",
"error-content": "#FFFFFF",
"--rounded-box": "0.5rem",
"--rounded-btn": "0.2rem",
"--rounded-badge": "0.2rem",
}
},
},
{
"wave-dark": {
"--wave-heading-font": "Nunito Sans",
"--wave-body-font": "Noto Sans Display",
"primary": "#fff133",
"secondary": "#DB9AAC",
"secondary-content": "#000000",
"accent": "#75dfff",
"neutral": "#A69D21",
@ -66,12 +77,79 @@ module.exports = {
"success": "#1C8A00",
"warning": "#E3D400",
"error": "#610107",
"error-content": "#FFFFFF",
"--rounded-box": "0.5rem",
"--rounded-btn": "0.2rem",
"--rounded-badge": "0.2rem",
}
}, "wireframe"
},
{
"modern-light": {
"--wave-heading-font": "Tahoma",
"--wave-body-font": "ui-sans-serif",
"primary": "#1e3a8a",
"primary-content": "#FFFFFF",
"secondary": "#fafafa",
"secondary-content": "#1e3a8a",
"accent": "#93c5fd",
"accent-content": "#000000",
"neutral": "#1e40af",
"neutral-content": "#FFFFFF",
"base-100": "#FFFFFF",
"base-200": "#f3f4f6",
"base-300": "#e5e7eb",
"base-content": "#000000",
"info": "#0ea5e9",
"info-content": "#FFFFFF",
"success": "#22c55e",
"success-content": "#FFFFFF",
"warning": "#f59e0b",
"warning-content": "#000000",
"error": "#b91c1c",
"error-content": "#FFFFFF",
"--rounded-box": "0.2rem",
"--rounded-btn": "0.2rem",
"--rounded-badge": "0.2rem"
}
},
{
"modern-dark": {
"--wave-heading-font": "Tahoma",
"--wave-body-font": "ui-sans-serif",
"primary": "#60a5fa",
"primary-content": "#000000",
"secondary": "#374151",
"secondary-content": "#60a5fa",
"accent": "#93c5fd",
"accent-content": "#000000",
"neutral": "#2563eb",
"neutral-content": "#FFFFFF",
"base-100": "#4b5563",
"base-200": "#1f2937",
"base-300": "#111827",
"base-content": "#FFFFFF",
"info": "#0ea5e9",
"info-content": "#FFFFFF",
"success": "#22c55e",
"success-content": "#FFFFFF",
"warning": "#f59e0b",
"warning-content": "#000000",
"error": "#b91c1c",
"error-content": "#FFFFFF",
"--rounded-box": "0.2rem",
"--rounded-btn": "0.2rem",
"--rounded-badge": "0.2rem"
}
}
],
darkTheme: "wave-dark"
}

View file

@ -18,7 +18,7 @@ @font-face {
@tailwind utilities;
@layer base {
html, body {
body {
@apply font-body;
}
h1, h2, h3, h4, h5, h6 {

File diff suppressed because one or more lines are too long