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

fixed styling and added a book mark for active tags

Browse Source
This commit is contained in:
panda
2026-03-30 23:02:23 +13:00
parent 321832affa
commit d1303280d9
1 changed files with 74 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,6 +33,7 @@ const max_shelf_width = 980;
{posts.map(book => (
// might change this to a compoent later
<a class="book-wrapper" href={`/articles/${book.id}/`}>
<div class="book-mark" />
<li class="book">
<h1 class="book-title">
{book.data.title}
@@ -159,10 +160,6 @@ const max_shelf_width = 980;
<style is:inline>
a {
color: unset;
bottom: 0;
}
.shelf {
padding-left: 2em;
@@ -189,7 +186,39 @@ const max_shelf_width = 980;
a {
color: unset;
bottom: 0;
}
a:visited .book-mark {
transition: 100ms;
height: 0.3em;
width: 0.5em;
background-color: hsl(0, 70%, 50%);
z-index: 99;
transform: translateY(0.2em) translateX(0.2em);
}
a:visited .book-mark:before,
a:visited .book-mark:after {
content: '';
display: block;
position: absolute;
transform: translateY(0.2em);
border-top: 0.5em solid hsl(0, 70%, 50%);
}
a:visited .book-mark:before {
right: 0;
border-left: 0.25em solid transparent;
}
a:visited .book-mark:after {
left: 0;
border-right: 0.25em solid transparent;
}
a:visited .book-mark {
transform: translateY(-0.5em);
}
.shelf {
@@ -217,16 +246,6 @@ const max_shelf_width = 980;
transform: translateY(2em);
}
@media (max-width: 720px) {
main {
padding: unset;
max-width: 90vw;
background: unset;
border: unset;
}
}
.book {
max-width: fit-content;
padding-left: 0.1em;
@@ -268,7 +287,7 @@ const max_shelf_width = 980;
position: absolute;
background-color: hsl(from var(--top-footer-colour) h s calc(l * 0.4));
width: calc(100% - 6em);
transform: translateY(2em) translateX(2em);
transform: translateY(1.1em) translateX(2em);
box-shadow: 0px 15px 10px 10px hsl(from var(--top-footer-colour) h s calc(l * 0.4));
height: 1.5em;
}
@@ -326,6 +345,45 @@ const max_shelf_width = 980;
border-bottom-right-radius: 0.5em;
}
@media (max-width: 720px) {
main {
padding: unset;
max-width: 90vw;
background: unset;
border: unset;
}
.wall-shadow {
transform: translateX(4em);
}
.shadow {
width: calc(100% - 4em);
transform: translateY(2em) translateX(2em);
}
.foot-back-left {
position: absolute;
width: 1.2em;
height: 3em;
background: rgb(26, 26, 26);
box-shadow: inset 0px 2em 25px -0.4em #1f1f1f;
transform: translateX(3.5em);
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.foot-back-right {
width: 0.6em;
height: 3em;
background: rgb(26, 26, 26);
float: right;
box-shadow: inset 0px 2em 25px -0.4em #1f1f1f;
transform: translateX(-2em);
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: unset;
}
}
</style>