DutchEllie
/
svelte-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Make darkmode
continuous-integration/drone/push Build was killed Details

This commit is contained in:
DutchEllie 2022-07-05 16:00:52 +02:00
parent 45e9b73f1f
commit e0e9d33dec
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
9 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/about/content.svelte
View File

@ -19,7 +19,7 @@
(or well, they can with WebAssembly) and that's why I had to make this website in JavaScript. I had
done this in Go, but it was just too clunky. The results of that can be seen in the Gitea repository
<a
class="underline text-[#002896] hover:text-blue-500"
class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500"
href="https://dutchellie.nl/DutchEllie/proper-website-2">DutchEllie/proper-website-2</a
>.
<br>

2
src/components/about/likes.svelte
View File

@ -1,5 +1,5 @@
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 rounded-xl p-3 gap-y-5"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 bg-red-50 dark:bg-slate-800 rounded-xl p-3 gap-y-5"
>
<ul class="list-disc ml-4">
<p class="font-bold">Music</p>

4
src/components/about/sidebar.svelte
View File

@ -1,8 +1,8 @@
<script>
</script>
<div class="w-full h-full bg-red-100 rounded-xl">
<div class="p-3 rounded-t-xl bg-indigo-200">
<div class="w-full h-full bg-red-100 dark:bg-slate-800 rounded-xl dark:text-slate-200">
<div class="p-3 rounded-t-xl bg-indigo-200 dark:bg-slate-700">
<h1 class="font-semibold">Profile:</h1>
</div>
<div class="p-2">

6
src/components/homepage/content.svelte
View File

@ -8,7 +8,7 @@
<br class="hidden lg:block" />
</!-->
<p class="font-roboto_slab text-center lg:text-2xl text-md lg:mt-5">The modern web meets 2000</p>
<hr class="border-black" />
<hr class="border-black dark:border-[#ffc0f5]" />
<br />
<div class="md:text-center lg:px-40">
<p class="">
@ -36,10 +36,10 @@
<div class="col-span-1">
<h2 class="font-semibold text-left ml-10 mb-2">Misc</h2>
<ul class="ml-10 list-disc marker:text-blue-400">
<li class="underline text-[#002896] hover:text-blue-500">
<li class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500">
<a href="https://dutchellie.nl/DutchEllie/svelte-testing">Gitea Repo</a>
</li>
<li class="underline text-[#002896] hover:text-blue-500">
<li class="underline text-[#002896] dark:text-blue-200 dark:hover:text-blue-50 hover:text-blue-500">
<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
>Drone CI/CD
<img

2
src/components/misc/hamburger.svelte
View File

@ -10,7 +10,7 @@
}}
class="w-full h-full min-w-max"
>
<img src="/assets/images/icons8-menu.svg" alt="Hamburger menu" />
<img src="/assets/images/icons8-menu.svg" class="dark:invert" alt="Hamburger menu" />
</button>
<Menu bind:open />

2
src/components/misc/menu.svelte
View File

@ -11,7 +11,7 @@
on:click={() => {
open = !open;
}}
class="z-10 bg-white absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
>
<Button link="/" text="Home" />
<Button link="/about" text="About" />

2
src/components/misc/navbutton.svelte
View File

@ -5,7 +5,7 @@
</script>
<a href="{link}" class="">
<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
<button class="{$page.url.pathname == link ? "active-now" : ""} md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
{text}
</button>
</a>

8
src/routes/__layout.svelte
View File

@ -38,7 +38,7 @@
<Musicplayer />
</div>
<div
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-full text-murasaki overflow-auto min-h-screen relative "
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] dark:from-[#3c085a] to-[#FFAFCC] dark:to-[#0f1838] w-full text-murasaki dark:text-slate-300 overflow-auto min-h-screen relative "
>
<!-- Page content -->
<div class="" style="padding-bottom: {footerHeight + 10}px;">
@ -52,9 +52,9 @@
<slot />
</div>
<!-- Footer -->
<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
<div bind:clientHeight={footerHeight} class="bg-slate-100 dark:bg-purple-900 dark:text-pink-50 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
<div class="h-full">
<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
<button on:click={onMusicToggle} class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min w-20 mt-1">
{#if musicPaused}
<span class="font-mono">▶</span>
Play
@ -64,7 +64,7 @@
{/if}
</button>
<button
class="bg-white border-black border rounded h-min"
class="bg-white dark:bg-[#B68BD6] dark:text-[#040033] border-black border rounded h-min px-3"
on:click={() => {
modalShow = !modalShow;
}}>Show music selection</button

2
tailwind.config.cjs
View File

@ -2,10 +2,12 @@ const defaultTheme = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
// darkMode: 'class',
theme: {
extend: {
colors: {
'murasaki': '#4f284b',
'dark-text': '#FFB9D2'
},
fontFamily: {
sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],