sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ add books on the shelf in library

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-05-09 23:04:58 +02:00
parent ca8849e280
commit da9969a82c
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/pages/logs/books.astro
View file

@ -34,11 +34,18 @@ const today = new Date();
<SectionContainer> <SectionContainer>
<main class="flex flex-col gap-4 mt-4"> <main class="flex flex-col gap-4 mt-4">
<h1 class="text-3xl font-extrabold">📚 ¿Dónde está la biblioteca?</h1> <h1 class="text-3xl font-extrabold">📚 ¿Dónde está la biblioteca?</h1>
<h2 class="text-xl font-semibold">{today.getFullYear()} - Currently Reading:</h2> <h2 class="text-xl font-semibold">on the shelf</h2>
<p>📖 Maskiner som tenker</p> <ul class="flex flex-col text-s gap-2 text-l">
{sortedYears.map(year => ( <li class="borderbottom">📚 Dune</li>
<li class="borderbottom">📚 The Intelligent Investor (NO)</li>
<li class="borderbottom">📚 The Summit of The Gods: Vol.3 - Vol.5</li>
<li class="borderbottom">📚 Star Wars: The Tales of Kenobi</li>
</ul>
<h2 class="text-xl font-semibold">on the nightstand</h2>
<p class="borderbottom">📖 Maskiner som tenker</p>
{sortedYears.map(year => (
<section> <section>
<div class="flex items-center gap-2 text-xl font-semibold mb-2">{year} - Finished <p class="text-xs">({booksByYear[year].length} entries)</p></div> <div class="flex items-center gap-2 text-xl font-semibold mb-2">{year}<p class="text-xs">({booksByYear[year].length} entries)</p></div>
<ul> <ul>
{ {
booksByYear[year].map((book) => ( booksByYear[year].map((book) => (

1
src/styles/global.css
View file

@ -110,6 +110,7 @@ p {
.borderbottom { .borderbottom {
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: var(--dark-3); border-color: var(--dark-3);
font-size: large;
} }
.dark .borderbottom { .dark .borderbottom {