LOVE

src/components/header.svelte

@@ -9,18 +9,20 @@
 			src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
 			alt="Icon"
 		/>
-		<div class="pl-5 mt-1 text-slate-200">
+		<div class="pl-5 mt-1">
 			<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
-			<p class="h-min text-xs text-slate-400">Surviving the rewriting</p>
+			<p class="h-min text-xs">Surviving the rewriting</p>
 		</div>
 	</div>
 	<div class="sm:col-start-5 col-start-1 col-end-7 grid grid-cols-6">
 		<nav
-			class="h-full flex items-end md:col-start-5 md:col-span-2 col-span-7 gap-2 text-slate-200 text-md"
+			class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md"
 		>
 			<Button link="/" text="Home" />
 			<Button link="/about" text="About" />
 		</nav>
 	</div>
+<!-->
 	<hr class="col-span-full border-slate-700" />
+</!-->
 </div>

src/components/homepage/content.svelte

@@ -1,4 +1,4 @@
-<div class="px-5 md:px-0 col-span-7 md:col-span-5">
+<div class="md:pl-10 px-5 md:px-0 col-span-7 md:col-span-6 lg:col-span-5">
 	<h1
 		class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
 	>
@@ -6,7 +6,7 @@
 	</h1>
 	<br class="hidden lg:block" />
 	<p class="font-roboto_slab text-center lg:text-2xl text-md">The modern web meets 2000</p>
-	<hr />
+	<hr class="border-black" />
 	<br />
 	<div class="md:text-center lg:px-40">
 		<p class="">
@@ -21,11 +21,9 @@
 			src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-2.gif"
 			alt="Kagamine Rin excitedly jumping! yay!"
 		/>
-			<div class="w-full bg-slate-800 rounded-xl shadow">
+		<div class="w-full grid grid-cols-2 gap-2">
-				<br />
+			<div class="col-span-1">
-				<h2 class="font-semibold text-left ml-10 mb-2">
+				<h2 class="font-semibold text-left ml-10 mb-2">Tech</h2>
-					Tech
-				</h2>
 				<ul class="ml-10 list-disc marker:text-blue-400">
 					<li>Kubernetes</li>
 					<li>Svelte</li>
@@ -33,6 +31,25 @@
 					<li>Lot's of Japanese music</li>
 				</ul>
 			</div>
+			<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">
+						<a href="https://dutchellie.nl/DutchEllie/svelte-testing">Gitea Repo</a>
+					</li>
+					<li class="underline text-[#002896] hover:text-blue-500">
+						<a href="https://drone.dutchellie.nl/DutchEllie/svelte-testing"
+							>Drone CI/CD
+							<img
+							class="ml-2 mb-1 inline"
+								src="https://drone.dutchellie.nl/api/badges/DutchEllie/svelte-testing/status.svg?ref=refs/heads/main"
+								alt="Drone build status"
+							/>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
 	</div>
 </div>
 

src/components/homepage/rightbar.svelte

@@ -11,7 +11,7 @@
 		}
 	}
 </script>
-<div class="hidden md:block col-start-7">
+<div class="hidden md:block col-start-7 mt-10 mr-2">
 	<img
 		class="w-auto "
 		src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/rin-len1.webp"

src/components/homepage/sidebar.svelte

@@ -1,5 +1,8 @@
-<div class="hidden col-start-1 col-span-1 bg-slate-800 md:flex flex-col justify-start gap-2 p-2">
+<div
+	class="hidden col-start-1 col-span-1 rounded-xl ml-2 mt-10 lg:flex flex-col justify-start gap-2 p-2"
+>
 	<div class=" shrink">
+		<h2 class="font-semibold text-left mb-2">Special place</h2>
 		<p class="">
 			Welcome to my sidebar (o^▽^o)
 			<br />

src/components/navbutton.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <a href="{link}">
-<button class="{$page.url.pathname == link ? "active-now" : ""} text-violet-50 py-2 px-4 font-montserrat font-light link-underline">
+<button class="{$page.url.pathname == link ? "active-now" : ""} text-murasaki md:text-xl py-2 px-4 font-montserrat font-semibold link-underline">
 	{text}
 </button>
 </a>
@@ -19,7 +19,7 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: #638CF6;
+		background-color: #421727;
 	}
 	.link-underline {
 		display: inline-block;
@@ -34,7 +34,7 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: #5EECBE;
+		background-color: #421727;
 		transform-origin: bottom right;
 		transition: transform 0.25s ease-out;
 	}
@@ -42,6 +42,6 @@
 	.link-underline:hover:after {
 		transform: scaleX(1);
 		transform-origin: bottom left;
-		background-color: #638CF6;
+		background-color: #421727;
 	}
 </style>

src/routes/__layout.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="flex flex-col bg-gradient-to-tr from-[#070F1A] to-[#0D234C] w-screen h-screen text-slate-100"
+	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki"
 >
 	<!-- Possible alert header -->
 	<!--<AlertHeader text='ALERT'/>-->

tailwind.config.cjs

@@ -4,6 +4,9 @@ module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
     extend: {
+      colors: {
+        'murasaki': '#4f284b',
+      },
       fontFamily: {
         sans: ['Roboto Flex', ...defaultTheme.fontFamily.sans],
         montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans],
@@ -14,7 +17,7 @@ module.exports = {
       },
       gridRow: {
         'span-11': 'span 11 / span 11',
-      }
+      },
     },
     container: {
       center: true,