From 3ff472f5f6866330781ce325ca0679d8c3d396bf Mon Sep 17 00:00:00 2001 From: thomasabishop Date: Mon, 29 Dec 2025 19:11:22 +0000 Subject: [PATCH] style: improve mobile --- src/components/EolasListing.jsx | 90 +++++++++++++------------- src/containers/CodeStats.jsx | 4 +- src/containers/PostListing.jsx | 8 +-- src/index.css | 92 +++++++++++++------------- src/pages/about.jsx | 2 +- src/pages/home.jsx | 8 +-- src/styles/_variables.css | 2 +- src/templates/BlogTemplate.jsx | 80 +++++++++++------------ src/templates/MainTemplate.jsx | 110 ++++++++++++++++---------------- 9 files changed, 198 insertions(+), 198 deletions(-) diff --git a/src/components/EolasListing.jsx b/src/components/EolasListing.jsx index 5b76ac4..db59768 100644 --- a/src/components/EolasListing.jsx +++ b/src/components/EolasListing.jsx @@ -3,57 +3,57 @@ import eolasApi from "@/api/eolas-api" import { convertDate } from "@/utils/convertDate" const EolasEntries = ({ entries }) => { - return ( - entries && - entries.map((entry, i) => ( - - )) - ) + return ( + entries && + entries.map((entry, i) => ( + + )) + ) } const EolasListing = () => { - const { data, isLoading, error } = useQuery({ - queryKey: [`eolas_listing`], - queryFn: () => - eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data), - }) + const { data, isLoading, error } = useQuery({ + queryKey: [`eolas_listing`], + queryFn: () => + eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data), + }) - return ( -
-
-
-

- {`zettelkasten recent`} -

+ return ( +
+
+
+

+ {`eolas recent`} +

- {isLoading &&
Loading...
} + {isLoading &&
Loading...
} - {error ? ( -
- Error fetching recent learning -
- ) : ( - - )} -
-
-
- ) + {error ? ( +
+ Error fetching recent learning +
+ ) : ( + + )} +
+
+
+ ) } export default EolasListing diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx index 5a10d7e..f77091f 100644 --- a/src/containers/CodeStats.jsx +++ b/src/containers/CodeStats.jsx @@ -67,11 +67,11 @@ const CodeStats = () => { .slice(0, 4) return ( -
+
-

+

{`code stats`}

diff --git a/src/containers/PostListing.jsx b/src/containers/PostListing.jsx index a4c0a15..4ac4f8b 100644 --- a/src/containers/PostListing.jsx +++ b/src/containers/PostListing.jsx @@ -5,23 +5,23 @@ import { convertDate } from "@/utils/convertDate" const PostListing = ({ posts, title, showAllButton }) => { return ( -
+
-

+

{`${title}`}

{posts.map((post) => (
  • -
    +
    {convertDate(post.date)} {post.title} diff --git a/src/index.css b/src/index.css index ed4eeb7..bf3b986 100644 --- a/src/index.css +++ b/src/index.css @@ -1,94 +1,94 @@ -@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"; * { - outline-color: color-mix(in srgb, var(--ring) 50%, transparent); + outline-color: color-mix(in srgb, var(--ring) 50%, transparent); } html { - font-family: var(--font-sansserif); + font-family: var(--font-sansserif); } body { - background-color: var(--background); - color: var(--foreground); + background-color: var(--background); + color: var(--foreground); } .condensed { - font-family: "Inter"; + font-family: "Inter"; } figcaption { - font-weight: 500; - font-family: "Inter"; + font-weight: 500; + font-family: "Inter"; } h1 { - color: var(--color-orange-light); - font-family: "Inter"; + color: var(--color-orange-light); + font-family: "Inter"; } h2 { - font-family: "Inter"; - color: var(--color-green-light); + font-family: "Inter"; + color: var(--color-green-light); } .h2-home { - font-family: "Inter"; - font-weight: 600; + font-family: "Inter"; + font-weight: 600; } h3 { - font-family: "Inter"; - font-weight: 600 !important; + font-family: "Inter"; + font-weight: 600 !important; } .monospaced-font { - font-family: "iA Writer Mono"; + font-family: "iA Writer Mono"; } .scanlined { - position: relative; - /* Add this */ + position: relative; + /* Add this */ } .scanlined::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px); - background-size: 2px 2px; - background-repeat: repeat; - pointer-events: none; - z-index: 9999; - /* Might want to lower this too */ + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px); + background-size: 2px 2px; + background-repeat: repeat; + pointer-events: none; + z-index: 9999; + /* Might want to lower this too */ } code { - font-family: var(--font-monospaced); + font-family: var(--font-monospaced); } p code { - color: var(--foreground); - background: #504945; - font-size: 14px; - padding: 0.2rem 0.3rem; - border-radius: var(--radius); - font-weight: 500; + color: var(--foreground); + background: #504945; + font-size: 14px; + padding: 0.2rem 0.3rem; + border-radius: var(--radius); + font-weight: 500; } .shiki { - padding: 1rem 1.2rem; - border-radius: 0; - overflow-x: auto; - margin: 1.5rem 0; - line-height: 1.3; - /* counter-reset: line; */ - font-family: var(--font-monospaced) !important; - font-size: 14px !important; + padding: 1rem 1.2rem; + border-radius: 0; + overflow-x: auto; + margin: 1.5rem 0; + line-height: 1.3; + /* counter-reset: line; */ + font-family: var(--font-monospaced) !important; + font-size: 14px !important; } diff --git a/src/pages/about.jsx b/src/pages/about.jsx index e90c689..330a70e 100644 --- a/src/pages/about.jsx +++ b/src/pages/about.jsx @@ -4,7 +4,7 @@ import portrait from "../images/portrait-compressed.jpg" const AboutPage = () => { return ( -
    +
    { const { posts } = usePosts() return ( -
    +
    @@ -23,7 +23,7 @@ const HomePage = () => { systems obscure
    -

    +

    Another software engineer with a blog. This is my technical scrapbook and digital garden.

    @@ -40,10 +40,10 @@ const HomePage = () => { posts={posts.filter((post) => post.tags.includes("highlight"))} /> -
    +
    -

    +

    {`projects`}

      diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 4b25c4a..c619c2d 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -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; } diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx index ce6fcd9..552aa8e 100644 --- a/src/templates/BlogTemplate.jsx +++ b/src/templates/BlogTemplate.jsx @@ -5,41 +5,41 @@ import { convertDate } from "@/utils/convertDate" import { usePosts } from "@/hooks/usePosts" const BlogTemplate = () => { - const { slug } = useParams() - const { posts } = usePosts() - const post = posts?.find((x) => x.slug === slug) + const { slug } = useParams() + const { posts } = usePosts() + const post = posts?.find((x) => x.slug === slug) - return ( - -
      - {!post ? ( -
      Loading...
      - ) : ( -
      -
      -

      - {post?.title} -

      -
      - -
      - {post?.tags?.map((tag, i) => ( - - {tag} - - ))} -
      -
      -
      + return ( + +
      + {!post ? ( +
      Loading...
      + ) : ( +
      +
      +

      + {post?.title} +

      +
      + +
      + {post?.tags?.map((tag, i) => ( + + {tag} + + ))} +
      +
      +
      -
      h2]:text-2xl [&>h2]:font-bold [&>h2]:my-4 [&>h2]:text-[#ebdbb2]! [&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]! [&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]! @@ -65,13 +65,13 @@ const BlogTemplate = () => { [&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted [&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right " - dangerouslySetInnerHTML={{ __html: post?.html }} - /> -
      - )} -
      -       - ) + dangerouslySetInnerHTML={{ __html: post?.html }} + /> +
      + )} +
      +       + ) } export default BlogTemplate diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx index cdb8e3d..a3eb6b9 100644 --- a/src/templates/MainTemplate.jsx +++ b/src/templates/MainTemplate.jsx @@ -3,66 +3,66 @@ import gruvboxComputer from "../images/gruvbox-computer.svg" import { Link } from "react-router" const Header = () => { - return ( -
      - -
      - ) + return ( +
      + +
      + ) } const Footer = () => { - return ( - - ) + return ( + + ) } const MainTemplate = ({ children }) => { - return ( -
      -
      -
      -
      {children}
      -
      -
      -
      - ) + return ( +
      +
      +
      +
      {children}
      +
      +
      + ) } export default MainTemplate