sirlilpanda/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed colours on books

Browse Source
This commit is contained in:
sirlilpanda
2026-04-19 17:52:55 +12:00
parent 5d958ff956
commit 54bb79d35a
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/articles/index.astro
View File

@@ -13,10 +13,34 @@ const posts = (await getCollection('blog')).sort(
); );
// will work this out later // will work this out later
const book_colours = [] const book_colours = [
"#fc5050", // red
"#fcb250", // orange
"#fcf179", // yellow
"#ccfc79", // green
"#86fc79", // green
"#79fca9", // aqua
"#7bfce9", // light blue
"#7baffc", // darker blue
"#977bfc", // purple
"#d798f9", // magenta
"#f998e9" // pink
]
const max_shelf_width = 980; const max_shelf_width = 980;
function hash(str) {
let hash_value = 5;
for (let i = 0; i < str.length; i++) {
const char_val = str.charCodeAt(i);
hash_value += (hash_value << 2) - hash_value + char_val;
}
return Math.abs(hash_value);
}
--- ---
<!doctype html> <!doctype html>
@@ -51,7 +75,7 @@ const max_shelf_width = 980;
// might change this to a compoent later // might change this to a compoent later
<a class="book-wrapper" href={`/articles/${book.id}/`}> <a class="book-wrapper" href={`/articles/${book.id}/`}>
<div class="book-mark" /> <div class="book-mark" />
<li class="book"> <li class="book" style={`background-color: ${book_colours[hash(book.data.title) % book_colours.length]};`}>
<h1 class="book-title"> <h1 class="book-title">
{book.data.title} {book.data.title}
</h1> </h1>
@@ -96,10 +120,9 @@ const max_shelf_width = 980;
<script is:inline define:vars={{max_shelf_width}}> <script is:inline define:vars={{max_shelf_width}}>
const books = document.getElementsByClassName("book")
for (let book of books) {
book.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
}
function resize_books() { function resize_books() {
@@ -234,6 +257,7 @@ const max_shelf_width = 980;
padding-left: 0.2em; padding-left: 0.2em;
padding-right: 0.2em; padding-right: 0.2em;
white-space: nowrap; white-space: nowrap;
color : black;
} }
p { p {
@@ -241,6 +265,7 @@ const max_shelf_width = 980;
padding: unset; padding: unset;
border-bottom: 0.1em red solid; border-bottom: 0.1em red solid;
width: 100%; width: 100%;
color : black;
} }
} }
@@ -339,6 +364,7 @@ const max_shelf_width = 980;
display: inline-block; display: inline-block;
writing-mode: sideways-lr; writing-mode: sideways-lr;
font-size: 1em; font-size: 1em;
color: #1f1f1f;
} }
.shelfs { .shelfs {