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

feat: post styles and transition improvements 

(cherry picked from commit 53d2c803be5c9bc81ed1705d7053a8fde8bafe27)
This commit is contained in:
saicaca 2023-10-06 03:02:46 +08:00
parent cf0bf8d606
commit cd01149f7e
8 changed files with 1312 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package.json
View File

@ -12,21 +12,24 @@
"dependencies": {
"@astrojs/check": "^0.2.0",
"@astrojs/tailwind": "^4.0.0",
"@astrojs/vue": "^3.0.1",
"@fontsource/roboto": "^5.0.8",
"astro": "^3.0.10",
"astro-icon": "^1.0.0-next.2",
"astro": "^3.2.3",
"astro-icon": "1.0.0-next.2",
"colorjs.io": "^0.4.5",
"mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0",
"rehype-katex": "^7.0.0",
"remark-math": "^6.0.0",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2"
},
"devDependencies": {
"@astrojs/ts-plugin": "^1.1.3",
"@iconify-json/fa6-brands": "^1.1.13",
"@iconify-json/material-symbols": "^1.1.57",
"@rollup/plugin-yaml": "^4.1.1",
"@tailwindcss/typography": "^0.5.9",
"@iconify-json/material-symbols": "^1.1.59",
"@rollup/plugin-yaml": "^4.1.2",
"@tailwindcss/typography": "^0.5.10",
"stylus": "^0.59.0"
}
}

1582
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

7
src/components/GlobalStyles.astro
View File

