fix: markdown style for the About page
This commit is contained in:
saicaca
parent
35f9260b58
commit
ab89683cd7
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
interface Props {
|
||||
class: string;
|
||||
}
|
||||
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 max-w-none custom-md">-->
|
||||
<!--<div class="max-w-none custom-md">-->
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style lang="stylus" is:global>
|
||||
.custom-md
|
||||
a
|
||||
position: relative
|
||||
background: none
|
||||
margin: -4px
|
||||
padding: 4px
|
||||
border-radius: 6px
|
||||
color: var(--primary)
|
||||
text-decoration-line: none;
|
||||
/*&:after*/
|
||||
/* content: ''*/
|
||||
/* position: absolute*/
|
||||
/* left: 2px*/
|
||||
/* right: 2px*/
|
||||
/* bottom: 4px*/
|
||||
/* height: 6px*/
|
||||
/* border-radius: 3px*/
|
||||
/* background: var(--link-hover)*/
|
||||
/* transition: background 0.15s ease-in-out;*/
|
||||
/* z-index: -1;*/
|
||||
&:hover
|
||||
background: var(--link-hover)
|
||||
&:active
|
||||
background: var(--link-active)
|
||||
/*&:after*/
|
||||
/* 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
|
||||
border-radius: 12px
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
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
|
||||
transition: background 0.15s ease-in-out;
|
||||
background: var(--btn-regular-bg)
|
||||
height: 100%
|
||||
width: 0.25rem
|
||||
border-radius: 1rem
|
||||
p
|
||||
&:before
|
||||
content: none
|
||||
&:after
|
||||
content: none
|
||||
img
|
||||
border-radius: 12px
|
||||
hr
|
||||
border-color: var(--line-divider)
|
||||
border-style: dashed
|
||||
iframe
|
||||
border-radius: 12px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 100%
|
||||
</style>
|
||||
|
|
@ -155,7 +155,7 @@ Here's a "line block":
|
|||
|
||||
and images can be specified like so:
|
||||
|
||||
|
||||
|
||||
|
||||
Inline math equations go in like so: $\omega = d\phi / dt$. Display
|
||||
math should get its own line and be put in in double-dollarsigns:
|
||||
|
|
|
|||
|
|
@ -1,2 +1,7 @@
|
|||
## About
|
||||
This is the about page.
|
||||
# About
|
||||
This is the demo site for [Fuwari](https://github.com/saicaca/fuwari).
|
||||
|
||||
> ### Sources of images used in this site
|
||||
> - [Unsplash](https://unsplash.com/)
|
||||
> - [星と少女](https://www.pixiv.net/artworks/108916539) by [Stella](https://www.pixiv.net/users/93273965)
|
||||
> - [Rabbit - v1.4 Showcase](https://civitai.com/posts/586908) by [Rabbit_YourMajesty](https://civitai.com/user/Rabbit_YourMajesty)
|
||||
|
|
@ -5,6 +5,7 @@ import MainGridLayout from "../layouts/MainGridLayout.astro";
|
|||
import { getEntry } from 'astro:content'
|
||||
import {i18n} from "../i18n/translation";
|
||||
import I18nKey from "../i18n/i18nKey";
|
||||
import Markdown from "../components/misc/Markdown.astro";
|
||||
|
||||
const aboutPost = await getEntry('spec', 'about')
|
||||
|
||||
|
|
@ -14,9 +15,9 @@ 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="card-base z-10 px-9 py-6 relative w-full ">
|
||||
<div class="prose dark:prose-invert max-w-none prose-h1:text-3xl">
|
||||
<Markdown class="mt-2">
|
||||
<Content />
|
||||
</div>
|
||||
</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
</MainGridLayout>
|
||||
|
|
@ -10,6 +10,7 @@ import I18nKey from "../../i18n/i18nKey";
|
|||
import {getPostUrlBySlug} from "../../utils/url-utils";
|
||||
import License from "../../components/misc/License.astro";
|
||||
import {licenseConfig} from "../../config";
|
||||
import Markdown from "../../components/misc/Markdown.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const blogEntries = await getCollection('posts');
|
||||
|
|
@ -74,12 +75,9 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
|
||||
{!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
|
||||
|
||||
<div class="mb-6 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">-->
|
||||
<Markdown class="mb-6">
|
||||
<Content />
|
||||
</div>
|
||||
</Markdown>
|
||||
|
||||
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl"></License>}
|
||||
|
||||
|
|
@ -107,93 +105,3 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
</div>
|
||||
|
||||
</MainGridLayout>
|
||||
|
||||
<style lang="stylus" is:global>
|
||||
.custom-md
|
||||
a
|
||||
position: relative
|
||||
background: none
|
||||
margin: -4px
|
||||
padding: 4px
|
||||
border-radius: 6px
|
||||
color: var(--primary)
|
||||
text-decoration-line: none;
|
||||
/*&:after*/
|
||||
/* content: ''*/
|
||||
/* position: absolute*/
|
||||
/* left: 2px*/
|
||||
/* right: 2px*/
|
||||
/* bottom: 4px*/
|
||||
/* height: 6px*/
|
||||
/* border-radius: 3px*/
|
||||
/* background: var(--link-hover)*/
|
||||
/* transition: background 0.15s ease-in-out;*/
|
||||
/* z-index: -1;*/
|
||||
&:hover
|
||||
background: var(--link-hover)
|
||||
&:active
|
||||
background: var(--link-active)
|
||||
/*&:after*/
|
||||
/* 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
|
||||
border-radius: 12px
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
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
|
||||
transition: background 0.15s ease-in-out;
|
||||
background: var(--btn-regular-bg)
|
||||
height: 100%
|
||||
width: 0.25rem
|
||||
border-radius: 1rem
|
||||
p
|
||||
&:before
|
||||
content: none
|
||||
&:after
|
||||
content: none
|
||||
img
|
||||
border-radius: 12px
|
||||
hr
|
||||
border-color: var(--line-divider)
|
||||
border-style: dashed
|
||||
iframe
|
||||
border-radius: 12px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 100%
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue