guz013/keikos.work
1
0
Fork 0
Code Issues Pull Requests Activity

feat: socials section

Browse Source
This commit is contained in:
Guz
2024-12-16 18:01:19 -03:00
parent 1c55aaaef2
commit 414e73d8cd
2 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
handlers/pages/home.templ
View File

@@ -20,7 +20,7 @@ templ (p *Home) page() {
@layouts.Page() {
<main class="fixed w-100% h-screen md:flex justify-center items-center">
<h1
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-4 vertical-lr",
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
"md:relative md:m-0 md:horizontal-tb md:w-fit" }
>
Keiko <span class="font-japanese text-8xl">稽古</span>
@@ -41,8 +41,40 @@ templ (p *Home) page() {
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
aria-hidden="true"
></div>
<section class="relative bg-green w-100% h-screen">
<h2 class="m-0">Socials</h2>
<section class="relative bg-black w-100% h-screen flex flex-col justify-between">
<h2
class="relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent"
>
Socials
</h2>
<ul class="relative z-3 list-none text-4xl p-0 pr-5 underline">
<li class="flex justify-end mb-4">
<a class="flex items-center gap-2">
Instagram
<span class="inline-block i-pixelarticons:camera h-3rem"></span>
</a>
</li>
<li class="flex justify-end mb-4">
<a class="flex items-center gap-2">
Tumblr
<span class="inline-block i-pixelarticons:file-alt h-3rem"></span>
</a>
</li>
<li class="flex justify-end">
<a class="flex items-center gap-2">
BlueSky
<span class="inline-block i-pixelarticons:bug h-3rem"></span>
</a>
</li>
</ul>
<span
class="absolute z-2 w-full h-full bg-gradient-to-b from-black to-transparent"
aria-hidden="true"
></span>
<span
class="absolute z-1 w-full h-full bg-heropattern"
aria-hidden="hidden"
></span>
</section>
}
}

10
uno.config.js
View File

@@ -8,6 +8,14 @@ import {
transformerVariantGroup,
} from 'unocss';
/**
* Floor tile pattern from https://heropatterns.com/, licensed under the CC BY 4.0 license.
* @returns {string} - The "url()" string of the pattern.
*/
function heropattern() {
return `url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E")`;
}
export default defineConfig({
cli: {
entry: {
@@ -64,6 +72,8 @@ export default defineConfig({
return { 'writing-mode': `vertical-${d}` };
}],
['horizontal-tb', { 'writing-mode': 'horizontal-tb' }],
['bg-heropattern', { 'background-image': heropattern() }],
],
/* theme: {
colors: {