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

added some title explainer text

Browse Source
This commit is contained in:
panda
2026-04-14 21:17:01 +12:00
parent 166d080014
commit 3faf5f09a1
1 changed files with 78 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,23 @@ const max_shelf_width = 980;
<Header />
<main>
<section>
<div class="top-block">
<div class="header-poster">
<h2>Read some of my articles</h2>
<p>You can also check the list of articles and project i intend to write.</p>
</div>
<div class="todo-list">
<div class="pin"/>
<a href="/articles/todo">
<h5>TODO LIST:</h5>
<p class="scrible">scrible</p>
<p class="scrible">scrible</p>
<p class="scrible">scrible</p>
<p class="scrible">scrible</p>
</a>
</div>
</div>
<ul class="shelfs", id="shelfs">
<div class="shelf", id="main-shelf">
{posts.map(book => (
@@ -184,10 +201,65 @@ const max_shelf_width = 980;
<style>
.top-block {
display: flex;
flex-direction: row;
}
.pin {
margin-bottom: 0.2em;
width: 0.5em;
height: 0.5em;
background-color: red;
border-radius: 100%;
margin-left: 50%;
box-shadow: 0.1em 0.1em 2px 0px rgba(0,0,0,1);
transition: 150ms;
}
.todo-list {
margin-right: 2em;
padding-top: 0.5em;
/* padding-left: 0.5em; */
/* padding-right: 0.5em; */
width: fit-content;
max-height: fit-content;
background: linear-gradient(180deg, #FFFEED, #fff7d7);
transform: rotateZ(2deg);
border-radius: 1em;
padding-bottom: 0.5em;
transition: 150ms;
h5 {
padding-left: 0.2em;
padding-right: 0.2em;
white-space: nowrap;
}
p {
margin: unset;
padding: unset;
border-bottom: 0.1em red solid;
width: 100%;
}
}
.todo-list:hover {
transform: translateY(-0.5em);
box-shadow: 1px 15px 5px 0px rgba(0,0,0,0.14);
.pin {
box-shadow: 0em 0.1em 2px 0px rgba(0,0,0,1);
}
}
a {
color: unset;
}
.header-poster {
margin-right: 2em;
}
a:visited .book-mark {
transition: 100ms;
@@ -287,9 +359,9 @@ 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(1.1em) translateX(2em);
transform: translateY(1.8em) translateX(2em);
box-shadow: 0px 15px 10px 10px hsl(from var(--top-footer-colour) h s calc(l * 0.4));
height: 1.5em;
height: 0.8em;
}
.wall-shadow {
@@ -382,7 +454,9 @@ const max_shelf_width = 980;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: unset;
}
.header-poster h2 {
font-size: 2em;
}
}
</style>