start making it mobile responsive

pyrox.dev fa034fc0 a1b3e407

verified
+10
.zed/tasks.json
···
"shell": "system"
},
{
+
"label": "dev server - caddy",
+
"command": "just caddy",
+
"use_new_terminal": true,
+
"allow_concurrent_runs": false,
+
"reveal": "never",
+
"reveal_target": "dock",
+
"hide": "never",
+
"shell": "system"
+
},
+
{
"label": "render to _site",
"command": "just build",
"use_new_terminal": true,
+4
Caddyfile
···
+
:8080 {
+
root * ./_site/
+
file_server
+
}
+1
flake.nix
···
buildInputs = [
pkgs.deno
pkgs.just
+
pkgs.caddy
(pkgs.python3.withPackages (
ps: with ps; [
brotli
+3
justfile
···
serve:
steam-run deno task --unstable-ffi serve
+
caddy:
+
caddy run
+
build:
steam-run deno task --unstable-ffi lume
+4 -2
src/_components/footer.vto
···
{{ comp.logo() }}
<div class="mt-2">
<p class="text-overlay2 text-lg">Social</p>
-
<ul class="list-none text-4xl text-subtext1 space-x-3">
+
<ul
+
class="grid grid-cols-3 grid-rows-2 md:block list-none text-3xl lg:text-4xl text-subtext1 space-x-1 md:space-x-2 lg:space-x-3"
+
>
{{ for link of author.links }}
<li class="inline-block">
<a
···
</a>
</li>
{{ /for }}
-
<li class="inline-block text-[2rem]">
+
<li class="inline-block lg:text-[2rem] text-[1.75rem]">
<a href="/blog.rss" aria-label="Blog RSS Feed">
<i class="si si-rss"></i>
</a>
+5 -3
src/_components/logo.vto
···
-
<div class="flex flex-row justify-center gap-x-4 content-center">
-
<i class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-4xl"></i>
-
<p class="text-text text-xl self-center">a space</p>
+
<div class="flex flex-row justify-center gap-x-2 lg:gap-x-4 content-center">
+
<i
+
class="bi bi-exclamation-triangle text-yellow self-center justify-self-end text-2xl lg:text-4xl"
+
></i>
+
<p class="text-text text-lg lg:text-xl self-center">a space</p>
</div>
+2 -2
src/_components/navbar.vto
···
</a>
<nav
aria-label="Main"
-
class="flex flex-row text-3xl text-mauve underline gap-x-16 justify-center"
+
class="flex flex-row text-xl lg:text-3xl text-mauve underline gap-x-4 lg:gap-x-16 justify-center"
>
{{ for link of nav.links }}
<a class="underline self-center" href="{{ link.link }}">{{ link.name }}</a>
{{ /for }}
</nav>
<div></div>
-
<p class="text-overlay1 self-center">search coming soon</p>
+
<p class="hidden lg:block text-overlay1 self-center">search coming soon</p>
</header>
+1 -1
src/_components/post_card.vto
···
</a>
</li>
{{ else }}
-
<li class="bg-surface0 rounded-md">
+
<li class="bg-surface0 rounded-md w-3/4 lg:w-full">
<a href="{{ post.url }}">
<div class="m-6 py-2">
<h2 class="text-subtext1 font-serif text-2xl mb-2">{{ post.title }}</h2>
+4 -3
src/_components/project_card.vto
···
-
<li class="bg-surface0 p-4 w-1/2 text-lg rounded-md">
-
<p class="text-2xl font-serif mb-2">{{ project.name }}</p>
-
<p class="italic">{{ project.description }}</p>
+
<li class="bg-surface0 p-4 text-lg rounded-md">
+
<h2 class="text-2xl font-serif mb-2">{{ project.name }}</h2>
+
<h3 class="italic">{{ project.description }}</h3>
<p>Techs Used: {{ project.techs }}</p>
<p>
Developed Since:
···
{{ project.start |> date('POST_DATE') }}
</time></strong>
</p>
+
<p>Status: {{ project.status }}</p>
<a class="underline text-blue" href="{{ project.link }}">{{ project.link }}</a>
</li>
+2 -2
src/_data/author.toml
···
service = "lastdotfm"
link = "https://www.last.fm/user/thehedgeh0g"
description = "last.fm profile"
-
extra_classes = "pt-2.5 text-[2.5rem]"
+
extra_classes = "pt-2.5 lg:text-[2.5rem]"
[[links]]
service = "kofi"
link = "https://ko-fi.com/pyroxdev"
description = "Ko-fi donation page"
-
extra_classes = "pt-1 text-[2.5rem]"
+
extra_classes = "pt-1 lg:text-[2.5rem]"
[[links]]
service = "forgejo"
link = "https://git.pyrox.dev/pyrox"
+3
src/_data/projects.toml
···
techs = [ "Django", "Python", "Nix", "CSS", "HTML", "Sqlite"]
link = "https://github.com/pyrox0/vgarchive"
start = "2024-08-17"
+
status = "Pre-Alpha"
[[projects]]
name = "Nix Configuration"
···
techs = [ "Nix", "Caddy" ]
link = "https://git.pyrox.dev/pyrox/nix"
start = "2022-01-28"
+
status = "Stable"
[[projects]]
name = "This Blog"
···
techs = [ "Nix", "HTML", "CSS", "Vento", "JS", "Python", "Markdown"]
link = "https://git.pyrox.dev/pyrox/new-blog"
start ="2025-02-09"
+
status = "Beta"
+1 -1
src/_includes/layouts/base.vto
···
<!DOCTYPE html>
<html lang="en-US">
<head>
-
{{ comp.head() }}
+
{{ comp.head({"url": url, "title": title}) }}
</head>
<body id="body" class="mocha bg-crust grid">
{{ comp.navbar() }}
+6 -2
src/_includes/layouts/blog-list.vto
···
{{ layout "layouts/base.vto" }}
-
<main class="min-h-screen text-text justify-self-center w-full lg:w-1/2">
+
<main class="min-h-screen text-text justify-self-center px-4 lg:px-0 w-full lg:w-1/2">
<h1 class="text-5xl my-8">Blog</h1>
-
<a class="lg:inline float-right -mt-20 mr-1.5" href="/blog.rss" aria-label="Blog RSS Feed">
+
<a
+
class="lg:inline float-right -mt-20 lg:mr-1.5"
+
href="/blog.rss"
+
aria-label="Blog RSS Feed"
+
>
<i class="text-5xl si si-rss"></i>
</a>
<ul class="mt-8">