@ -50,7 +50,7 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
--radius-large 16px
--banner-height-home 60vh
--banner-height 50vh
--banner-height 40vh
color_set({
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
@ -78,7 +78,12 @@ color_set({
--line-color: black(0.1) white(0.1)
--meta-divider: black(0.2) white(0.2)
--inline-code-bg: var(--btn-regular-bg)
--inline-code-color: var(--btn-content)
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
--codeblock-selection: oklch(0.40 0.08 var(--hue))
--codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
--link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
--link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))

6
src/components/TitleCardNew.astro
View File

@ -28,19 +28,19 @@ import I18nKey from "../i18n/i18nKey";
// cover = null;
const hasCover = cover !== undefined && cover !== null && cover !== '';
const coverWidth = "30%";
const coverWidth = "28%";
const { remarkPluginFrontmatter } = await entry.render();
---
<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}]}>
<div class:list={["pl-9 pr-9 md:pr-2 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
<a href={url}
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 md:before:top-[35px] before:left-5
before:absolute md:before:top-[35px] before:left-[18px]
">
{title}
</a>

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

@ -72,6 +72,10 @@ const enableBanner = getConfig().banner.enable;
border-radius: 4px;
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
.banner-closed
#display-setting
border-width: 3px
</style>
<style>

26
src/layouts/Layout.astro
View File

@ -83,16 +83,15 @@ if (title) {
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<title>{title}</title>
</head>
<body class="bg-[oklch(0.95_0.01_var(--hue))] dark:bg-[oklch(0.16_0.014_var(--hue))] min-h-screen transition ">
<GlobalStyles>
<div class="absolute w-full"
<div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
id="banner-wrapper"
>
<!-- TODO the transition here is not correct -->
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
src={banner} transition:animate="fade"
>
</ImageBox>
@ -151,12 +150,6 @@ html::view-transition-new(banner-ani) {
overflow: clip;
object-fit: none;
}
.banner-home {
}
</style>
<script is:inline>
/* Preload fonts */
@ -290,4 +283,15 @@ document.addEventListener('astro:after-swap', () => {
activateDisplaySettings();
fb();
});
</script>
</script>
<style is:global lang="stylus">
#banner-wrapper
top: 0
opacity: 1
.banner-closed
#banner-wrapper
top: -120px
opacity: 0
</style>

20
src/layouts/MainGridLayout.astro
View File

@ -23,17 +23,19 @@ const sidebarWidth = "280px";
const enableBanner = getConfig().banner.enable;
---
<Layout title={title} banner={banner}>
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] mx-auto gap-4 relative overflow-hidden `
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative md:px-4 lg:px-0`
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={{
'min-h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'min-h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}}
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
>
<Navbar transition:animate="fade" transition:persist></Navbar>
</div>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] overflow-hidden" transition:persist></SideBar>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[280px] " transition:persist></SideBar>
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
<!-- the overflow-hidden here prevent long text break the layout-->
@ -46,8 +48,6 @@ const enableBanner = getConfig().banner.enable;
</div>
<BackToTop></BackToTop>
</div>
</Layout>
<style>
@ -69,5 +69,9 @@ html::view-transition-new(rrrr) {
overflow: clip;
object-fit: none;
}
</style>
<style lang="stylus" is:global>
.banner-closed
#top-row
height: 72px;
</style>

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

@ -1,10 +1,8 @@
---
import { getCollection } from 'astro:content';
import MainGridLayout from "../../layouts/MainGridLayout.astro";
import ButtonTag from "../../components/control/ButtonTag.astro";
import ImageBox from "../../components/misc/ImageBox.astro";
import {Icon} from "astro-icon/components";
import {formatDateToYYYYMMDD} from "../../utils/date-utils";
import PostMetadata from "../../components/PostMetadata.astro";
import {getPostUrlBySlug} from "../../utils/content-utils";
import Button from "../../components/control/Button.astro";
@ -24,12 +22,10 @@ const { Content } = await entry.render();
const { remarkPluginFrontmatter } = await entry.render();
const enableBanner = getConfig().banner.enable;
---
<MainGridLayout banner={entry.data.cover} title={entry.data.title}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div class:list={["card-base z-10 px-9 py-6 relative w-full ",
<div class:list={["card-base z-10 px-4 md:px-9 py-6 relative w-full ",
{}
]}>
<!-- word count and reading time -->
@ -51,10 +47,11 @@ const enableBanner = getConfig().banner.enable;
<!-- title -->
<div class="relative">
<div
class="transition w-full block font-bold mb-3 text-[40px]/[44px]
text-black/90 dark:text-white/90
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[12px] before:left-[-18px]
class="transition w-full block font-bold mb-3
text-3xl md:text-[40px]/[44px]
text-black/90 dark:text-white/90
md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[12px] before:left-[-18px]
">
{entry.data.title}
</div>
@ -76,27 +73,30 @@ const enableBanner = getConfig().banner.enable;
{!entry.data.cover && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
<div class="prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md
">
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
<!--<div class="max-w-none custom-md">-->
<Content />
</div>
</div>
</div>
<div class="flex justify-between gap-4 overflow-hidden w-full">
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden">
{entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
<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">
{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">
{entry.data.prevTitle}
{entry.data.nextTitle}
</div>
</Button>}
</a>
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden">
{entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden">
{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.nextTitle}
{entry.data.prevTitle}
</div>
<Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />
</Button>}
@ -104,3 +104,66 @@ const enableBanner = getConfig().banner.enable;
</div>
</MainGridLayout>
<style lang="stylus" is:global>
.custom-md
a
background: none
margin: -4px
padding: 4px
border-radius: 6px
color: var(--primary)
text-decoration none
&:hover
background: var(--link-hover)
&:active
background: var(--link-active)
code
font-family: monospace
background: var(--inline-code-bg)
color: var(--inline-code-color)
padding: 2px 4px
border-radius: 4px
overflow: hidden
&:before
content: none
&:after
content: none
pre
background: var(--codeblock-bg) !important
code
padding: 0
background: none
::selection
background: var(--codeblock-selection)
span.br::selection
background: var(--codeblock-selection)
ul
li
&::marker
color: var(--primary)
ol
li
&::marker
color: var(--primary)
blockquote
font-style: normal
border-left-color: rgba(0,0,0,0)
position: relative;
&:before
content: ''
position: absolute
left: -0.25rem
display: block
background: var(--btn-regular-bg)
height: 100%
width: 0.25rem
border-radius: 1rem
p
&:before
content: none
&:after
content: none
</style>