commit before sleeping, removed most of the projects css style and actually centered the icons on the main page.
This commit is contained in:
parent
b3068e23c6
commit
9c77f90c58
GPG Key ID:
1D134A95FE521A7A
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue