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

fixed shadows underbook case

Browse Source
This commit is contained in:
panda
2026-03-30 09:17:05 +13:00
parent f65f662c16
commit 25d128c2fd
1 changed files with 51 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,7 +43,11 @@ const max_shelf_width = 980;
</div> </div>
</ul> </ul>
<div class="feet"> <div class="feet">
<div class="shadow"></div>
<div class="wall-shadow"></div>
<div class="foot-right"></div> <div class="foot-right"></div>
<div class="foot-back-right"></div>
<div class="foot-back-left"></div>
<div class="foot-left"></div> <div class="foot-left"></div>
</div> </div>
</section> </section>
@@ -71,7 +75,7 @@ const max_shelf_width = 980;
)) ))
} --> } -->
<script is:inline define:vars={{posts, max_shelf_width}}> <script is:inline define:vars={{max_shelf_width}}>
const books = document.getElementsByClassName("book") const books = document.getElementsByClassName("book")
@@ -210,6 +214,7 @@ const max_shelf_width = 980;
background: unset; background: unset;
border: unset; border: unset;
padding-bottom: unset; padding-bottom: unset;
transform: translateY(2em);
} }
@@ -257,14 +262,31 @@ const max_shelf_width = 980;
} }
.feet { .feet {
width: 100%;
} }
.shadow {
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);
box-shadow: 0px 15px 10px 10px hsl(from var(--top-footer-colour) h s calc(l * 0.4));
height: 1.5em;
}
.wall-shadow {
position: absolute;
background-color: hsl(from var(--background-colour) h calc(s * 0.2) calc(l*0.2));
width: calc(100% - 8em);
transform: translateX(3em);
height: 2em;
}
.foot-left { .foot-left {
width: 2em; width: 2em;
height: 4em; height: 4em;
background: gray; background: rgb(97, 97, 97);
box-shadow: var(--box-shadow), inset 0px 2em 25px -0.4em #313131; box-shadow: inset 0px 20px 25px -0.4em #313131;
transform: translateX(2em); transform: translateX(2em);
border-bottom-left-radius: 0.5em; border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em; border-bottom-right-radius: 0.5em;
@@ -273,15 +295,38 @@ const max_shelf_width = 980;
.foot-right { .foot-right {
width: 2em; width: 2em;
height: 4em; height: 4em;
background: gray; background: rgb(97, 97, 97);
float: right; float: right;
box-shadow: var(--box-shadow), inset 0px 2em 25px -0.4em #313131; box-shadow: inset 0px 2em 25px -0.4em #313131;
transform: translateX(-2em); transform: translateX(-2em);
border-bottom-left-radius: 0.5em; border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em; border-bottom-right-radius: 0.5em;
} }
.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(7em);
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.foot-back-right {
width: 1.2em;
height: 3em;
background: rgb(26, 26, 26);
float: right;
box-shadow: inset 0px 2em 25px -0.4em #1f1f1f;
transform: translateX(-5em);
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
</style> </style>