thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: improve mobile
All checks were successful
Deploy Blog / deploy (push) Successful in 1m55s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-29 19:11:22 +00:00
parent 529888ad7e
commit 3ff472f5f6
9 changed files with 198 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/EolasListing.jsx
View file

@ -34,11 +34,11 @@ const EolasListing = () => {
})
return (
<div className="container mx-auto p-4 grow">
<div className="container mx-auto py-4 px-1 md:p-4 grow">
<div className="space-my-8">
<section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! inline-block h2-home">
{`zettelkasten recent`}
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home scanlined px-2">
{`eolas recent`}
</h2>
{isLoading && <div>Loading...</div>}

4
src/containers/CodeStats.jsx
View file

@ -67,11 +67,11 @@ const CodeStats = () => {
.slice(0, 4)
return (
<div className="container mx-auto p-4 grow">
<div className="container mx-auto py-4 px-1 md:p-4 grow ">
<div className="space-my-8">
<section className="container">
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! inline-block h2-home">
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! h2-home scanlined px-2">
{`code stats`}
</h2>
<div className="mb-4 text-sm text-muted">

8
src/containers/PostListing.jsx
View file

@ -5,23 +5,23 @@ import { convertDate } from "@/utils/convertDate"
const PostListing = ({ posts, title, showAllButton }) => {
return (
<div className="container mx-auto p-4 grow">
<div className="container mx-auto py-4 px-1 md:p-4 grow">
<div className="space-my-8">
<section className="container">
<h2 className="text-2xl font-semibold mb-4 block h2-home">
<h2 className="text-2xl font-semibold mb-4 block h2-home scanlined px-2">
{`${title}`}
</h2>
{posts.map((post) => (
<ul>
<li className="mb-4">
<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
<div className="flex justify-between flex-col relative hover:bg-[#504945]">
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
{convertDate(post.date)}
</span>
<Link
to={`/posts/${post.slug}`}
key={post.slug}
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
className="overflow-hidden text-ellipsis whitespace-nowrap min-w-0"
>
{post.title}
</Link>

2
src/index.css
View file

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import "./styles/_variables.css";
@import "tailwindcss";
@import "tw-animate-css";

2
src/pages/about.jsx
View file

@ -4,7 +4,7 @@ import portrait from "../images/portrait-compressed.jpg"
const AboutPage = () => {
return (
<MainTemplate>
<div className="container mx-auto p-4">
<div className="container mx-auto py-4 px-1 md:p-4">
<figure className="w-full flex flex-col items-center mb-6">
<div className="scanlined inline-block">
<img

8
src/pages/home.jsx
View file

@ -10,7 +10,7 @@ const HomePage = () => {
const { posts } = usePosts()
return (
<MainTemplate>
<div className="container mx-auto p-4 grow">
<div className="container mx-auto md:p-4 py-4 px-1 grow">
<div className="space-my-8">
<section className="space-y-4">
<div className="gap-6 flex flex-col items-center sm:flex-row">
@ -23,7 +23,7 @@ const HomePage = () => {
systems obscure
</div>
</h1>
<p className="text-center sm:text-left md:text-left text-muted font-medium text-lg">
<p className="text-center sm:text-left md:text-left text-muted font-medium">
Another software engineer with a blog. This is my technical
scrapbook and digital garden.
</p>
@ -40,10 +40,10 @@ const HomePage = () => {
posts={posts.filter((post) => post.tags.includes("highlight"))}
/>
<div className="container mx-auto p-4 grow">
<div className="container mx-auto md:p-4 py-4 px-1 grow">
<div className="space-my-8">
<section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! block h2-home">
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
{`projects`}
</h2>
<ul>

2
src/styles/_variables.css
View file

@ -36,7 +36,7 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--font-monospaced: "IBM Plex Mono";
--font-monospaced: "Jetbrains Mono";
--font-sansserif: "Inter", sans-serif;
}

2
src/templates/BlogTemplate.jsx
View file

@ -11,7 +11,7 @@ const BlogTemplate = () => {
return (
<MainTemplate>
<div className="container mx-auto p-4 grow">
<div className="container mx-auto py-4 px-1 md:p-4 grow">
{!post ? (
<div>Loading...</div>
) : (

2
src/templates/MainTemplate.jsx
View file

@ -4,7 +4,7 @@ import gruvboxComputer from "../images/gruvbox-computer.svg"
import { Link } from "react-router"
const Header = () => {
return (
<header className="py-6">
<header className="md:py-6">
<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
<Link to="/">
<div className="scanlined">