LOVE
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
31e0b07113
commit
870cb0bb7c
SSH Key Fingerprint:
SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="">
|
||||
|
|
@ -15,17 +15,15 @@
|
|||
check out under the "Galaxies" page.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-3 lg:px-20 xl:px-40 xl:mt-10">
|
||||
<img
|
||||
class="h-40 md:h-60 rounded "
|
||||
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">
|
||||
<br />
|
||||
<h2 class="font-semibold text-left ml-10 mb-2">
|
||||
Tech
|
||||
</h2>
|
||||
<div class="flex gap-3 lg:px-20 xl:px-40 xl:mt-10">
|
||||
<img
|
||||
class="h-40 md:h-60 rounded "
|
||||
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 grid grid-cols-2 gap-2">
|
||||
<div class="col-span-1">
|
||||
<h2 class="font-semibold text-left ml-10 mb-2">Tech</h2>
|
||||
<ul class="ml-10 list-disc marker:text-blue-400">
|
||||
<li>Kubernetes</li>
|
||||
<li>Svelte</li>
|
||||
|
|
@ -33,17 +31,36 @@
|
|||
<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>
|
||||
|
||||
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
||||
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
|
||||
<style>
|
||||
.h1-shadow {
|
||||
text-shadow: 2px 2px gray;
|
||||
transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1) ;
|
||||
transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.h1-shadow:hover {
|
||||
.h1-shadow:hover {
|
||||
text-shadow: 5px 5px gray;
|
||||
transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) ;
|
||||
transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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'/>-->
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue