show old design on mobile
This commit is contained in:
@@ -1,12 +1,18 @@
|
||||
<div id="command-line" class="w-full flex flex-row bg-base">
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="command-line-input"
|
||||
type="text"
|
||||
size="1"
|
||||
class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
|
||||
/>
|
||||
<div id="caret" aria-hidden="true" class="bg-text inline-block"> </div>
|
||||
<p id="status-text" class="absolute w-full h-full bg-base hidden italic"></p>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
id="status-text"
|
||||
class="absolute w-full h-full bg-base hidden italic"
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -8,10 +8,10 @@ const { date } = Astro.props;
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString('en-us', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
date.toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</time>
|
||||
|
||||
@@ -3,23 +3,23 @@ import Link from "./Link.astro";
|
||||
import CommandLine from "./CommandLine.astro";
|
||||
---
|
||||
|
||||
<div class="absolute w-full bottom-0">
|
||||
<div class="hidden sm:block absolute w-full bottom-0">
|
||||
<footer class="w-full bg-crust flex flex-row leading-tight">
|
||||
<span
|
||||
id="status-indicator"
|
||||
class="bg-blue text-base inline-block leading-tight"
|
||||
class="bg-blue font-bold text-base inline-block leading-tight"
|
||||
> NORMAL </span
|
||||
>
|
||||
<div class="flex flex-row bg-surface0">
|
||||
<div id="project-list" class="flex flex-row bg-surface0">
|
||||
<span> </span>
|
||||
<Link href="https://polygui.org">poly gui</Link>
|
||||
<span> </span>
|
||||
<Link href="https://github.com/kennethnym/mai">ml</Link>
|
||||
<Link href="https://polygui.org/nanopack/introduction/">nanopack</Link>
|
||||
<span> </span>
|
||||
<Link href="https://github.com/kennethnym/dotfiles">.files</Link>
|
||||
<Link href="https://github.com/kennethnym/mai">mai</Link>
|
||||
<span> </span>
|
||||
</div>
|
||||
<div class="flex flex-row ml-auto bg-surface0">
|
||||
<div id="contact-list" class="flex flex-row ml-auto bg-surface0">
|
||||
<span> </span>
|
||||
<Link href="https://github.com/kennethnym">github</Link>
|
||||
<span> </span>
|
||||
@@ -42,7 +42,6 @@ import CommandLine from "./CommandLine.astro";
|
||||
statusIndicator.innerHTML = " COMMAND ";
|
||||
statusIndicator.classList.remove("bg-blue");
|
||||
statusIndicator.classList.add("bg-peach");
|
||||
console.log("cmd mode!");
|
||||
});
|
||||
|
||||
cmdLine.addEventListener("cmdmodedisabled", () => {
|
||||
|
||||
@@ -3,6 +3,7 @@ import BaseHead from "../components/BaseHead.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
import Link from "../components/Link.astro";
|
||||
import FormattedDate from "../components/FormattedDate.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import LuaLine from "../components/LuaLine.astro";
|
||||
import { getBlogs } from "../content/blog";
|
||||
|
||||
@@ -15,39 +16,110 @@ const currentYear = `${current.getUTCFullYear() - 1}`.substring(2);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" class="latte dark:mocha">
|
||||
<html lang="en" class="latte dark:mocha bg-base">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body
|
||||
class="tilde-background bg-base text-text h-screen m-auto p-8 flex items-center justify-center overflow-hidden"
|
||||
class="tilde-background text-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
|
||||
>
|
||||
<main
|
||||
class="py-8 max-w-2xl flex flex-col items-center space-y-0 leading-tight"
|
||||
<div class="visible p-8 sm:hidden">
|
||||
<header>
|
||||
<p class="font-bold text-2xl">kennethnym</p>
|
||||
</header>
|
||||
<main class="py-8">
|
||||
<p>dumping ground for my thoughts. all opinions are my own.</p>
|
||||
<h1 class="font-bold mt-8 mb-2 text-lg visited">current projects:</h1>
|
||||
<ul class="not-prose space-y-4 md:space-y-2">
|
||||
<li>
|
||||
<Link href="https://polygui.org">poly</Link>: a language-agnostic,
|
||||
cross-platform GUI framework for building OS-native applications.
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://polygui.org/nanopack/introduction/"
|
||||
>nanopack</Link
|
||||
>: a zero-runtime, type-safe binary serialization format.
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://github.com/kennethnym/mai">mai</Link>:
|
||||
multilayer authenticity identifier, an ML model that attempts to
|
||||
identify synthetic AI images
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="font-bold mt-8 mb-2 text-lg visited">my thoughts:</h1>
|
||||
<ul aria-label="recent blog posts" class="space-y-2">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-4">
|
||||
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
|
||||
<div class="text-right">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</main>
|
||||
<hr class="opacity-20 py-2" />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="hidden sm:visible scroll-container w-full h-full overflow-auto sm:flex items-center justify-center"
|
||||
>
|
||||
<p>KENNETHNYM v{currentYear}.{currentMonth + 3}</p>
|
||||
<p class="leading-none"> </p>
|
||||
<p>software engineer. unpaid hhkb salesman.</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<ul class="w-full">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-8">
|
||||
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</main>
|
||||
<main
|
||||
class="py-8 px-4 max-w-4xl flex flex-col items-center space-y-0 leading-tight"
|
||||
>
|
||||
<header class="font-bold text-center">
|
||||
KENNETHNYM v{currentYear}.{currentMonth + 3}
|
||||
</header>
|
||||
<p class="leading-none"> </p>
|
||||
<p class="text-center">software engineer. unpaid hhkb salesman.</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<ul
|
||||
aria-label="recent blog posts"
|
||||
class="w-full space-y-2 sm:space-y-0"
|
||||
>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-8">
|
||||
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
|
||||
<div class="text-right">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</main>
|
||||
</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;
|
||||
.scroll-container {
|
||||
margin-bottom: 4ch;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.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='%2343465E' font-family='CommitMono'>~</text></svg>");
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (prefers-color-scheme: dark) {
|
||||
.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>
|
||||
<script>
|
||||
window.addEventListener("closebuffer", () => {
|
||||
document.body.style.display = "none";
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user