From dbf853be9e1495af6ab68ce1687f12e74b343e21 Mon Sep 17 00:00:00 2001 From: thomasabishop Date: Wed, 11 Mar 2026 16:06:45 +0000 Subject: [PATCH] restyle tweaks --- src/components/LanguagesChart.jsx | 8 +-- src/components/MetricBar.jsx | 7 +-- src/components/ProjectsChart.jsx | 8 +-- src/components/Scorecard.jsx | 6 +- src/containers/CodeStats.jsx | 36 ++++++------ src/containers/PostListing.jsx | 2 +- src/index.css | 92 ++++++++++++++++++++++++------- src/pages/about.jsx | 26 +++++---- src/pages/home.jsx | 7 +-- src/templates/BlogTemplate.jsx | 10 ++-- src/templates/MainTemplate.jsx | 8 ++- 11 files changed, 132 insertions(+), 78 deletions(-) diff --git a/src/components/LanguagesChart.jsx b/src/components/LanguagesChart.jsx index b54d5f2..73d15a3 100644 --- a/src/components/LanguagesChart.jsx +++ b/src/components/LanguagesChart.jsx @@ -2,9 +2,9 @@ import MetricBar from "./MetricBar" const LanguagesChart = ({ chartData, error }) => { return ( -
-
- programming languages +
+
+ Programming languages
{error ? ( @@ -18,7 +18,7 @@ const LanguagesChart = ({ chartData, error }) => { metric={x.language} hours={x.hours} percentage={x.percentage} - color="#458588" + color="dodgerblue" /> )) )} diff --git a/src/components/MetricBar.jsx b/src/components/MetricBar.jsx index 1640d10..66d0e7c 100644 --- a/src/components/MetricBar.jsx +++ b/src/components/MetricBar.jsx @@ -1,5 +1,5 @@ const MetricBar = ({ metric, hours, percentage, color }) => ( -
+
( }} > {metric} - + {hours}h ({percentage}%)
@@ -17,8 +17,7 @@ const MetricBar = ({ metric, hours, percentage, color }) => ( style={{ width: "100%", height: "8px", - backgroundColor: "#32302f", - borderRadius: "4px", + backgroundColor: "lightgrey", overflow: "hidden", }} > diff --git a/src/components/ProjectsChart.jsx b/src/components/ProjectsChart.jsx index 44a8274..707d363 100644 --- a/src/components/ProjectsChart.jsx +++ b/src/components/ProjectsChart.jsx @@ -2,8 +2,8 @@ import MetricBar from "./MetricBar" const ProjectsChart = ({ chartData, error }) => { return ( -
-
projects
+
+
Repos
{error ? (
Data could not be found!
@@ -16,11 +16,11 @@ const ProjectsChart = ({ chartData, error }) => { metric={x.project} hours={x.hours} percentage={x.percentage} - color="#fe8019" + color="dodgerblue" /> )) )} -
+
Data excludes workplace repos.
diff --git a/src/components/Scorecard.jsx b/src/components/Scorecard.jsx index fa2e1dd..71234b1 100644 --- a/src/components/Scorecard.jsx +++ b/src/components/Scorecard.jsx @@ -1,8 +1,8 @@ const Scorecard = ({ title, metric }) => { return ( -
-
{title}
-
{metric}
+
+
{title}
+
{metric}
) } diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx index 9cdc912..e48daaa 100644 --- a/src/containers/CodeStats.jsx +++ b/src/containers/CodeStats.jsx @@ -32,7 +32,7 @@ const CodeStats = () => { data && data?.projects.filter( (project) => - !project.key.includes("gp-") && !project.key.includes("unknown") + !project.key.includes("gp-") && !project.key.includes("unknown") && !project.key.includes("amber") ) const personalProjectsSorted = @@ -67,44 +67,42 @@ const CodeStats = () => { .slice(0, 4) return ( -
-
-
-
-

- {`code stats`} +
+
+
+
+

+ {`Code stats`}

-
- {convertDateFriendly(data?.from)} -{" "} - {convertDateFriendly(data?.to)} +
+ Period: + {convertDateFriendly(data?.from)} -{" "} + {convertDateFriendly(data?.to)}
-
+
- +
-
+
Data sourced from my self-hosted{" "} Wakapi {" "} diff --git a/src/containers/PostListing.jsx b/src/containers/PostListing.jsx index e70ad27..a7a48ce 100644 --- a/src/containers/PostListing.jsx +++ b/src/containers/PostListing.jsx @@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => { {posts.map((post) => (
  • -
    +
    {convertDate(post.date)} diff --git a/src/index.css b/src/index.css index 386e8f1..28eee42 100644 --- a/src/index.css +++ b/src/index.css @@ -1,42 +1,94 @@ +@media (min-width: 768px) { + main { + max-width: 768px; + margin: 0 1.5rem; + } + + .post-listing-item { + display: flex; + flex-direction: row; + } +} + +@media (max-width: 768px) { + .post-listing-item { + display: flex; + flex-direction: column; + } +} + +.post-listing-item { + display: flex; +} + +h1.site-title { + font-weight: 800; +} + .header-links { - display: flex; - list-style: none; - gap: .5rem; - margin: 0; - padding: 0; + display: flex; + list-style: none; + gap: 0.5rem; + margin: 0; + padding: 0; } .plain-link { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .no-bullets { - list-style: none; - padding-left: 0; + list-style: none; + padding-left: 0; } blockquote { - font-style: italic; + font-style: italic; } figcaption { - text-align: center; - font-style: italic; + text-align: center; + font-style: italic; + font-size: 14px; } figure { - text-align: center; + text-align: center; } figure img { - width: 100%; - max-width: 500px; - min-width: 300px; - height: auto; + width: 100%; + max-width: 500px; + min-width: 300px; + height: auto; } .shiki { - padding: 1rem; - border: 1pt solid black; -} \ No newline at end of file + padding: 1rem; + /* border: 1pt solid black; */ + background-color: whitesmoke !important; + overflow: auto; +} + +.code-stat-grid { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 0.5rem; +} + +.code-stat-label { + font-weight: 500; + font-style: italic; +} + +.code-stats-disclaimer { + font-style: italic; + font-size: 14px; + text-align: center; +} + +.about-li-padding { + padding-right: 1rem; +} diff --git a/src/pages/about.jsx b/src/pages/about.jsx index 380237a..88d4212 100644 --- a/src/pages/about.jsx +++ b/src/pages/about.jsx @@ -57,29 +57,33 @@ const AboutPage = () => { > Arria NLG {" "} - and in several web developer roles. Before software I was a + and in several web developer roles. Before software, I was a teacher.{" "}

    +

    I am licenced amateur radio operator. My callsign is ME7SYO.

    +

    Some things I like: -

      -
    • 🐢 Staffies and other bull-breeds
      • -
    • 🎼 Classical music (Haydn, Mozart, JSB)
      • -
    • πŸ›Έ Science fiction
      • +
        +
      • 🐢Staffies and other bull-breeds
        • +
      • 🎼Classical music (Haydn, Mozart, JSB)
        • +
      • πŸ›ΈScience fiction
        • +
      • πŸ¦β€β¬›Bird watching

      Some things I'm interested in:

        -
      • πŸ§‘β€πŸ’» Self-hosting and digital resiliance
        • -
      • πŸ–³ The history of computing and networks
        • -
      • ☸️ Buddhism
        • - {/* +
      • πŸ§‘β€πŸ’»Self-hosting and digital resiliance
        • + + +
      • πŸ–₯️The history of computing and networks
        • +
      • ☸️Buddhism
        • +
      • πŸ“‘Amateur radio
        • +
      • πŸ‘½SETI
        • -
      • πŸ“‘ Civil communications infrastructure
        • - */}

    diff --git a/src/pages/home.jsx b/src/pages/home.jsx index b65c911..2001d45 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -4,13 +4,13 @@ import { usePosts } from "@/hooks/usePosts" import gruvboxComputer from "../images/gruvbox-computer.svg" import EolasListing from "@/components/EolasListing" import CodeStats from "../containers/CodeStats" -// import TodayILearned from "@/containers/TodayILearned" +import { Link } from "react-router" const HomePage = () => { const { posts } = usePosts() return ( -

    A wizard who goes to bed early. This is my technical scrapbook +

    A wizard who goes to bed early. This is my technical scrapbook and digital garden.

    @@ -23,8 +23,7 @@ const HomePage = () => { /> - {/* - */} +     ) } diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx index 42662db..f70a52c 100644 --- a/src/templates/BlogTemplate.jsx +++ b/src/templates/BlogTemplate.jsx @@ -12,7 +12,7 @@ const BlogTemplate = () => { return ( -
    +
    {!post ? (
    Loading...
    ) : ( @@ -25,7 +25,8 @@ const BlogTemplate = () => { -
    +
    + Tag(s): {post?.tags?.map((tag, i) => ( {
    )} diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx index 25541c3..720426c 100644 --- a/src/templates/MainTemplate.jsx +++ b/src/templates/MainTemplate.jsx @@ -5,12 +5,16 @@ const Header = () => { return (