Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: style improvements

Browse Source 
(cherry picked from commit e308bedff591263b33155cb222108915bf980e51)
This commit is contained in:
saicaca
2023-10-04 18:02:00 +08:00
parent 26408b0b7e
commit 52959f230f
7 changed files with 54 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/TitleCardNew.astro
View File

@@ -18,6 +18,7 @@ const className = Astro.props.class;
import ImageBox from "./misc/ImageBox.astro";
import ButtonTag from "./control/ButtonTag.astro";
import { Icon } from 'astro-icon/components';
import Button from "./control/Button.astro";
// tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
@@ -30,14 +31,14 @@ const coverWidth = "30%";
const { remarkPluginFrontmatter } = await entry.render();
---
<div class:list={["card-base flex flex-col-reverse lg:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
<div class:list={[" px-10 pt-4 lg:pt-7 pb-6 relative", {'w-full': !hasCover, "w-full lg:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
<div class:list={[" px-10 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
<a href={url}
class="transition w-full block font-bold mb-3 text-4xl
class="transition w-full block font-bold mb-3 text-3xl
text-black/90 dark:text-white/90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[26px] lg:before:top-[38px] before:left-5
before:absolute md:before:top-[35px] before:left-5
">
{title}
</a>
@@ -59,18 +60,30 @@ const { remarkPluginFrontmatter } = await entry.render();
{hasCover && <a href={url}
class:list={["group",
"max-h-[20vh] lg:max-h-none mx-4 mt-4 lg:mx-0 lg:mt-0",
"lg:w-[var(--coverWidth)] relative lg:absolute lg:top-3 lg:bottom-3 lg:right-3 rounded-xl overflow-hidden"
"max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
"md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden"
]} >
<div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
<div class="absolute z-20 w-full h-full flex items-center justify-center ">
<Icon name="material-symbols:chevron-right-rounded"
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl"></Icon>
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
</Icon>
</div>
<ImageBox src={cover}
class="w-full h-full">
</ImageBox>
</a>}
{!hasCover &&
<a href={url} class="hidden md:block">
<Button width="52px" height="full" class="absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)]">
<Icon name="material-symbols:chevron-right-rounded"
class="transition text-[var(--primary)] text-4xl mx-auto">
</Icon>
</Button>
</a>
}
</div>
<style lang="stylus" define:vars={{coverWidth}}>