feat: post styles and transition improvements
(cherry picked from commit 53d2c803be5c9bc81ed1705d7053a8fde8bafe27)
This commit is contained in:
saicaca
parent
cf0bf8d606
commit
cd01149f7e
13
package.json
13
package.json
|
|
@ -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
1582
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -83,13 +83,12 @@ 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}]}
|
||||
|
|
@ -151,12 +150,6 @@ html::view-transition-new(banner-ani) {
|
|||
overflow: clip;
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner-home {
|
||||
|
||||
}
|
||||
</style>
|
||||
<script is:inline>
|
||||
/* Preload fonts */
|
||||
|
|
@ -291,3 +284,14 @@ document.addEventListener('astro:after-swap', () => {
|
|||
fb();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style is:global lang="stylus">
|
||||
#banner-wrapper
|
||||
top: 0
|
||||
opacity: 1
|
||||
.banner-closed
|
||||
#banner-wrapper
|
||||
top: -120px
|
||||
opacity: 0
|
||||
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,9 +47,10 @@ const enableBanner = getConfig().banner.enable;
|
|||
<!-- title -->
|
||||
<div class="relative">
|
||||
<div
|
||||
class="transition w-full block font-bold mb-3 text-[40px]/[44px]
|
||||
class="transition w-full block font-bold mb-3
|
||||
text-3xl md:text-[40px]/[44px]
|
||||
text-black/90 dark:text-white/90
|
||||
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
||||
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}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue