kennethnym/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use css for tilde background

Browse Source
This commit is contained in:
Kenneth
2024-07-14 23:27:56 +01:00
parent de79cbce9b
commit 546d403cb6
3 changed files with 26 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/index.astro
View File

@@ -9,7 +9,9 @@ import { getBlogs } from "../content/blog";
const posts = (await getBlogs()).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
const currentMonth = new Date().getMonth();
const current = new Date();
const currentMonth = current.getMonth();
const currentYear = `${current.getUTCFullYear() - 1}`.substring(2);
---
<!doctype html>
@@ -18,12 +20,12 @@ const currentMonth = new Date().getMonth();
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body
class="bg-base text-text h-screen m-auto p-8 flex items-center justify-center overflow-hidden"
class="tilde-background bg-base text-text h-screen m-auto p-8 flex items-center justify-center overflow-hidden"
>
<main
class="py-8 max-w-2xl flex flex-col items-center space-y-0 leading-tight"
>
<p>KENNETHNYM v23.{currentMonth + 4}</p>
<p>KENNETHNYM v{currentYear}.{currentMonth + 3}</p>
<p class="leading-none">&nbsp;</p>
<p>software engineer. unpaid hhkb salesman.</p>
<p>&nbsp;</p>
@@ -39,49 +41,13 @@ const currentMonth = new Date().getMonth();
}
</ul>
</main>
<div class="absolute w-full h-full px-2 -z-10 leading-tight">
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
<p>~</p>
</div>
<LuaLine />
<style>
.tilde-background {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='20'><text x='0' y='16' fill='%23C6D1F1' font-family='CommitMono'>~</text></svg>");
background-repeat: repeat-y;
}
</style>
</body>
</html>