midou/midou36o.github.io
1
0
Fork 0
mirror of https://github.com/midou36o/midou36o.github.io synced 2026-04-07 04:08:39 +05:30
Code Actions Packages Projects Releases Activity

Update layout

Browse Source
This commit is contained in:
Midou
2025-12-11 09:53:06 +01:00
parent b5298be8a6
commit 849bf65de3
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/blog/+post.svelte
View File

@@ -4,7 +4,7 @@
</script>
<div
class="blog mx-auto w-70% md:pl-30 md:w-80% lg:pl-0 lg:w-100% beak-normal mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300"
class="blog mx-auto w-70% md:w-80% lg:w-100% beak-normal mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300"
>
<slot />
</div>

11
src/routes/about/+page.svelte
View File

@@ -8,7 +8,10 @@
import { quintOut } from 'svelte/easing';
</script>
<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:py-0 py-10% md:px-10%" id="content">
<body
class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:py-0 py-10%"
id="content"
>
<div class="min-h-screen">
<!-- Primary content (Left) -->
<div class="text-center">
@@ -45,7 +48,7 @@
<div
in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
class="justify-center w-85% md:w-50% sm:h-75% h-100% flex flex-col items-center md:m-5 sm:m-1 shrink overflow-hidden h-screen"
>
<div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white">
<p>
@@ -62,8 +65,8 @@
on my website.<br />
Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br
/>
Finally, feel free to contact me! I love receiving mails and messages from people, and
I'll try to respond as soon as possible.<br />
Finally, feel free to contact me! I love receiving mails and messages from people, and I'll
try to respond as soon as possible.<br />
If it's a question or a request, I'll see if can also publicly document it so that others
can benefit from it as well.<br />
Until then, have a nice day!

32
src/routes/blog/[slug]/+page.svelte
View File

@@ -19,36 +19,38 @@
<!-- Primary content (Left) -->
<div class="text-center">
<div
class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
class="md:justify-start justify-center flex md:flex-row flex-col items-center md:item-start m-auto shrink pt-3 md:pt-0 overflow-hidden h-screen"
>
<div
in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
out:fly={{ duration: 300, y: -50, easing: quintOut }}
class="flex flex-col pr-3 md:w-60"
class="flex flex-col md:mx-7 pr-3 md:w-60"
>
<div class="flex flex-col md:flex-col">
<div
class="i-ph-book-bold dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
class="i-ph-book-bold dark:text-white place-self-center md:place-self-start pl-0 md:pl-3 text-black text-5xl"
/>
<h1
class="text-black dark:text-white md:break-normal md:w-60 md:text-center font-bold text-4xl md:px-2"
class="text-black dark:text-white md:break-normal md:w-60 text-center md:text-left font-bold text-4xl"
>
{data.meta.title}
</h1>
</div>
<p class="block text-gray-600 dark:text-gray-500 p-3 py-1">
<p class="block text-gray-600 dark:text-gray-500 text-center md:text-start py-1">
{convertDate(data.meta.date)}
</p>
<p class="inline text-gray-600 dark:text-gray-500 py-1 text-center md:text-start">
Tags:
</p>
<div class="pl-2 inline text-gray-600 dark:text-gray-500 py-1 text-cetner md:text-start">
{#each data.meta.categories as category}
<span class="surface-4"> &num;{category} </span>
{/each}
</p>
<p class="block text-gray-600 dark:text-gray-500 p-3 py-1">
{convertDate(data.meta.date)}
</p>
</div>
<a href="/blog" data-sveltekit-preload-code>
<div
class="flex place-content-center place-self-center justify-center content-center flex-row md:px-25%"
>
<div class="flex justify-center content-center md:justify-end md:content-end flex-row">
<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
<p class="md:block hidden">Go back?</p>
</div>
@@ -58,16 +60,16 @@
<div
in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
out:fly={{ duration: 300, y: 0, easing: quintOut }}
class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
class="md:h-100% md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
/>
<!-- Secondary Content (Right) -->
<div
in:fly={{ delay: 400, duration: 300, y: -50, easing: quintOut }}
out:fly={{ duration: 300, y: 50, easing: quintOut }}
class="justify-center w-85% md:min-w-20% md:max-w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
class="justify-center md:min-w-50% md:max-w-50% h-50% flex flex-col items-center md:m-auto md:m-5 shrink overflow-hidden h-screen"
>
<div
class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white my-10%"
class="text-xl md:justify-center text-start overflow-scroll md:text-left text-black dark:text-white"
>
<div class="prose" />
<svelte:component this={data.content} />