commit before sleeping, removed most of the projects css style and actually centered the icons on the main page.

This commit is contained in:
Midou36O 2023-07-31 01:39:17 +01:00
parent b3068e23c6
commit 9c77f90c58
Signed by: midou
GPG Key ID: 1D134A95FE521A7A
4 changed files with 49 additions and 65 deletions

View File

@ -10,29 +10,26 @@ html {
scroll-behavior: smooth;
}
#backdesk {
height: 100%;
object-fit: fill;
overflow: hidden;
animation: rainbow 20s steps(120) infinite;
height: 100%;
object-fit: fill;
overflow: hidden;
animation: rainbow 20s steps(120) infinite;
}
#backmob {
display:none;
display: none;
}
@keyframes rainbow {
from { filter:hue-rotate(10deg); }
to { filter:hue-rotate(360deg); }
}
from {
filter: hue-rotate(10deg);
}
to {
filter: hue-rotate(360deg);
}
}
.bio-and-projects {
text-align: center;
position: fixed;
left: 5px;
width: 100%;
}
@ -43,7 +40,7 @@ html {
}
.bg {
background-image: url(/Images/BG_FHD_darker_mb.png);
background-image: url(/Images/BG_FHD_darker_mb.png);
}
body {
@ -93,7 +90,6 @@ body {
width: 125px;
}
.middle {
text-align: center;
top: 50%;
@ -104,14 +100,6 @@ a {
text-decoration: none;
}
.middle-bottom {
height: 200px;
width: 400px;
@ -131,9 +119,6 @@ img {
text-align: center;
}
@media (prefers-color-scheme: dark) {
html {
--primary: #151515;

View File

@ -14,25 +14,25 @@
<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
</div>
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-100%"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex md:flex-col flex-row px-3 md:px-0" >
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0" >
<a href="{data.github}{data.gh}">
<div class="flex flex-row py-1">
<div class="i-carbon-logo-github text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">GitHub</p>
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">GitHub</p>
</div>
</a>
<a href="{data.matrix}{data.mtx}">
<div class="flex flex-row py-1">
<div class="i-tabler-brand-matrix md:pl-3 text-black dark:text-white px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden dark:text-white text-black md:pl-2">Matrix</p>
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Matrix</p>
</div>
</a>
<a href="mailto:{data.mail}">
<div class="flex flex-row py-1">
<div class="i-mdi-at md:pl-3 text-black dark:text-white px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Mail</p>
<div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden pl-2">Mail</p>
</div>
</a>
<a href="/donate">
<div class="flex flex-row py-1">
<div class="i-ph-currency-circle-dollar-bold md:pl-3 text-black px-2 md:px-0 dark:text-white my-auto text-3xl"></div><p class="text-2xl md:block hidden text-black dark:text-white md:pl-2">Donate</p>
<div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-ph-currency-circle-dollar-bold md:pl-3 px-2 md:px-0 my-auto text-3xl"></div><p class="text-2xl md:block hidden md:pl-2">Donate</p>
</div>
</a>
</div>
@ -45,20 +45,20 @@
class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"
></div>
<!-- Secondary content (right) -->
<div class="flex md:flex-col flex-row px-5 md:px-0">
<div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
<div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/about"><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/about" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
</div>
<div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/projects"><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a>
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/projects" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a>
</div>
<div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}}
out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}}
class="flex flex-row rounded md:m-3 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
<a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2></div></a>
</div>
</div>

View File

@ -3,27 +3,24 @@
import { quintOut } from 'svelte/easing';
</script>
<body class="dark:bg-black bg-gray-300 font-sans" id="content">
<div class="text-center">
<div class="justify-center flex flex-col items-center m-auto shrink overflow-hidden h-screen ">
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} >
<h1 class="text-black dark:text-white text-4xl">Donate</h1>
<p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
</div>
<div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} animate=true out:fly={{ duration: 300, x: -50, easing: quintOut}} >
<h1 class="text-black dark:text-white text-4xl">Donate</h1>
<p class="text-black dark:text-white pb-5" style="">Thanks a lot!</p>
</div>
<hr transition:fly={{ duration: 300, x: 0, easing: quintOut}} class="border-black dark:border-white w-1/6"/>
<div in:fly={{ delay: 300, duration: 300, x: -50, easing: quintOut}} out:fly={{ duration: 300, x: 50, easing: quintOut}} >
<a href="https://github.com/sponsors/midou36o">
<div class="flex flex-row pt-5">
<div class="i-carbon-logo-github dark:text-white text-black text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">GitHub Sponsors</p>
<div class="flex flex-row mt-5 md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-carbon-logo-github my-auto text-3xl"></div><p class="text-2xl pl-2">GitHub Sponsors</p>
</div>
</a>
<a href="/donate/monero">
<div class="flex flex-row">
<div class="i-tabler-coin-monero pl-3 text-black dark:text-white text-2xl"></div><p class="text-1xl text-black dark:text-white pl-2">Monero</p>
<div class="flex flex-row md:dark:hover:bg-white p-1 md:dark:hover:text-black md:hover:bg-gray-400 rounded">
<div class="i-tabler-coin-monero pl-3 my-auto text-3xl"></div><p class="text-2xl pl-2">Monero</p>
</div>
</a>
</div>
</div>
</div>
</body>

View File

@ -1,18 +1,20 @@
<script>
import proj from '$lib/project.json';
</script>
<div class="mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 gap-3 mx-4 grid-cols-1">
<div class="min-h-screen justify-center gap-1 flex flex-col place-items-center">
{#each proj as { name, date, desc, url, image, imdes }}
<div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-50 md:w-45 w-screen object-cover h-48" src="{image}" alt="{imdes}">
</div>
<div class="pb-20 pt-5 px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-50">
<div><h3 class="text-3xl dark:text-white text-black text-center">{name}</h3></div>
<div class="text-sm dark:text-white text-black text-center">{date}</div>
<div><p class="dark:text-white text-black text-sm">{desc}</p></div>
<div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="{url}">Check it out</a></div>
<div class="flex flex-col bg-gray-800">
<div class="my-auto">
<div class="flex flex-row">
<div class="flex flex-col">
<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
<p class="text-sm dark:text-white text-black text-center">{date}</p>
<p class="dark:text-white text-black text-sm">{desc}</p>
</div>
<div class="h-10% w-50 overflow-hidden">
<img class="transition -py-20 duration-400 static top-0 opacity-75 object-contain hover:scale-120" src="{image}" alt="{imdes}">
<div class="h-30 top-0 static bg-gradient-to-l from-gray-800"/>
</div>
</div>
</div>
</div>