forked from Backwards/backwards.dev
Added more content to main page and Cleaned up themes
This commit is contained in:
BackwardsUser
parent
d9530a637a
commit
45d47e6151
24
package-lock.json
generated
24
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.7.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -1421,6 +1422,19 @@
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/forms": {
|
||||
"version": "0.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
|
||||
"integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
@ -3493,6 +3507,16 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-svg-data-uri": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"mini-svg-data-uri": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.4",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.7.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
|
||||
21
src/app.css
21
src/app.css
@ -1,3 +1,24 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunita';
|
||||
src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('$lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf');
|
||||
}
|
||||
|
||||
:root {
|
||||
--theme-font-family-base: 'Roboto', serif;
|
||||
--theme-font-family-heading: 'Roboto', serif;
|
||||
}
|
||||
|
||||
:root body[data-theme='modern'],
|
||||
:root body[data-theme='gold-nouveau'] {
|
||||
--theme-font-family-base: 'Nunita', serif;
|
||||
--theme-font-family-heading: 'Nunita', serif;
|
||||
}
|
||||
19
src/app.html
19
src/app.html
@ -4,9 +4,17 @@
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" data-theme="crimson">
|
||||
<body data-sveltekit-preload-data="hover" data-theme="gold-nouveau">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -15,14 +23,17 @@
|
||||
html,
|
||||
body {
|
||||
@apply h-full;
|
||||
}
|
||||
.hero {
|
||||
background-image: radial-gradient(
|
||||
at 0% 0%,
|
||||
rgba(var(--color-secondary-500) / 0.33) 0px,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
|
||||
radial-gradient(
|
||||
at 98% 1%,
|
||||
rgba(var(--color-error-500) / 0.33) 0px,
|
||||
transparent 50%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
BIN
src/lib/assets/Image_not_available.png
Normal file
BIN
src/lib/assets/Image_not_available.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/lib/assets/fonts/Nunito-VariableFont_wght.ttf
Normal file
BIN
src/lib/assets/fonts/Nunito-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
src/lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
Normal file
BIN
src/lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
Normal file
Binary file not shown.
37
src/lib/components/Contact.svelte
Normal file
37
src/lib/components/Contact.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import MaterialSymbolsPerson from '~icons/material-symbols/person';
|
||||
import MaterialSymbolsMail from '~icons/material-symbols/mail';
|
||||
</script>
|
||||
|
||||
<div class="w-screen h-screen flex justify-center items-center">
|
||||
<form action="?/contact" class="bg-surface-900 w-1/2 h-1/2 p-8 rounded-md">
|
||||
<h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
|
||||
<hr class="opacity-25" />
|
||||
<p class="pt-4">Fullname</p>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||
<div class="input-group-shim"><MaterialSymbolsPerson /></div>
|
||||
<input type="text" placeholder="John Doe" required />
|
||||
</div>
|
||||
<p>Email</p>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||
<div class="input-group-shim"><MaterialSymbolsMail /></div>
|
||||
<input type="email" placeholder="john@example.com" required />
|
||||
</div>
|
||||
<p>Subject</p>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
|
||||
<div class="input-group-shim"><MaterialSymbolsMail /></div>
|
||||
<select class="select" required>
|
||||
<option value="other" disabled selected hidden>Choose Subject</option>
|
||||
<option value="request">Work Request</option>
|
||||
<option value="upload">Upload Request</option>
|
||||
<option value="support">Support Request</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<p>Your Message</p>
|
||||
<textarea class="textarea mb-4" rows="4" placeholder="What can we help you with?" required ></textarea>
|
||||
<div class="w-full text-end">
|
||||
<button type="submit" class="btn variant-filled-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
104
src/lib/components/Downloads.svelte
Normal file
104
src/lib/components/Downloads.svelte
Normal file
@ -0,0 +1,104 @@
|
||||
<script>
|
||||
import { Avatar } from "@skeletonlabs/skeleton";
|
||||
import imageNotAvailable from '$lib/assets/Image_not_available.png';
|
||||
|
||||
// populate this with real data, using database?
|
||||
let Downloads = [
|
||||
{
|
||||
name: "DOT Bot Manager",
|
||||
description: "A Modular Discord bot to help you better manage your discord server the way *you* want.",
|
||||
author: {
|
||||
username: "BackwardsUser",
|
||||
icon: "https://cdn.discordapp.com/avatars/471172695862542337/306522a721ee716ba6348babfd9bbdff.webp?size=32"
|
||||
},
|
||||
date: "2025-01-13",
|
||||
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||
},
|
||||
{
|
||||
name: "Mystic Helper Bot",
|
||||
description: "A bot that helps organize events, polls, and reminders with a magical twist!",
|
||||
author: {
|
||||
username: "MysticMaster",
|
||||
icon: "https://cdn.discordapp.com/avatars/123456789012345678/abc123def4567890abc123def4567890.webp?size=32"
|
||||
},
|
||||
date: "2025-01-12",
|
||||
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||
},
|
||||
{
|
||||
name: "Game Stats Tracker",
|
||||
description: "Track your game stats and leaderboard rankings across various multiplayer games.",
|
||||
author: {
|
||||
username: "GameTrackerPro",
|
||||
icon: "https://cdn.discordapp.com/avatars/987654321098765432/def789abc123456789abc1234567890.webp?size=32"
|
||||
},
|
||||
date: "2025-01-11",
|
||||
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||
},
|
||||
{
|
||||
name: "Quick Polls Bot",
|
||||
description: "Create and manage quick polls for your community to vote on different topics.",
|
||||
author: {
|
||||
username: "PollCreator",
|
||||
icon: "https://cdn.discordapp.com/avatars/112233445566778899/ghi345jkl9876543210ghi345jkl987654.webp?size=32"
|
||||
},
|
||||
date: "2025-01-10",
|
||||
thumbnail: "https://api.backwardsdevelopment.ca/images/treeline.jpg"
|
||||
},
|
||||
{
|
||||
name: "Music Party Bot",
|
||||
description: "Create your own music playlist and enjoy it with your friends in Discord voice channels.",
|
||||
author: {
|
||||
username: "DJPartyBot",
|
||||
icon: "https://cdn.discordapp.com/avatars/223344556677889900/jkl123mno4567890jkl123mno4567890.webp?size=32"
|
||||
},
|
||||
date: "2025-01-09",
|
||||
thumbnail: "https://example.com/images/music_party.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
function imageAlt(event) {
|
||||
event.target.src = imageNotAvailable;
|
||||
event.target.classList.add("object-contain"); // Add object-contain for the alt image
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-screen min-h-screen">
|
||||
<h2 class="h2 text-center w-screen pt-4 font-nunito">Downloads</h2>
|
||||
<div class="px-32 py-16 grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{#each Downloads as download}
|
||||
<a
|
||||
class="card variant-glass-surface card-hover overflow-hidden"
|
||||
href="/elements/cards"
|
||||
>
|
||||
<header>
|
||||
<!-- Main image (rectangle) -->
|
||||
<img
|
||||
src={download.thumbnail}
|
||||
class="bg-black/50 w-full aspect-[21/9] object-cover flex justify-center items-center"
|
||||
alt="Post"
|
||||
on:error={imageAlt}
|
||||
/>
|
||||
</header>
|
||||
<div class="p-4 space-y-4">
|
||||
<h3 class="h3" data-toc-ignore>{download.name}</h3>
|
||||
<article>
|
||||
<p>
|
||||
{download.description}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
||||
<Avatar
|
||||
src={download.author.icon}
|
||||
width="w-8"
|
||||
/>
|
||||
<div class="flex-auto flex justify-between items-center">
|
||||
<h6 class="font-bold" data-toc-ignore>By {download.author.username}</h6>
|
||||
<small>On {download.date}</small>
|
||||
</div>
|
||||
</footer>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@
|
||||
</style>
|
||||
|
||||
<!-- Add scroll-snap-align to your sections -->
|
||||
<header class="align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
||||
<header class="fancy-background align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
||||
<div class=""></div>
|
||||
<Hero></Hero>
|
||||
<div
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
<script>
|
||||
import BackwardsLogo from "$lib/assets/Backwards.png";
|
||||
</script>
|
||||
|
||||
<div class="text-center h-max self-center" id="hero">
|
||||
<h1 class="text-6xl">Backwards Development</h1>
|
||||
<h4 class="text-2xl">A Software Development and Distribution Company</h4>
|
||||
<h1 class="h1">Backwards Development</h1>
|
||||
<h4 class="h4">A Software Development and Distribution Company</h4>
|
||||
</div>
|
||||
26
src/lib/components/Media.svelte
Normal file
26
src/lib/components/Media.svelte
Normal file
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded";
|
||||
import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline';
|
||||
</script>
|
||||
|
||||
<div class="w-screen h-screen flex flex-col justify-center items-center">
|
||||
<h2 class="h2 font-bold">Backwards Media</h2>
|
||||
<h3 class="h3">Upload and Share Media with your Friends</h3>
|
||||
<div class="flex flex-row controls pt-4 gap-12">
|
||||
<a href="https://media.backwards.dev/" class="btn variant-filled-primary cool-hover">
|
||||
<span>Try it out</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span>
|
||||
</a>
|
||||
<a href="/about#media" class="btn variant-ghost-surface cool-hover">
|
||||
<span>Learn more</span>
|
||||
<span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsLabProfileOutline /></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* dumb ass name :(, cool ass animation :) */
|
||||
.cool-hover:hover>.effect {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +0,0 @@
|
||||
<script>
|
||||
import Icon from "$lib/assets/Backwards.png";
|
||||
import { Avatar } from "@skeletonlabs/skeleton";
|
||||
</script>
|
||||
|
||||
<nav class="flex flex-row bg-surface-700 px-2 py-3">
|
||||
<Avatar src={Icon} background="transparent" rounded="rounded-full"></Avatar>
|
||||
<h1 class="text-3xl my-auto pl-4 source-code-pro">Backwards.dev</h1>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
|
||||
.source-code-pro {
|
||||
font-family: "Source Code Pro", serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
18
src/lib/components/TechStack.svelte
Normal file
18
src/lib/components/TechStack.svelte
Normal file
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import Techs from '$lib/data/techstack.json';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<div class="w-screen h-screen flex flex-col justify-center items-center">
|
||||
<h2 class="h2 font-bold pb-0">Our Preferred Tech Stack</h2>
|
||||
<span class="text-sm pt-0 pb-4 text-surface-200">Subject to change</span>
|
||||
<div class="w-1/2 flex flex-wrap gap-4 justify-center">
|
||||
{#each Techs as tech}
|
||||
<a href={tech.url} class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 hover:bg-surface-700 rounded-lg">
|
||||
<Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
|
||||
<span class="text-xl">{tech.name}</span>
|
||||
<div class="spacer"></div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
42
src/lib/data/techstack.json
Normal file
42
src/lib/data/techstack.json
Normal file
@ -0,0 +1,42 @@
|
||||
[
|
||||
{
|
||||
"name": "SvelteKit",
|
||||
"logo": "https://raw.githubusercontent.com/sveltejs/branding/2af7bc72f1bf5152dab89bee1ee2093b1be0824d/svelte-logo.svg",
|
||||
"url": "https://svelte.dev/"
|
||||
},
|
||||
{
|
||||
"name": "Tailwindcss",
|
||||
"logo": "https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg",
|
||||
"url": "https://tailwindcss.com/"
|
||||
},
|
||||
{
|
||||
"name": "Skeleton.dev",
|
||||
"logo": "https://api.backwards.dev/images/skeleton.dev.svg",
|
||||
"url": "https://www.skeleton.dev/"
|
||||
},
|
||||
{
|
||||
"name": "Express.js",
|
||||
"logo": "https://api.backwards.dev/images/expressjs.svg",
|
||||
"url": "https://expressjs.com/"
|
||||
},
|
||||
{
|
||||
"name": "Typescript",
|
||||
"logo": "https://api.backwards.dev/images/typescript.svg",
|
||||
"url": "https://www.typescriptlang.org/"
|
||||
},
|
||||
{
|
||||
"name": "MariaDB",
|
||||
"logo": "https://api.backwards.dev/images/mariadb.png",
|
||||
"url": "https://mariadb.org/"
|
||||
},
|
||||
{
|
||||
"name": "Cloudflare",
|
||||
"logo": "https://api.backwards.dev/images/cloudflare.svg",
|
||||
"url": "https://www.cloudflare.com/en-ca/"
|
||||
},
|
||||
{
|
||||
"name": "Discord",
|
||||
"logo": "https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/653714c17467993e7b389c83_636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg",
|
||||
"url": "https://discord.com/"
|
||||
}
|
||||
]
|
||||
@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
import { autoModeWatcher } from '@skeletonlabs/skeleton';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>{@html '<script>(' + autoModeWatcher.toString() + ')();</script>'}</svelte:head>
|
||||
{@render children()}
|
||||
@ -1,10 +1,92 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Header from "$lib/components/Header.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import { LightSwitch } from "@skeletonlabs/skeleton";
|
||||
import Downloads from "$lib/components/Downloads.svelte";
|
||||
import { fly } from "svelte/transition";
|
||||
import Media from "$lib/components/Media.svelte";
|
||||
import Contact from "$lib/components/Contact.svelte";
|
||||
import TechStack from "$lib/components/TechStack.svelte";
|
||||
|
||||
/* IMPORTANT */
|
||||
// Anything added into the page directly will likely break the page's scrolling behaviour
|
||||
// To properly add something to the main page, make it into a component and add it to the array.
|
||||
// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
|
||||
|
||||
let slides = [
|
||||
Header,
|
||||
Downloads,
|
||||
Media,
|
||||
TechStack,
|
||||
Contact
|
||||
];
|
||||
|
||||
|
||||
let currentSection = 0;
|
||||
|
||||
// Update the current section based on scroll position
|
||||
const handleScroll = () => {
|
||||
const sections = document.querySelectorAll(".section");
|
||||
const scrollTop = document.querySelector(".scroll-container").scrollTop;
|
||||
sections.forEach((section, index) => {
|
||||
if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
|
||||
currentSection = index;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<Navbar></Navbar>
|
||||
<Header></Header>
|
||||
<LightSwitch />
|
||||
<div id="main" class="scroll-container" on:scroll={handleScroll}>
|
||||
{#each slides as content}
|
||||
<section class="section">
|
||||
<svelte:component this={content} />
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Tracker -->
|
||||
{#if currentSection > 0}
|
||||
<div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
|
||||
{#each slides.slice(1) as _, i}
|
||||
<div class="tracker-dot {i + 1 === currentSection ? 'active' : ''}"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.scroll-container {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.section {
|
||||
scroll-snap-align: start;
|
||||
min-height: 100vh; /* Full viewport height */
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Tracker Styles */
|
||||
.tracker {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tracker-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@apply bg-surface-600;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.tracker-dot.active {
|
||||
@apply bg-primary-600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { skeleton } from '@skeletonlabs/tw-plugin';
|
||||
import forms from '@tailwindcss/forms';
|
||||
import { join } from 'node:path';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
darkMode: 'media',
|
||||
content: [
|
||||
'./src/**/*.{html,js,svelte}',
|
||||
join(require.resolve(
|
||||
@ -15,8 +16,9 @@ export default {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
forms,
|
||||
skeleton({
|
||||
themes: { preset: [ "crimson" ]}
|
||||
themes: { preset: [ "skeleton", "wintry", "modern", "rocket", "seafoam", "vintage", "sahara", "hamlindigo", "gold-nouveau", "crimson" ]}
|
||||
})
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user