interim commit
This commit is contained in:
parent
4858c1a68a
commit
741a1b6429
10 changed files with 332 additions and 326 deletions
|
|
@ -37,8 +37,8 @@ const EolasListing = () => {
|
|||
<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]! h2-home scanlined px-2">
|
||||
{`eolas recent`}
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home">
|
||||
{`Recent learning`}
|
||||
</h2>
|
||||
|
||||
{isLoading && <div>Loading...</div>}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import MetricBar from "./MetricBar"
|
|||
|
||||
const LanguagesChart = ({ chartData, error }) => {
|
||||
return (
|
||||
<div className="bg-sidebar p-3 my-4">
|
||||
<div className="bg-sidebar p-3 my-4 mx-2 rounded-2xl">
|
||||
<div className="text-muted-foreground text-sm pb-2">
|
||||
programming languages
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const Scorecard = ({ title, metric }) => {
|
||||
return (
|
||||
<div className="bg-sidebar p-3">
|
||||
<div className="bg-sidebar p-3 rounded-2xl">
|
||||
<div className="text-muted-foreground text-sm">{title}</div>
|
||||
<div className="text-lg">{metric}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const CodeStats = () => {
|
|||
<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]! h2-home scanlined px-2">
|
||||
<h2 className="text-3xl font-semibold mb-4 text-[#458588]! h2-home">
|
||||
{`code stats`}
|
||||
</h2>
|
||||
<div className="mb-4 text-sm text-muted">
|
||||
|
|
@ -79,7 +79,7 @@ const CodeStats = () => {
|
|||
{convertDateFriendly(data?.to)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mx-2">
|
||||
<Scorecard
|
||||
title="time coding"
|
||||
metric={
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
<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 scanlined px-2">
|
||||
<h2 className="text-3xl font-semibold mb-4 block h2-home">
|
||||
{`${title}`}
|
||||
</h2>
|
||||
{posts.map((post) => (
|
||||
<ul>
|
||||
<li className="mb-4">
|
||||
<div className="flex justify-between flex-col relative hover:bg-[#504945]">
|
||||
<div className="flex justify-between flex-col relative hover:bg-[#504945] hover:rounded-2xl p-2">
|
||||
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
|
||||
{convertDate(post.date)}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -17,31 +17,31 @@ body {
|
|||
}
|
||||
|
||||
.condensed {
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-weight: 500;
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-orange-light);
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
color: var(--color-green-light);
|
||||
}
|
||||
|
||||
.h2-home {
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Inter";
|
||||
font-family: "IBM Plex Sans";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
|
|
@ -73,6 +73,12 @@ code {
|
|||
font-family: var(--font-monospaced);
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: 1.125rem !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
p code {
|
||||
color: var(--foreground);
|
||||
background: #504945;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ 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"
|
||||
|
||||
const HomePage = () => {
|
||||
const { posts } = usePosts()
|
||||
|
|
@ -14,16 +13,17 @@ const HomePage = () => {
|
|||
<div className="space-my-8">
|
||||
<section className="space-y-4">
|
||||
<div className="gap-6 flex flex-col items-center sm:flex-row">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="md:w-80 w-50" />
|
||||
<div className="">
|
||||
<img
|
||||
src={gruvboxComputer}
|
||||
className="md:w-80 w-50 rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
|
||||
<div className="scanlined inline-block py-1 px-2">
|
||||
systems obscure
|
||||
</div>
|
||||
<h1 className="text-5xl font-bold py-3 text-center sm:text-left md:text-left">
|
||||
<div className="">systems obscure</div>
|
||||
</h1>
|
||||
<p className="text-center sm:text-left md:text-left text-muted font-medium">
|
||||
<p className="text-center sm:text-left md:text-left text-muted font-medium text-lg mt-1">
|
||||
A wizard who goes to bed early. This is my technical scrapbook
|
||||
and digital garden.
|
||||
</p>
|
||||
|
|
@ -40,16 +40,16 @@ const HomePage = () => {
|
|||
posts={posts.filter((post) => post.tags.includes("highlight"))}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto md:p-4 py-4 px-1 grow">
|
||||
<div className="space-my-8">
|
||||
<div className="container mx-auto md:p-4 py-4 px-1 grow mb-4">
|
||||
<div className="">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
|
||||
<h2 className="text-3xl font-semibold mb-4 text-[#d3869b]! h2-home">
|
||||
{`projects`}
|
||||
</h2>
|
||||
<ul>
|
||||
<ul className="p-2">
|
||||
<li className="pb-2">
|
||||
<a
|
||||
className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
|
||||
className="underline underline-offset-4 text-primary hover:text-primary/80 font-medium text-xl"
|
||||
href="https://eolas.systemsobscure.net"
|
||||
target="_blank"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
:root {
|
||||
--radius: 0.3rem;
|
||||
--background: #282828;
|
||||
--foreground: #ebdbb2;
|
||||
--foreground: #fbf1c7;
|
||||
--sidebar: #3c3836;
|
||||
--color-red-light: #fb4934;
|
||||
--color-orange-light: #fe8019;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-monospaced: "Jetbrains Mono";
|
||||
--font-sansserif: "Inter", sans-serif;
|
||||
--font-sansserif: "IBM Plex Sans", sans-serif;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@ const BlogTemplate = () => {
|
|||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-2">
|
||||
<h1 className="text-5xl font-bold mb-4 inline-block">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
<time datetime={convertDate(post?.date)} className="text-sm">
|
||||
<time datetime={convertDate(post?.date)} className="">
|
||||
{convertDate(post?.date)}
|
||||
</time>
|
||||
<div className="flex flex-wrap gap-3 align-center">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Link
|
||||
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
||||
className="text-primary underline underline-offset-3 hover:text-[#689d6a]"
|
||||
key={i}
|
||||
to={`/tags/${tag}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@ import { Link } from "react-router"
|
|||
const Header = () => {
|
||||
return (
|
||||
<header className="md:py-6 pb-4">
|
||||
<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
|
||||
<nav className="bg-sidebar container mx-auto justify-between flex gap-1 rounded-r-2xl">
|
||||
<Link to="/">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="w-11" />
|
||||
<div className="">
|
||||
<img src={gruvboxComputer} className="w-12" />
|
||||
</div>
|
||||
</Link>
|
||||
<ul class="flex space-x-4 px-4 py-2 text-sm">
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
class="text-primary hover:text-[#689d6a] condensed font-semibold text-xl"
|
||||
to="/posts"
|
||||
>
|
||||
posts
|
||||
|
|
@ -22,7 +22,7 @@ const Header = () => {
|
|||
</li>
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
class="text-primary hover:text-[#689d6a] condensed font-semibold text-xl"
|
||||
to="/about"
|
||||
>
|
||||
about
|
||||
|
|
@ -36,8 +36,8 @@ const Header = () => {
|
|||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
|
||||
<nav>
|
||||
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8 rounded-2xl p-2">
|
||||
<nav className="">
|
||||
<ul className="flex flex-row justify-start gap-4">
|
||||
<li className="flex flex-col items-center justify-center">
|
||||
<a
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue