further restyle tweaks

src/components/LanguagesChart.jsx

@@ -2,8 +2,14 @@ import MetricBar from "./MetricBar"
 
 const LanguagesChart = ({ chartData, error }) => {
   return (
-		<div style={{marginTop:'1rem'}}>
+    <div style={{ marginTop: "1rem" }}>
-			<div className="code-stat-label" style={{marginBottom: '.5rem'}}>
+      <div
+        className="code-stat-label"
+        style={{
+          paddingBottom: ".5rem",
+          marginBottom: ".5rem",
+        }}
+      >
         Programming languages
       </div>
 
@@ -18,7 +24,7 @@ const LanguagesChart = ({ chartData, error }) => {
             metric={x.language}
             hours={x.hours}
             percentage={x.percentage}
-						color="dodgerblue"
+            color="black"
           />
         ))
       )}

src/components/MetricBar.jsx

@@ -1,5 +1,5 @@
 const MetricBar = ({ metric, hours, percentage, color }) => (
-  <div style={{ marginBottom: "12px", margin: '.5rem' }}>
+	<div style={{ marginBottom: "12px" }}>
 		<div
 			style={{
 				display: "flex",

src/components/ProjectsChart.jsx

@@ -2,8 +2,16 @@ import MetricBar from "./MetricBar"
 
 const ProjectsChart = ({ chartData, error }) => {
   return (
-		<div style={{marginTop: '1rem'}}>
+    <div style={{ marginTop: "1rem" }}>
-			<div className="code-stat-label">Repos</div>
+      <div
+        className="code-stat-label"
+        style={{
+          paddingBottom: ".5rem",
+          marginBottom: ".5rem",
+        }}
+      >
+        Repos
+      </div>
 
       {error ? (
         <div>Data could not be found!</div>
@@ -16,7 +24,7 @@ const ProjectsChart = ({ chartData, error }) => {
             metric={x.project}
             hours={x.hours}
             percentage={x.percentage}
-						color="dodgerblue"
+            color="black"
           />
         ))
       )}

src/containers/CodeStats.jsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
+
 import wakapiApi from "../api/wakapi-api"
 import { convertDateFriendly } from "../utils/convertDate"
 import Scorecard from "../components/Scorecard"
@@ -32,7 +33,9 @@ const CodeStats = () => {
     data &&
     data?.projects.filter(
       (project) =>
-        !project.key.includes("gp-") && !project.key.includes("unknown") && !project.key.includes("amber")
+        !project.key.includes("gp-") &&
+        !project.key.includes("unknown") &&
+        !project.key.includes("amber")
     )
 
   const personalProjectsSorted =
@@ -67,43 +70,52 @@ const CodeStats = () => {
       .slice(0, 4)
 
   return (
-    <div className="">
+    <div className="code-stats-sect">
       <div className="">
         <section className="">
           <div className="">
-            <h2 className="">
+            <h2 className="big-title">{`Code this month`}</h2>
-              {`Code stats`}
-            </h2>
-            <div className="code-stat-grid">
-              <span className="code-stat-label" style={{marginRight: '2rem'}}>Period:</span>
-              <span className="code-stat-metric">{convertDateFriendly(data?.from)} -{" "}
-              {convertDateFriendly(data?.to)}</span>
-            </div>
-          </div>
-          <div className="">
-            <Scorecard
-              title="Total time:"
-              metric={
-                error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
-              }
-            />
-
-            <Scorecard
-              title="Main project"
-              metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
-            />
 
+            {/*
+            <table
+              border="1"
+              width="100%"
+              style={{ borderCollapse: "collapse" }}
+            >
+              <tr>
+                <td style={{ paddingLeft: "4px" }}>Period:</td>
+                <td style={{ paddingLeft: "4px" }}>
+                  {convertDateFriendly(data?.from)} -{" "}
+                  {convertDateFriendly(data?.to)}
+                </td>
+              </tr>
+              <tr>
+                <td style={{ paddingLeft: "4px" }}>Total time:</td>
+                <td style={{ paddingLeft: "4px" }}>
+                  {error
+                    ? "Error"
+                    : isLoading
+                      ? "Loading..."
+                      : grandTotalFormatted}
+                </td>
+              </tr>
+              <tr>
+                <td style={{ paddingLeft: "4px" }}>Main project:</td>
+                <td style={{ paddingLeft: "4px" }}>
+                  {error ? "Error" : isLoading ? "Loading..." : mainProject}
+                </td>
+              </tr>
+            </table>
       
+*/}
           </div>
+
           <LanguagesChart chartData={languagesChartData} error={error} />
+
           <ProjectsChart chartData={projectsChartData} error={error} />
           <div className="code-stats-disclaimer">
             Data sourced from my self-hosted{" "}
-            <a
+            <a href="https://wakapi.dev/" target="__blank" className="">
-              href="https://wakapi.dev/"
-              target="__blank"
-              className=""
-            >
               Wakapi
             </a>{" "}
             instance.

src/containers/PostListing.jsx

@@ -8,21 +8,15 @@ const PostListing = ({ posts, title, showAllButton }) => {
 		<div className="">
 			<div className="">
 				<section className="">
-          <h2 className="">
+					<h2 className="big-title">{`${title}`}</h2>
-            {`${title}`}
-          </h2>
 					{posts.map((post) => (
 						<ul className="no-bullets">
 							<li className="">
 								<div className="post-listing-item">
-                  <span style={{ marginRight: '1rem' }}>
+									<span style={{ marginRight: "1rem" }}>
 										{convertDate(post.date)}
 									</span>
-                  <Link
+									<Link to={`/posts/${post.slug}`} key={post.slug} className="">
-                    to={`/posts/${post.slug}`}
-                    key={post.slug}
-                    className=""
-                  >
 										{post.title}
 									</Link>
 								</div>

src/index.css

@@ -15,20 +15,35 @@
     display: flex;
     flex-direction: column;
   }
+
+  .title-link {
+    letter-spacing: 0 !important;
+  }
 }
 
 .post-listing-item {
   display: flex;
 }
 
-h1.site-title {
+html {
-  font-weight: 800;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
 }
 
 .header-links {
   display: flex;
   list-style: none;
-  gap: 0.5rem;
+  gap: 1rem;
   margin: 0;
   padding: 0;
 }
@@ -71,6 +86,10 @@ figure img {
   overflow: auto;
 }
 
+.code-stats-sect {
+  font-family: sans-serif !important;
+}
+
 .code-stat-grid {
   display: flex;
   flex-direction: row;
@@ -79,8 +98,8 @@ figure img {
 }
 
 .code-stat-label {
-  font-weight: 500;
+  font-weight: bold;
-  font-style: italic;
+  font-family: sans-serif;
 }
 
 .code-stats-disclaimer {
@@ -92,3 +111,18 @@ figure img {
 .about-li-padding {
   padding-right: 1rem;
 }
+
+h1.site-title,
+h1.post-title {
+  margin-bottom: 0.75rem;
+}
+
+.big-title {
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid black;
+}
+
+.blog-meta {
+  font-size: 14px;
+}

src/pages/home.jsx

@@ -10,20 +10,17 @@ const HomePage = () => {
   const { posts } = usePosts()
   return (
     <MainTemplate>
-			<p>A wizard who goes to bed early. This is <Link to="/about">my</Link> technical scrapbook
+      <p>
-				and digital garden.
+        A wizard who goes to bed early. This is <Link to="/about">my</Link>{" "}
+        technical scrapbook and digital garden.
       </p>
 
-
       <PostListing title="Recent posts" posts={posts.slice(0, 5)} />
 
       <PostListing
         title="Highlights"
         posts={posts.filter((post) => post.tags.includes("highlight"))}
       />
-
-
-			<CodeStats />
     </MainTemplate>
   )
 }

src/templates/BlogTemplate.jsx

@@ -17,11 +17,19 @@ const BlogTemplate = () => {
           <div>Loading...</div>
         ) : (
           <article className="">
-            <header className="">
+            <header
-              <h1 className="">
+              className="big-title"
-                {post?.title}
+              style={{ paddingBottom: "1rem", marginBottom: "2rem" }}
-              </h1>
+            >
-              <div className="">
+              <h1 className="post-title">{post?.title}</h1>
+              <div
+                className="blog-meta"
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: "1rem",
+                }}
+              >
                 <time datetime={convertDate(post?.date)} className="text-sm">
                   {convertDateFriendly(post?.date)}
                 </time>
@@ -29,7 +37,7 @@ const BlogTemplate = () => {
                   <span>Tag(s): </span>
                   {post?.tags?.map((tag, i) => (
                     <Link
-                      style={{ marginRight: '0.5rem' }}
+                      style={{ marginRight: "0.5rem" }}
                       key={i}
                       to={`/tags/${tag}`}
                     >
@@ -40,9 +48,7 @@ const BlogTemplate = () => {
               </div>
             </header>
 
-            <div
+            <div dangerouslySetInnerHTML={{ __html: post?.html }} />
-             dangerouslySetInnerHTML={{ __html: post?.html }}
-            />
           </article>
         )}
       </div>

src/templates/MainTemplate.jsx

@@ -6,9 +6,9 @@ const Header = () => {
     <header>
       <nav className="">
         <h1 className="site-title">
-          <Link
+          <Link className="title-link plain-link" to="/">
-            className="plain-link"
+            Systems Obscure
-            to="/">Systems Obscure</Link>
+          </Link>
         </h1>
         <ul className="header-links">
           <li>
@@ -27,10 +27,9 @@ const Header = () => {
               href="https://forgejo.systemsobscure.net/thomasabishop"
               target="blank"
             >
-              Forgejo (ext.)
+              Code
             </a>
           </li>
-
         </ul>
       </nav>
     </header>
@@ -70,3 +69,4 @@ const MainTemplate = ({ children }) => {
 export default MainTemplate
 //antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper
 //main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0
+