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

LOVE
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-02 23:48:39 +02:00
parent 31e0b07113
commit 870cb0bb7c
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
7 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/header.svelte
View File

@ -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>

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

@ -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">
<br />
<h2 class="font-semibold text-left ml-10 mb-2">
Tech
</h2>
<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 {
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>

2
src/components/homepage/rightbar.svelte
View File

@ -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"

5
src/components/homepage/sidebar.svelte
View File

@ -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 />

8
src/components/navbutton.svelte
View File

@ -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>

2
src/routes/__layout.svelte
View File

@ -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'/>-->

5
tailwind.config.cjs
View File

@ -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,