Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: style and animation improvements 

(cherry picked from commit 69deabde36f96a96bc3c69775fa5a9b4eead0f01)
This commit is contained in:
saicaca 2023-10-16 22:45:30 +08:00
parent eb7c408b6a
commit dd9adb2ed6
11 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/GlobalStyles.astro
View File

@ -63,10 +63,10 @@ color_set({
--btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
--btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))
--btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.2 0.02 var(--hue))
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.17 0.017 var(--hue))
--btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.17 0.017 var(--hue))
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.19 0.017 var(--hue))
--btn-card-bg-hover: oklch(0.96 0.015 var(--hue)) oklch(0.3 0.03 var(--hue))
--btn-card-bg-hover: oklch(0.98 0.005 var(--hue)) oklch(0.3 0.03 var(--hue))
--btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))
--enter-btn-bg: var(--btn-regular-bg)

8
src/components/Navbar.astro
View File

@ -22,7 +22,7 @@ function getLinkName(name: string) {
<div transition:animate="none" class:list={[
className,
"card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[72px] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
<a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg" light>
<a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg active:scale-95" light>
<div class="flex flex-row text-[var(--primary)] items-center text-md">
<Icon name="material-symbols:home-outline-rounded" size={28} class="mb-1 mr-2" />
{getConfig().title}
@ -30,15 +30,15 @@ function getLinkName(name: string) {
</Button></a>
<div>
{Object.keys(getConfig().menu).map((key) => {
return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg">{getLinkName(key)}</Button></a>
return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg active:scale-95">{getLinkName(key)}</Button></a>
})}
</div>
<div class="flex">
<div>
<Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
<Button class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
</div>
<div>
<Button class="rounded-lg flex items-center justify-center" id="scheme-switch" light height="44px" width="44px">
<Button class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="44px" width="44px">
<Icon name="material-symbols:wb-sunny-outline-rounded" size={20} class="absolute opacity-[var(--display-light-icon)]"></Icon>
<Icon name="material-symbols:dark-mode-outline-rounded" size={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
</Button>

2
src/components/PostMetadata.astro
View File

@ -14,7 +14,7 @@ const {pubDate, tags, categories} = Astro.props;
const className = Astro.props.class;
---
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-3", className]}>
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
<!-- publish date -->
<div class="flex items-center">
<div class="meta-icon"

4
src/components/TitleCardNew.astro
View File

@ -63,7 +63,7 @@ const { remarkPluginFrontmatter } = await entry.render();
{hasCover && <a href={url}
class:list={["group",
"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"
"md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
]} >
<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 ">
@ -78,7 +78,7 @@ const { remarkPluginFrontmatter } = await entry.render();
{!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)]">
<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)] active:scale-95">
<Icon name="material-symbols:chevron-right-rounded"
class="transition text-[var(--primary)] text-4xl mx-auto">
</Icon>

7
src/components/comment/CommentLayout.astro Normal file
View File

@ -0,0 +1,7 @@
---
---
<div class="card-base w-full h-[200px]">
</div>

2
src/components/control/BackToTop.astro
View File

@ -5,7 +5,7 @@ import Button from "./Button.astro";
<!-- There can't be a filter on parent element, or it will break `fixed` -->
<div class="back-to-top-wrapper hidden lg:block" transition:persist>
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
<div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()">
<Button card height="60px" width="60px">
<Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
</Button>

6
src/components/control/Pagination.astro
View File

@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
<a href={page.url.prev}>
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
disabled = {page.url.prev == undefined}
></Button>
</a>
@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
{p}
</div>
return <a href={commonUrl + p}>
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg" height="44px" width="44px">
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
{p}
</Button>
</a>
})}
</div>
<a href={page.url.next}>
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
disabled = {page.url.next == undefined}
></Button>
</a>

26
src/components/widget/DisplaySetting.astro
View File

@ -56,22 +56,36 @@ const enableBanner = getConfig().banner.enable;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
::-moz-range-thumb
-webkit-appearance: none;
height: 24px;
width: 10px;
border-radius: 4px;
height: 16px;
width: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
&::-ms-thumb
-webkit-appearance: none;
height: 24px;
width: 10px;
border-radius: 4px;
height: 16px;
width: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
&:hover
background: rgba(255, 255, 255, 0.8);
&:active
background: rgba(255, 255, 255, 0.6);
.banner-closed
#display-setting

6
src/components/widget/Profile.astro
View File

@ -10,15 +10,15 @@ const className = Astro.props
const vConf = getConfig();
---
<div class="card-base" transition:persist>
<ImageBox src={vConf.profile.avatar} class="w-[240px] mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
<div class="card-base">
<ImageBox src={vConf.profile.avatar} class="mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
<div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
<div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
<div class="flex gap-2 mx-2 justify-center mb-4">
{vConf.profile.links.map(item =>
<a href={item.url} target="_blank">
<Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg"></Button>
<Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
</a>
)}
</div>

14
src/components/widget/SideBar.astro
View File

@ -7,7 +7,7 @@ import Categories from "./Categories.astro";
const className = Astro.props.class;
---
<div id="sidebar" class:list={[className, "w-full"]} transition:persist>
<div class="flex flex-col w-full gap-4 mb-4">
<div class="flex flex-col w-full gap-4 mb-4" transition:animate="none">
<Profile></Profile>
</div>
<div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
@ -18,16 +18,4 @@ const className = Astro.props.class;
</div>
<style>
#sidebar {
view-transition-name: ssss;
}
/* TODO temporarily */
html::view-transition-old(ssss) {
mix-blend-mode: normal;
animation: none;
}
html::view-transition-new(ssss) {
mix-blend-mode: normal;
animation: none;
}
</style>

11
src/pages/posts/[slug].astro
View File

@ -9,6 +9,7 @@ import {getConfig} from "../../utils/config-utils";
import {i18n} from "../../i18n/translation";
import I18nKey from "../../i18n/i18nKey";
import {getPostUrlBySlug} from "../../utils/url-utils";
import CommentLayout from "../../components/comment/CommentLayout.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection('posts');
@ -83,8 +84,8 @@ const { remarkPluginFrontmatter } = await entry.render();
</div>
</div>
<div class="flex flex-col md:flex-row justify-between gap-4 overflow-hidden w-full">
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden">
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
{entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
<Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
@ -93,7 +94,7 @@ const { remarkPluginFrontmatter } = await entry.render();
</Button>}
</a>
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden">
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden active:scale-95">
{entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
{entry.data.prevTitle}
@ -103,6 +104,10 @@ const { remarkPluginFrontmatter } = await entry.render();
</a>
</div>
<CommentLayout>
</CommentLayout>
</MainGridLayout>
<style lang="stylus" is:global>