layouts
This commit is contained in:
satr14
parent
597304e3e3
commit
a2a4c9534d
3 changed files with 81 additions and 49 deletions
|
|
@ -3,7 +3,8 @@
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
* { @apply transition-all duration-300 ease-in-out; }
|
* { @apply transition-all duration-300 ease-in-out; }
|
||||||
body { @apply bg-ctp-crust text-ctp-text max-w-3xl mx-auto my-8 px-4; }
|
html { @apply h-full scroll-smooth; }
|
||||||
|
body { @apply bg-ctp-crust text-ctp-text h-full; }
|
||||||
h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
|
h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
|
||||||
h2 { @apply text-2xl md:text-3xl font-bold my-4; }
|
h2 { @apply text-2xl md:text-3xl font-bold my-4; }
|
||||||
h3 { @apply text-xl md:text-2xl font-bold my-4; }
|
h3 { @apply text-xl md:text-2xl font-bold my-4; }
|
||||||
|
|
|
||||||
|
|
@ -5,55 +5,69 @@
|
||||||
|
|
||||||
let days = daysUntilBirthday(data.birthday);
|
let days = daysUntilBirthday(data.birthday);
|
||||||
let time = getTimeIn(data.timezone);
|
let time = getTimeIn(data.timezone);
|
||||||
|
let charAmount = 50;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
<div class="fixed top-0 left-0 w-full h-full -bg-gradient-6 opacity-10 from-ctp-sapphire via-transparent to-ctp-green"></div>
|
||||||
<div class="group border-2 border-ctp-base hover:border-ctp-overlay1 rounded-xl w-full h-32 overflow-hidden flex justify-center items-center shadow-lg">
|
|
||||||
<div class="text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 group-hover:text-ctp-base">
|
<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center">
|
||||||
<span>{randomStr(30)}<br>{randomStr(40)}</span>
|
<div class="group whitespace-nowrap text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
|
||||||
<span class="group-hover:py-4 block">{randomStr(20-data.name.length/2)}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(20-data.name.length/2)}</span>
|
<span class="inline-block animate-scrolling-text-to-l">{randomStr(charAmount)}</span><br>
|
||||||
<span>{randomStr(40)}<br>{randomStr(30)}</span>
|
<span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
|
||||||
</div>
|
<span class="inline-block animate-scrolling-text-to-r">{randomStr(charAmount)}</span><br>
|
||||||
</div>
|
</div>
|
||||||
<nav class="flex justify-between items-center gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">
|
</div>
|
||||||
<div class="flex justify-center gap-4">
|
|
||||||
<a href={'https://github.com/'+data.github} target="_blank">github</a>
|
<div class="h-[calc(100%-8rem)] sm:h-[calc(100%-6rem)]"></div>
|
||||||
<a href={'https://discordapp.com/users/'+data.discord} target="_blank">discord</a>
|
|
||||||
<a href={data.blog} target="_blank">blog</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-center m-0 font-mono italic">curl https://satr14.my.id</p>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
<div class="backdrop-blur-md w-[calc(100%-2rem)] ml-4 pt-4 border-t-2 border-x-2 border-ctp-base hover:border-ctp-sky shadow-inner rounded-t-3xl">
|
||||||
<article>
|
<div class="max-w-3xl mx-auto px-4 pt-2 sm:pt-4">
|
||||||
<h1>{data.subtitle}</h1>
|
<header>
|
||||||
<p>{data.description}</p>
|
<nav class="flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">
|
||||||
<p class="text-sm"><i>
|
<div class="flex justify-center gap-4">
|
||||||
It's <b>{time}</b> in <b>{data.timezone}</b>.
|
<a href={'https://github.com/'+data.github} target="_blank">github</a>
|
||||||
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
|
<a href={'https://discordapp.com/users/'+data.discord} target="_blank">discord</a>
|
||||||
</i></p>
|
<a href={data.blog} target="_blank">blog</a>
|
||||||
<p class="flex flex-wrap gap-2 text-sm">
|
</div>
|
||||||
{#each data.skills as skill}
|
<!-- svelte-ignore a11y-autofocus -->
|
||||||
<a href={'https://google.com/search?q='+skill} target="_blank" class="bg-ctp-mantle text-ctp-text hover:bg-ctp-base px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
|
<a href="/#abt" id="abt" class="text-center no-underline" autofocus>^</a>
|
||||||
{/each}
|
<p class="text-center m-0 font-mono italic hidden sm:block">curl https://satr14.my.id</p>
|
||||||
</p>
|
</nav>
|
||||||
<p class="flex flex-wrap gap-1">
|
</header>
|
||||||
{#each Object.entries(data.links) as link, i}
|
|
||||||
{#if i > 0}<span class="text-ctp-subtext1">~</span>{/if}
|
<main>
|
||||||
<a href={link[1]} target="_blank">{link[0]}</a>
|
<article>
|
||||||
{/each}
|
<h1>{data.subtitle}</h1>
|
||||||
</p>
|
<p>{data.description}</p>
|
||||||
</article>
|
<p class="text-sm"><i>
|
||||||
</main>
|
It's <b>{time}</b> in <b>{data.timezone}</b>.
|
||||||
|
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
|
||||||
|
</i></p>
|
||||||
|
<p class="flex flex-wrap gap-2 text-sm">
|
||||||
<footer class=" mt-8">
|
{#each data.skills as skill}
|
||||||
<nav class="flex justify-center items-center gap-4 text-lg">
|
<a href={'https://google.com/search?q='+skill} target="_blank" class="bg-ctp-surface0 text-ctp-text hover:bg-ctp-base px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
|
||||||
<a class="no-underline px-2" href="https://nixwebr.ing">nixwebr.ing:</a>
|
{/each}
|
||||||
<a class="no-underline px-2" href="https://nixwebr.ing/prev/satr14"><</a>
|
</p>
|
||||||
<a class="no-underline px-2" href="https://nixwebr.ing/rand">*</a>
|
<p class="flex flex-wrap gap-1">
|
||||||
<a class="no-underline px-2" href="https://nixwebr.ing/next/satr14">></a>
|
{#each Object.entries(data.links) as [title, url], i}
|
||||||
</nav>
|
{#if i > 0}<span class="text-ctp-subtext1">~</span>{/if}
|
||||||
</footer>
|
<a href={url} target="_blank">{title}</a>
|
||||||
|
{/each}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<section class="flex flex-wrap gap-4 px-4 pb-4">
|
||||||
|
{#each Object.entries(data.communities) as [name,details], i}
|
||||||
|
<div class="inline-block">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<img src={details.icon} alt={name} class="size-12 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-base m-0"><a href={details.url}>{name}</a></h2>
|
||||||
|
<span>{details.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -5,4 +5,21 @@ export default {
|
||||||
defaultFlavour: 'mocha',
|
defaultFlavour: 'mocha',
|
||||||
prefix: 'ctp',
|
prefix: 'ctp',
|
||||||
})],
|
})],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
backgroundImage: {
|
||||||
|
'-gradient-6': 'linear-gradient(-6deg, var(--tw-gradient-stops))'
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'scrolling-text-to-l': 'scroll 5s linear infinite',
|
||||||
|
'scrolling-text-to-r': 'scroll 5s linear infinite reverse',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
scroll: {
|
||||||
|
'0%': { transform: 'translateX(-100%)' },
|
||||||
|
'100%': { transform: 'translateX(100%)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue