feat: typography, toc
This commit is contained in:
enscribe
parent
ea68d4f02f
commit
8fe228e243
16 changed files with 194 additions and 311 deletions
214
README.md
214
README.md
|
|
@ -1,213 +1 @@
|
|||
# Astro-Micro-Academics
|
||||
|
||||
[
|
||||
](https://astro.build/themes/details/astro-micro-academics)
|
||||
[](https://astro-micro-academic.vercel.app/)
|
||||
|
||||
Astro Micro Academic is an academic version of [Astro-Micro](https://github.com/trevortylerlee/astro-micro) and [Nano](https://astro-nano-demo.vercel.app/).
|
||||
It is tailored for researchers.
|
||||
|
||||
Micro Academics adds features like tags, and blog math support and also inherits [Pagefind](https://pagefind.app/) for search, [Giscus](https://giscus.app/) for comments, from Astro Micro.
|
||||
|
||||
Micro Academics still comes with everything great about Micro and Nano — full type safety, a sitemap, an RSS feed, and Markdown + MDX support. Styled with TailwindCSS and preconfigured with system, light, and dark themes.
|
||||
|
||||
## News
|
||||
|
||||
✨ I've got a detailed blog about building and deploying your website using this template! Check it out [here](https://jingwu2121.github.io/blog/01-build-deploy-website/)
|
||||
|
||||
## Install Astro-Micro-Academics
|
||||
|
||||
Clone the [repository](https://github.com/jingwu2121/astro-micro-academic).
|
||||
|
||||
```sh
|
||||
git clone https://github.com/jingwu2121/astro-micro-academic.git
|
||||
```
|
||||
|
||||
```sh
|
||||
cd astro-micro-academic
|
||||
```
|
||||
|
||||
```sh
|
||||
npm i
|
||||
```
|
||||
|
||||
Run local server
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Update the Homepage
|
||||
|
||||
Update your home page in `src/pages/index.astro`.
|
||||
|
||||
## CV & About
|
||||
|
||||
Update your CV and About page in `src/pages/cv.astro` and `src/pages/about.astro`.
|
||||
|
||||
```ts
|
||||
const works = [
|
||||
{
|
||||
company: 'Company A',
|
||||
time: '2022-Present',
|
||||
job_title: 'Research Scientist',
|
||||
location: 'London, UK',
|
||||
description: 'Your Notes about the job',
|
||||
},
|
||||
{
|
||||
company: 'Company A',
|
||||
time: '2022-Present',
|
||||
job_title: 'Research Scientist',
|
||||
location: 'London, UK',
|
||||
description: 'Your Notes about the job',
|
||||
},
|
||||
]
|
||||
const educations = [
|
||||
{
|
||||
school: 'University 1',
|
||||
time: '2022-Present',
|
||||
job_title: 'BEng in Electronic Information Engineering',
|
||||
location: 'London, UK',
|
||||
description: 'Your Notes about the study',
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
## Social Links
|
||||
|
||||
Update the social links in `src/components/SocialIcons.astro`, simply replace the `URL`.
|
||||
|
||||
## Publications metadata
|
||||
|
||||
Metadata is required for each post. Add a new `publication.md` to automartically add a publication on the website. Publications are sorted by date.
|
||||
|
||||
```astro
|
||||
---
|
||||
title: 'Diffusion Models Beat GANs on Image Synthesis'
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias earum quod quo repellat blanditiis est iste eos dolorem! Voluptatibus corporis totam sed unde est iusto neque iure natus adipisci omnis.'
|
||||
date: '2024-07-26'
|
||||
authors: 'John B*, Jon A*, Frank C, John B, Jon A, Frank C'
|
||||
paperURL: 'Paper: https://astro-sphere-demo.vercel.app'
|
||||
codeURL: 'Code: '
|
||||
webURL: 'Web: https://github.com/markhorn-dev/astro-sphere'
|
||||
dataURL: 'Data: https://github.com/markhorn-dev/astro-sphere'
|
||||
img: '/rupert-cat.gif'
|
||||
imgAlt: 'Paper Teaser'
|
||||
pub: 'ECCV2024'
|
||||
---
|
||||
```
|
||||
|
||||
| Field | Req | Type | Remarks |
|
||||
| :--------------------------------- | :-- | :----- | :--------------------------------------------------------------------------------------------------------------- |
|
||||
| title | Yes | string | Title of the content. Used in SEO and RSS. |
|
||||
| description | Yes | string | Description of the content. Used in SEO and RSS. |
|
||||
| date | Yes | string | Must be a valid date string (able to be parsed). |
|
||||
| authors | Yes | string | A string seperated by comma. |
|
||||
| paperURL, codeURL, webURL, dataURL | Yes | string | A string seperated by ": ". If you don't have a link to add, leave the link part blank, e.g. `codeURL: "Code: "` |
|
||||
| img | Yes | string | Path to teaser image. |
|
||||
| imgAlt | Yes | string | Description of the image. |
|
||||
| pub | Yes | string | The conference or journal |
|
||||
|
||||
## Blog metadata
|
||||
|
||||
Metadata is required for each post.
|
||||
|
||||
```astro
|
||||
---
|
||||
title: 'Blog Collection'
|
||||
description: 'How to add posts to the blog.'
|
||||
date: '2024-03-21'
|
||||
tags: ['guide', 'tutorial']
|
||||
draft: false
|
||||
---
|
||||
```
|
||||
|
||||
| Field | Req | Type | Remarks |
|
||||
| :---------- | :-- | :------ | :----------------------------------------------- |
|
||||
| title | Yes | string | Title of the content. Used in SEO and RSS. |
|
||||
| description | Yes | string | Description of the content. Used in SEO and RSS. |
|
||||
| date | Yes | string | Must be a valid date string (able to be parsed). |
|
||||
| tags | Yes | list | A list of strings |
|
||||
| draft | No | boolean | If draft: true, content will not be published. |
|
||||
|
||||
## Customize the website metadata and set up RSS
|
||||
|
||||
To change the website metadata, edit `src/consts.ts`.
|
||||
|
||||
```ts
|
||||
// src/consts.ts
|
||||
|
||||
export const SITE: Site = {
|
||||
TITLE: 'Astro Micro Academics',
|
||||
DESCRIPTION: 'Astro Micro Academics is for academic user.',
|
||||
EMAIL: 'youremial@gmail.com',
|
||||
NUM_POSTS_ON_HOMEPAGE: 2,
|
||||
NUM_PUBLICATIONS_ON_HOMEPAGE: 3,
|
||||
SITEURL: 'https://astro-micro-academic.vercel.app', // Update here to link the RSS icon to your website RSS
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Req | Description |
|
||||
| :--------------- | :-- | :--------------------------------------------------- |
|
||||
| TITLE | Yes | Displayed in header and footer. Used in SEO and RSS. |
|
||||
| DESCRIPTION | Yes | Used in SEO and RSS. |
|
||||
| EMAIL | Yes | Displayed in contact section. |
|
||||
| NUM_POSTS | Yes | Limit number of posts on home page. |
|
||||
| NUM_PUBLICATIONS | Yes | Limit number of research on home page. |
|
||||
| SITEURL | Yes | Your website URL |
|
||||
|
||||
### RSS Post
|
||||
|
||||
Please tag the post of RSS feed with tag `"rss-feed"`, other posts are not included in the RSS.
|
||||
|
||||
---
|
||||
|
||||
## Custom metadata for highlighted author in your paper
|
||||
|
||||
```ts
|
||||
// src/consts.ts
|
||||
|
||||
export const HIGHLIGHTAUTHOR = 'John B'
|
||||
```
|
||||
|
||||
## Customize metadata for individual pages
|
||||
|
||||
```ts
|
||||
// src/consts.ts
|
||||
|
||||
export const HOME: Metadata = {
|
||||
TITLE: 'Home',
|
||||
DESCRIPTION: 'Astro Micro is an accessible theme for Astro.',
|
||||
}
|
||||
|
||||
export const BLOG: Metadata = {
|
||||
TITLE: 'Blog',
|
||||
DESCRIPTION: 'A collection of articles on topics I am passionate about.',
|
||||
}
|
||||
|
||||
export const RESEARCH: Metadata = {
|
||||
TITLE: 'Publications',
|
||||
DESCRIPTION:
|
||||
'A collection of my publications with links to paper, repositories and live demos.',
|
||||
}
|
||||
|
||||
export const CV: Metadata = {
|
||||
TITLE: 'CV',
|
||||
DESCRIPTION: 'your cv',
|
||||
}
|
||||
|
||||
export const TAGS: Metadata = {
|
||||
TITLE: 'TAGS',
|
||||
DESCRIPTION: 'blog tag filter',
|
||||
}
|
||||
|
||||
export const ABOUT: Metadata = {
|
||||
TITLE: 'ABOUT',
|
||||
DESCRIPTION: 'A self-intro',
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Req | Description |
|
||||
| :---------- | :-- | :--------------------------------------------- |
|
||||
| TITLE | Yes | Displayed in browser tab. Used in SEO and RSS. |
|
||||
| DESCRIPTION | Yes | Used in SEO and RSS. |
|
||||
# erudite
|
||||
|
|
@ -4,7 +4,7 @@ import SocialIcons from './SocialIcons.astro'
|
|||
import { ModeToggle } from '@components/ui/mode-toggle'
|
||||
---
|
||||
|
||||
<footer class="py-8">
|
||||
<footer class="py-4">
|
||||
<Container>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-4">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
import '../styles/global.css'
|
||||
import '../styles/katex.css'
|
||||
import '../styles/typography.css'
|
||||
|
||||
import '@fontsource/geist-sans'
|
||||
import '@fontsource/geist-mono'
|
||||
|
|
|
|||
|
|
@ -11,21 +11,23 @@ const items = [
|
|||
]
|
||||
---
|
||||
|
||||
<header class="sticky top-0 z-10" transition:persist>
|
||||
<header class="sticky top-0 z-10 bg-background/50 backdrop-blur-md" transition:persist>
|
||||
<Container>
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<Link href="/" underline={false}>
|
||||
{SITE.TITLE}<span class="ml-1">🍄</span>
|
||||
<Link href="/" class="text-xl font-semibold hover:text-primary transition-colors duration-300">
|
||||
{SITE.TITLE}
|
||||
</Link>
|
||||
<nav class="flex items-center space-x-1 text-sm">
|
||||
{
|
||||
items.map((item, index) => (
|
||||
<>
|
||||
<Link href={item.href}>{item.label}</Link>
|
||||
{index < items.length - 1 && <span class="text-gray-400">/</span>}
|
||||
</>
|
||||
))
|
||||
}
|
||||
<nav class="flex items-center gap-4 md:gap-6 text-sm">
|
||||
{items.map((item, index) => (
|
||||
<Fragment key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
class="transition-colors hover:text-foreground/80 text-foreground/60 capitalize"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -4,21 +4,21 @@ import { cn } from '@lib/utils'
|
|||
type Props = {
|
||||
href: string
|
||||
external?: boolean
|
||||
underline?: boolean
|
||||
group?: boolean
|
||||
class?: string
|
||||
'data-heading'?: string
|
||||
}
|
||||
|
||||
const { href, external, underline = true, group = false, ...rest } = Astro.props
|
||||
const { href, external, class: className, 'data-heading': dataHeading, ...rest } = Astro.props
|
||||
---
|
||||
|
||||
<a
|
||||
href={href}
|
||||
target={external ? '_blank' : '_self'}
|
||||
class={cn(
|
||||
'inline-block transition-colors duration-300 ease-in-out',
|
||||
underline && 'underline underline-offset-[3px]',
|
||||
group && 'group',
|
||||
'inline-block transition-colors duration-300 ease-in-out hover:underline underline-offset-[3px]',
|
||||
className
|
||||
)}
|
||||
data-heading={dataHeading}
|
||||
{...rest}
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@ function buildToc(headings: Heading[]) {
|
|||
}
|
||||
---
|
||||
|
||||
<details open class="rounded-lg border">
|
||||
<summary>Table of Contents</summary>
|
||||
<details open class="block xl:hidden rounded-lg border p-3 mb-8">
|
||||
<summary class="text-xl font-semibold">Table of Contents</summary>
|
||||
<nav>
|
||||
<ul class="py-3">
|
||||
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
||||
</ul>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
summary {
|
||||
@apply cursor-pointer rounded-t-lg px-3 py-1.5 font-medium transition-colors;
|
||||
}
|
||||
</style>
|
||||
<nav class="sticky top-16 hidden xl:block h-0 w-[calc(50vw-50%-4rem)] overflow-wrap-break-word text-xs leading-4 translate-x-[calc(-100%-2em)]">
|
||||
<h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
|
||||
<ul class="space-y-2">
|
||||
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,16 @@
|
|||
import type { Heading } from './TableOfContents.astro'
|
||||
import Link from './Link.astro'
|
||||
|
||||
// https://kld.dev/building-table-of-contents/
|
||||
|
||||
const { heading } = Astro.props
|
||||
---
|
||||
|
||||
<li class="list-inside list-disc px-6 py-1.5 text-sm">
|
||||
<Link href={'#' + heading.slug} underline>
|
||||
<li class="list-inside list-disc px-6 py-1.5 xl:list-none xl:p-0 text-sm">
|
||||
<Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}>
|
||||
{heading.text}
|
||||
</Link>
|
||||
{
|
||||
heading.subheadings.length > 0 && (
|
||||
<ul class="translate-x-3">
|
||||
<ul class="translate-x-3 xl:translate-x-0 xl:ml-4 xl:mt-2 xl:space-y-2">
|
||||
{heading.subheadings.map((subheading: Heading) => (
|
||||
<Astro.self heading={subheading} />
|
||||
))}
|
||||
|
|
@ -21,3 +19,31 @@ const { heading } = Astro.props
|
|||
)
|
||||
}
|
||||
</li>
|
||||
|
||||
<script>
|
||||
function updateActiveHeading() {
|
||||
const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
|
||||
const tocLinks = document.querySelectorAll('.toc-link');
|
||||
|
||||
let currentHeading = '';
|
||||
|
||||
headings.forEach(heading => {
|
||||
const top = heading.getBoundingClientRect().top;
|
||||
if (top < 100) {
|
||||
currentHeading = heading.id;
|
||||
}
|
||||
});
|
||||
|
||||
tocLinks.forEach(link => {
|
||||
const headingSlug = link.getAttribute('data-heading');
|
||||
if (headingSlug === currentHeading) {
|
||||
link.classList.add('underline');
|
||||
} else {
|
||||
link.classList.remove('underline');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateActiveHeading);
|
||||
window.addEventListener('load', updateActiveHeading);
|
||||
</script>
|
||||
|
|
@ -28,7 +28,7 @@ export function ModeToggle() {
|
|||
}, [theme])
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
import type { Site } from '@types'
|
||||
export type Site = {
|
||||
TITLE: string
|
||||
DESCRIPTION: string
|
||||
EMAIL: string
|
||||
NUM_POSTS_ON_HOMEPAGE: number
|
||||
SITEURL: string
|
||||
}
|
||||
|
||||
export const SITE: Site = {
|
||||
TITLE: 'Astro Micro Academics',
|
||||
DESCRIPTION: 'Astro Micro Academics is for academic user.',
|
||||
EMAIL: 'youremial@gmail.com',
|
||||
TITLE: 'astro-erudite',
|
||||
DESCRIPTION: 'astro-erudite is a opinionated, no-frills blogging template. Built with Astro.',
|
||||
EMAIL: 'youremail@gmail.com',
|
||||
NUM_POSTS_ON_HOMEPAGE: 2,
|
||||
SITEURL: 'https://astro-micro-academic.vercel.app', // Update here to link the RSS icon to your website rss
|
||||
SITEURL: 'https://astro-erudite.vercel.app',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,48 +5,108 @@ date: '2024-07-25'
|
|||
tags: ['log', 'rss-feed']
|
||||
---
|
||||
|
||||
:exclamation: Also refer to [Old] posts to see examples and changes. Some changes are removed in this version, which are marked.
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
|
||||
## What is New
|
||||
## Emphasis
|
||||
|
||||
- Add Math support to the blog
|
||||
- Add News, Research, Publication, CV sections
|
||||
- add icon to connect section
|
||||
- Add tag function to the blog
|
||||
- add RSS Feed icon
|
||||
- add tags to post slug and enable tag based search
|
||||
- add function to RSS feed only posts with rss-feed tags
|
||||
- Change SOCIALS
|
||||
- add highlight author
|
||||
- redo the news section height
|
||||
- support markdown emoji :blush: :exclamation:
|
||||
- Clear and rearrange all the posts
|
||||
- [x] rewrite astro-micro-academics
|
||||
- [x] astro micro
|
||||
- [x] get started with astro micro
|
||||
- [x] blog collection example
|
||||
**This is bold text**
|
||||
|
||||
---
|
||||
__This is bold text__
|
||||
|
||||
## TODO
|
||||
*This is italic text*
|
||||
|
||||
- Add Group Page
|
||||
- Add Opening Section
|
||||
- Add Award Page
|
||||
- Write a complete personal website setup guide
|
||||
- screenshot and submit theme to astro
|
||||
- add progress bar on the top
|
||||
- show tags on allowcard
|
||||
- fix news section scroll bar
|
||||
_This is italic text_
|
||||
|
||||
## Math test
|
||||
~~Strikethrough~~
|
||||
|
||||
This is an inline formula: $a = b+1$, $a = \frac{1}{x_1}$
|
||||
|
||||
$$
|
||||
a = \sum_{n=1}^{22} \sqrt{a+b_n}
|
||||
$$
|
||||
## Blockquotes
|
||||
|
||||
## 中文测试
|
||||
|
||||
这里是中文测试
|
||||
> Blockquotes can also be nested...
|
||||
>> ...by using additional greater-than signs right next to each other...
|
||||
> > > ...or with spaces between arrows.
|
||||
|
||||
|
||||
## Lists
|
||||
|
||||
Unordered
|
||||
|
||||
+ Create a list by starting a line with `+`, `-`, or `*`
|
||||
+ Sub-lists are made by indenting 2 spaces:
|
||||
- Marker character change forces new list start:
|
||||
* Ac tristique libero volutpat at
|
||||
+ Facilisis in pretium nisl aliquet
|
||||
- Nulla volutpat aliquam velit
|
||||
+ Very easy!
|
||||
|
||||
Ordered
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
|
||||
1. You can use sequential numbers...
|
||||
1. ...or keep all the numbers as `1.`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
|
||||
## Code
|
||||
|
||||
Inline `code`
|
||||
|
||||
Indented code
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
|
||||
Block code "fences"
|
||||
|
||||
```
|
||||
Sample text here...
|
||||
```
|
||||
|
||||
Syntax highlighting
|
||||
|
||||
``` js
|
||||
var foo = function (bar) {
|
||||
return bar++;
|
||||
};
|
||||
|
||||
console.log(foo(5));
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
Right aligned columns
|
||||
|
||||
| Option | Description |
|
||||
| ------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
[link text](http://dev.nodeca.com)
|
||||
|
||||
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import Head from '@components/Head.astro'
|
|||
import Header from '@components/Header.astro'
|
||||
import Footer from '@components/Footer.astro'
|
||||
import { SITE } from '@consts'
|
||||
import '../styles/katex.css'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
|
|
@ -19,7 +18,7 @@ const { title, description } = Astro.props
|
|||
<Head title={`${title} | ${SITE.TITLE}`} description={description} />
|
||||
</head>
|
||||
<body
|
||||
class="box-border flex h-fit min-h-screen flex-col px-4 font-sans bg-background text-foreground antialiased"
|
||||
class="box-border flex h-fit min-h-screen flex-col px-4 font-sans bg-background text-foreground antialiased gap-y-4"
|
||||
>
|
||||
<Header />
|
||||
<main class="flex-grow">
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@ import { SITE } from '@consts'
|
|||
import ArrowCard from '@components/ArrowCard.astro'
|
||||
import Link from '@components/Link.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
import type { CollectionEntry } from 'astro:content'
|
||||
import SocialIcons from '@components/SocialIcons.astro'
|
||||
import { ModeToggle } from '@components/ui/mode-toggle'
|
||||
|
||||
const blog = (await getCollection('blog'))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -18,7 +15,6 @@ const blog = (await getCollection('blog'))
|
|||
<Layout title="Home" description="Home">
|
||||
<Container>
|
||||
<section class="space-y-6">
|
||||
<ModeToggle client:load />
|
||||
<div class="flex flex-wrap items-center justify-between gap-y-2">
|
||||
<h2 class="font-semibold">Latest posts</h2>
|
||||
<Link href="/blog"> See all posts </Link>
|
||||
|
|
|
|||
|
|
@ -84,24 +84,19 @@
|
|||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@apply !border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.disable-transitions * {
|
||||
@apply !transition-none;
|
||||
}
|
||||
}
|
||||
16
src/styles/typography.css
Normal file
16
src/styles/typography.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
article {
|
||||
@apply prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl;
|
||||
@apply prose-h2:mt-10 prose-h2:scroll-m-20 prose-h2:border-b prose-h2:pb-2 prose-h2:text-3xl prose-h2:font-semibold prose-h2:tracking-tight prose-h2:transition-colors prose-h2:first:mt-0;
|
||||
@apply prose-h3:mt-8 prose-h3:scroll-m-20 prose-h3:text-2xl prose-h3:font-semibold prose-h3:tracking-tight;
|
||||
@apply prose-p:leading-7 prose-p:[&:not(:first-child)]:mt-6;
|
||||
@apply prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4;
|
||||
@apply prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic;
|
||||
@apply prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ul:[&>li]:mt-2;
|
||||
@apply prose-pre:border prose-pre:border-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export type Site = {
|
||||
TITLE: string
|
||||
DESCRIPTION: string
|
||||
EMAIL: string
|
||||
NUM_POSTS_ON_HOMEPAGE: number
|
||||
SITEURL: string
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import defaultTheme from 'tailwindcss/defaultTheme'
|
|||
|
||||
const config: Config = {
|
||||
darkMode: ['selector'],
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
content: ['./src/**/*.{astro,md,mdx,ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue