restyle tweaks

src/components/LanguagesChart.jsx

@@ -2,9 +2,9 @@ import MetricBar from "./MetricBar"
 
 const LanguagesChart = ({ chartData, error }) => {
 	return (
-		<div className="bg-sidebar p-3 my-4">
+		<div style={{marginTop:'1rem'}}>
-			<div className="text-muted-foreground text-sm pb-2">
+			<div className="code-stat-label" style={{marginBottom: '.5rem'}}>
-				programming languages
+				Programming languages
 			</div>
 
 			{error ? (
@@ -18,7 +18,7 @@ const LanguagesChart = ({ chartData, error }) => {
 						metric={x.language}
 						hours={x.hours}
 						percentage={x.percentage}
-						color="#458588"
+						color="dodgerblue"
 					/>
 				))
 			)}

src/components/MetricBar.jsx

@@ -1,5 +1,5 @@
 const MetricBar = ({ metric, hours, percentage, color }) => (
-  <div style={{ marginBottom: "12px" }}>
+  <div style={{ marginBottom: "12px", margin: '.5rem' }}>
     <div
       style={{
         display: "flex",
@@ -9,7 +9,7 @@ const MetricBar = ({ metric, hours, percentage, color }) => (
       }}
     >
       <span style={{}}>{metric}</span>
-      <span style={{ color: "#bdae93" }}>
+      <span style={{ color: "black" }}>
         {hours}h ({percentage}%)
       </span>
     </div>
@@ -17,8 +17,7 @@ const MetricBar = ({ metric, hours, percentage, color }) => (
       style={{
         width: "100%",
         height: "8px",
-        backgroundColor: "#32302f",
+        backgroundColor: "lightgrey",
-        borderRadius: "4px",
         overflow: "hidden",
       }}
     >

src/components/ProjectsChart.jsx

@@ -2,8 +2,8 @@ import MetricBar from "./MetricBar"
 
 const ProjectsChart = ({ chartData, error }) => {
 	return (
-		<div className="bg-sidebar p-3 my-4">
+		<div style={{marginTop: '1rem'}}>
-			<div className="text-muted-foreground text-sm pb-2">projects</div>
+			<div className="code-stat-label">Repos</div>
 
 			{error ? (
 				<div>Data could not be found!</div>
@@ -16,11 +16,11 @@ const ProjectsChart = ({ chartData, error }) => {
 						metric={x.project}
 						hours={x.hours}
 						percentage={x.percentage}
-						color="#fe8019"
+						color="dodgerblue"
 					/>
 				))
 			)}
-			<div className="text-sm text-muted-foreground">
+			<div className="code-stats-disclaimer">
 				Data excludes workplace repos.
 			</div>
 		</div>

src/components/Scorecard.jsx

@@ -1,8 +1,8 @@
 const Scorecard = ({ title, metric }) => {
 	return (
-		<div className="bg-sidebar p-3">
+		<div className="code-stat-grid">
-			<div className="text-muted-foreground text-sm">{title}</div>
+			<div className="code-stat-label">{title}</div>
-			<div className="text-lg">{metric}</div>
+			<div className="code-stat-metric">{metric}</div>
 		</div>
 	)
 }

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 (
-    <div className="container mx-auto py-4 px-1 md:p-4 grow ">
+    <div className="">
-      <div className="space-my-8">
+      <div className="">
-        <section className="container">
+        <section className="">
-          <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
+          <div className="">
-            <h2 className="text-2xl font-semibold mb-4 text-[#458588]!  h2-home scanlined px-2">
+            <h2 className="">
-              {`code stats`}
+              {`Code stats`}
             </h2>
-            <div className="mb-4 text-sm text-muted">
+            <div className="code-stat-grid">
-              {convertDateFriendly(data?.from)} -{" "}
+              <span className="code-stat-label" style={{marginRight: '2rem'}}>Period:</span>
-              {convertDateFriendly(data?.to)}
+              <span className="code-stat-metric">{convertDateFriendly(data?.from)} -{" "}
+              {convertDateFriendly(data?.to)}</span>
             </div>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="">
             <Scorecard
-              title="time coding"
+              title="Total time:"
               metric={
                 error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
               }
             />
 
             <Scorecard
-              title="main project"
+              title="Main project"
               metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
             />
 
-            <Scorecard
+            
-              title="OS"
-              metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
-            />
           </div>
           <LanguagesChart chartData={languagesChartData} error={error} />
           <ProjectsChart chartData={projectsChartData} error={error} />
-          <div className="text-sm text-center text-muted-foreground">
+          <div className="code-stats-disclaimer">
             Data sourced from my self-hosted{" "}
             <a
               href="https://wakapi.dev/"
               target="__blank"
-              className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
+              className=""
             >
               Wakapi
             </a>{" "}

src/containers/PostListing.jsx

@@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
           {posts.map((post) => (
             <ul className="no-bullets">
               <li className="">
-                <div className="">
+                <div className="post-listing-item">
                   <span style={{ marginRight: '1rem' }}>
                     {convertDate(post.date)}
                   </span>

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;
+  display: flex;
-	list-style: none;
+  list-style: none;
-	gap: .5rem;
+  gap: 0.5rem;
-	margin: 0;
+  margin: 0;
-	padding: 0;
+  padding: 0;
 }
 
 .plain-link {
-	color: inherit;
+  color: inherit;
-	text-decoration: none;
+  text-decoration: none;
 }
 
 .no-bullets {
-	list-style: none;
+  list-style: none;
-	padding-left: 0;
+  padding-left: 0;
 }
 
 blockquote {
-	font-style: italic;
+  font-style: italic;
 }
 
 figcaption {
-	text-align: center;
+  text-align: center;
-	font-style: italic;
+  font-style: italic;
+  font-size: 14px;
 }
 
 figure {
-	text-align: center;
+  text-align: center;
 }
 
 figure img {
-	width: 100%;
+  width: 100%;
-	max-width: 500px;
+  max-width: 500px;
-	min-width: 300px;
+  min-width: 300px;
-	height: auto;
+  height: auto;
 }
 
 .shiki {
-	padding: 1rem;
+  padding: 1rem;
-	border: 1pt solid black;
+  /* 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;
+}

src/pages/about.jsx

@@ -57,29 +57,33 @@ const AboutPage = () => {
 					>
 						Arria NLG
 					</a>{" "}
-					and in several web developer roles. Before software I was a
+					and in several web developer roles. Before software, I was a
 					teacher.{" "}
 				</p>
 
+				<p>I am licenced amateur radio operator. My callsign is ME7SYO.</p>
+
 				<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
 					Some things I like:
-					<ul className="no-bullets">
+					<ul className="no-bullets"> 
-						<li className="">🐶 Staffies and other bull-breeds</li>
+						<li className=""><span className="about-li-padding">🐶</span>Staffies and other bull-breeds</li>
-						<li className="">🎼 Classical music (Haydn, Mozart, JSB)</li>
+						<li className=""><span className="about-li-padding">🎼</span>Classical music (Haydn, Mozart, JSB)</li>
-						<li className="">🛸 Science fiction </li>
+						<li className=""><span className="about-li-padding">🛸</span>Science fiction </li>
+						<li className=""><span className="about-li-padding">🐦‍⬛</span>Bird watching</li>
 					</ul>
 				</p>
 
 				<p className="">
 					Some things I'm interested in:
 					<ul className="no-bullets">
-						<li className="">🧑‍💻 Self-hosting and digital resiliance</li>
+						<li className=""><span className="about-li-padding">🧑‍💻</span>Self-hosting and digital resiliance</li>
-						<li className="">🖳 The history of computing and networks</li>
+						
-						<li className="">☸️ Buddhism</li>
+						
-						{/*
+						<li className=""><span className="about-li-padding">🖥️</span>The history of computing and networks</li>
+						<li className=""><span className="about-li-padding">☸️</span>Buddhism</li>
+						<li className=""><span className="about-li-padding">📡</span>Amateur radio</li>
+						<li className=""><span className="about-li-padding">👽</span>SETI</li>
 
-					<li className="">📡 Civil communications infrastructure</li>
-					*/}
 					</ul>
 				</p>
 			</div>

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 (
 		<MainTemplate>
-			<p>A wizard who goes to bed early. This is my technical scrapbook
+			<p>A wizard who goes to bed early. This is <Link to="/about">my</Link> technical scrapbook
 				and digital garden.
 			</p>
 
@@ -23,8 +23,7 @@ const HomePage = () => {
 			/>
 
 
-			{/* <CodeStats />
+			<CodeStats />
-			<EolasListing /> */}
 		</MainTemplate>
 	)
 }

src/templates/BlogTemplate.jsx

@@ -12,7 +12,7 @@ const BlogTemplate = () => {
 
   return (
     <MainTemplate>
-      <div className="container mx-auto py-4 px-1 md:p-4 grow">
+      <div className="">
         {!post ? (
           <div>Loading...</div>
         ) : (
@@ -25,7 +25,8 @@ const BlogTemplate = () => {
                 <time datetime={convertDate(post?.date)} className="text-sm">
                   {convertDateFriendly(post?.date)}
                 </time>
-                <div className="flex flex-wrap gap-3 align-center">
+                <div className="">
+                  <span>Tag(s): </span>
                   {post?.tags?.map((tag, i) => (
                     <Link
                       style={{ marginRight: '0.5rem' }}
@@ -40,10 +41,7 @@ const BlogTemplate = () => {
             </header>
 
             <div
-              className="
+             dangerouslySetInnerHTML={{ __html: post?.html }}
-
-								"
-              dangerouslySetInnerHTML={{ __html: post?.html }}
             />
           </article>
         )}

src/templates/MainTemplate.jsx

@@ -5,12 +5,16 @@ const Header = () => {
   return (
     <header>
       <nav className="">
-        <h1>
+        <h1 className="site-title">
           <Link
             className="plain-link"
             to="/">Systems Obscure</Link>
         </h1>
         <ul className="header-links">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+ 
           <li>
             <Link to="/posts">Posts</Link>
           </li>
@@ -23,7 +27,7 @@ const Header = () => {
               href="https://forgejo.systemsobscure.net/thomasabishop"
               target="blank"
             >
-              Forgejo
+              Forgejo (ext.)
             </a>
           </li>