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

feat: mobile style improvements

This commit is contained in:
saicaca 2024-01-22 11:25:56 +08:00
parent 025953bca3
commit e428b1d5a5
10 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ArchivePanel.astro
View File

@ -65,7 +65,7 @@ function formatTag(tag: string[]) {
{
groups.map(group => (
<div>
<div class="flex flex-row w-full items-center h-[60px]">
<div class="flex flex-row w-full items-center h-[3.75rem]">
<div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-black/75 dark:text-white/75">{group.year}</div>
<div class="w-[15%] md:w-[10%]">
<div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>

2
src/components/Footer.astro
View File

@ -4,7 +4,7 @@ import {profileConfig} from "../config";
---
<div class="card-base max-w-[var(--page-width)] min-h-[72px] rounded-b-none mx-auto flex items-center px-6">
<div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">
<div class="text-black/50 dark:text-white/50 text-sm">
© 2023 {profileConfig.name}. All Rights Reserved.
<br>

6
src/components/GlobalStyles.astro
View File

@ -47,7 +47,7 @@ rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))
:root
--radius-large 16px
--radius-large 1rem
--banner-height-home 60vh
--banner-height 40vh
@ -184,10 +184,10 @@ color_set({
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
}
.link {
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[4px] -m-[4px];
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
}
.link-lg {
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
}
.float-panel {
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none

2
src/components/Navbar.astro
View File

@ -44,7 +44,7 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
<div transition:animate="none" class:list={[
className,
"card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] 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 active:scale-95" light>
<a href="/page/1"><Button height="3.25rem" 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={"1.75rem"} class="mb-1 mr-2" />
{siteConfig.title}

2
src/components/PostMetadata.astro
View File

@ -70,7 +70,7 @@ const className = Astro.props.class;
text-[var(--btn-content)] mr-2
}
.with-divider {
@apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm
@apply before:content-['/'] before:ml-1.5 before:mr-0.5 before:text-[var(--meta-divider)] before:text-sm
before:font-medium before:first-of-type:hidden before:transition
}
}

2
src/components/TitleCardNew.astro
View File

@ -78,7 +78,7 @@ const { remarkPluginFrontmatter } = await entry.render();
{!hasCover &&
<a href={url} aria-label={title} class="hidden md:block">
<Button name="Enter the Post" 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">
<Button name="Enter the Post" width="3.25rem" 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>

40
src/components/misc/Markdown.astro
View File

@ -5,7 +5,7 @@ interface Props {
}
const className = Astro.props.class;
---
<div class=`prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md ${className}`>
<div class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
<!--<div class="prose dark:prose-invert max-w-none custom-md">-->
<!--<div class="max-w-none custom-md">-->
<slot />
@ -15,9 +15,9 @@ const className = Astro.props.class;
.custom-md
h1,h2,h3,h4,h5,h6
.anchor
margin: -2px
margin: -0.125rem
margin-left: 0.2ch
padding: 2px
padding: 0.125rem
user-select: none
opacity: 0
transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
@ -30,9 +30,9 @@ const className = Astro.props.class;
a
position: relative
background: none
margin: -4px
padding: 4px
border-radius: 6px
margin: -0.25rem
padding: 0.25rem
border-radius: 0.375rem
color: var(--primary)
text-decoration-line: none;
/*&:after*/
@ -56,8 +56,8 @@ const className = Astro.props.class;
font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
background: var(--inline-code-bg)
color: var(--inline-code-color)
padding: 2px 4px
border-radius: 4px
padding: 0.125rem 0.25rem
border-radius: 0.25rem
overflow: hidden
&:before
content: none
@ -65,9 +65,9 @@ const className = Astro.props.class;
content: none
pre
background: var(--codeblock-bg) !important
border-radius: 12px
padding-left: 20px
padding-right: 20px
border-radius: 0.75rem
padding-left: 1.25rem
padding-right: 1.25rem
code
color: unset
font-size: 0.875rem
@ -106,13 +106,27 @@ const className = Astro.props.class;
&:after
content: none
img
border-radius: 12px
border-radius: 0.75rem
hr
border-color: var(--line-divider)
border-style: dashed
iframe
border-radius: 12px
border-radius: 0.75rem
margin-left: auto
margin-right: auto
max-width: 100%
</style>
<style lang="css" is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.custom-md h1 {
@apply text-3xl
}
}
</style>

6
src/layouts/MainGridLayout.astro
View File

@ -27,8 +27,8 @@ const enableBanner = siteConfig.banner.enable;
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'h-[calc(var(--banner-height)_-_72px)] md:h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
'h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_4.5rem)]': enableBanner && !isHomePage,}]}
>
<Navbar transition:animate="fade" transition:persist></Navbar>
</div>
@ -70,5 +70,5 @@ html::view-transition-new(rrrr) {
<style lang="stylus" is:global>
.banner-closed
#top-row
height: 72px;
height: 4.5rem;
</style>

2
src/pages/about.astro
View File

@ -13,7 +13,7 @@ const { Content } = await aboutPost.render()
---
<MainGridLayout title={i18n(I18nKey.about)}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-[120px]">
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
<div class="card-base z-10 px-9 py-6 relative w-full ">
<Markdown class="mt-2">
<Content />

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

@ -53,10 +53,10 @@ const { remarkPluginFrontmatter } = await entry.render();
<div class="relative">
<div
class="transition w-full block font-bold mb-3
text-3xl md:text-[40px]/[44px]
text-3xl md:text-[2.5rem]/[2.75rem]
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]
before:absolute before:top-[0.75rem] before:left-[-1.125rem]
">
{entry.data.title}
</div>
@ -89,17 +89,17 @@ const { remarkPluginFrontmatter } = await entry.render();
<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">
{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="3.75rem">
<Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
{entry.data.nextTitle}
</div>
</Button>}
</a>
<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 transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
{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="3.75rem">
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
{entry.data.prevTitle}
</div>
<Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />