20260608160402
This commit is contained in:
oneao committed
1 parent
1fd956966c
commit
930f03954a
339 files changed
+2175
-140695
No files matched your search
@@ -1,23 +1,314 @@
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.page {
|
||||
min-height: calc(100vh - var(--ifm-navbar-height));
|
||||
background:
|
||||
linear-gradient(180deg, var(--oneao-surface-muted), transparent 44%),
|
||||
linear-gradient(90deg, var(--oneao-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(0deg, var(--oneao-grid-line) 1px, transparent 1px),
|
||||
var(--ifm-background-color);
|
||||
background-size: auto, 28px 28px, 28px 28px, auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
.hero {
|
||||
display: flex;
|
||||
min-height: calc(100vh - var(--ifm-navbar-height));
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.heroInner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copy {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.brandLine {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: var(--ifm-heading-color);
|
||||
font-size: 5rem;
|
||||
line-height: 0.96;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 1.25rem 0 0;
|
||||
color: var(--ifm-color-primary-dark);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 640px;
|
||||
margin: 1rem 0 0;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.topicRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.topicRow span {
|
||||
padding: 0.35rem 0.65rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.statusLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.statusLine span {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 5px var(--oneao-surface-muted);
|
||||
}
|
||||
|
||||
.statusLine p {
|
||||
margin: 0;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.previewWrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 14px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
box-shadow: 0 24px 60px var(--oneao-shadow);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.previewShadow {
|
||||
position: absolute;
|
||||
inset: 1.5rem -1.5rem -1.5rem 1.5rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 14px;
|
||||
background: var(--oneao-surface-soft);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.previewHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-bottom: 1px solid var(--oneao-border);
|
||||
}
|
||||
|
||||
.previewHeader span {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
border-radius: 50%;
|
||||
background: var(--ifm-color-emphasis-300);
|
||||
}
|
||||
|
||||
.previewHeader strong {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.previewBody {
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
display: inline-flex;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--ifm-color-primary-dark);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.previewBody h2 {
|
||||
margin: 0;
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.previewBody p {
|
||||
margin: 0.75rem 0 1.25rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
margin: 1rem 0 1.25rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 10px;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
.codeBlock span {
|
||||
overflow: hidden;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 0.78rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.noteLines {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
margin: 1rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.noteLines span {
|
||||
display: block;
|
||||
height: 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(1) {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(2) {
|
||||
width: 74%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(3) {
|
||||
width: 86%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(4) {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.noteFooter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--oneao-border);
|
||||
}
|
||||
|
||||
.noteFooter span {
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.miniCard {
|
||||
position: absolute;
|
||||
right: -1.25rem;
|
||||
bottom: -1.4rem;
|
||||
width: 190px;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 12px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
box-shadow: 0 14px 34px var(--oneao-shadow);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.miniCard strong {
|
||||
display: block;
|
||||
margin-bottom: 0.7rem;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.miniCard div {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.miniCard span {
|
||||
display: block;
|
||||
height: 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.miniCard span:first-child {
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
.miniCard span:last-child {
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.heroInner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.preview {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.previewShadow,
|
||||
.miniCard {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 576px) {
|
||||
.hero {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +1,92 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import Link from '@docusaurus/Link'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures'
|
||||
import Heading from '@theme/Heading'
|
||||
import Layout from '@theme/Layout'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import styles from './index.module.css'
|
||||
|
||||
function HomepageHeader() {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className="hero__title">
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
{/* <Link className="button button--secondary button--lg" to="/docs/intro">
|
||||
Docusaurus Tutorial - 5min ⏱️
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
const topics = ['Clean', 'Focused', 'Reusable', 'Long-term']
|
||||
|
||||
export default function Home(): ReactNode {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />"
|
||||
title={siteConfig.title}
|
||||
description="oneao 的个人技术笔记和资料整理。"
|
||||
>
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
<main className={styles.page}>
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroInner}>
|
||||
<div className={styles.copy}>
|
||||
<div className={styles.brandLine}>
|
||||
<img src="/img/logo.png" alt="" className={styles.logo} />
|
||||
<span>oneao notes</span>
|
||||
</div>
|
||||
<Heading as="h1" className={styles.title}>
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className={styles.subtitle}>
|
||||
技术 · 笔记 · 记录
|
||||
</p>
|
||||
<p className={styles.description}>
|
||||
一个保持简洁、方便回看的个人站点，用来沉淀日常记录、长期维护的资料和可复用的信息。
|
||||
</p>
|
||||
<div className={styles.topicRow} aria-label="笔记主题">
|
||||
{topics.map(topic => (
|
||||
<span key={topic}>{topic}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.statusLine}>
|
||||
<span />
|
||||
<p>保持内容克制、结构清晰，方便之后快速回看。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.previewWrap}>
|
||||
<div className={styles.previewShadow} />
|
||||
<div className={styles.preview} aria-label="笔记预览">
|
||||
<div className={styles.previewHeader}>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<strong>oneao.cn</strong>
|
||||
</div>
|
||||
<div className={styles.previewBody}>
|
||||
<span className={styles.kicker}>Personal Archive</span>
|
||||
<h2>整理、沉淀、回看</h2>
|
||||
<p>
|
||||
把零散信息收束成清晰页面，让每次查找都更直接。
|
||||
</p>
|
||||
<div className={styles.codeBlock}>
|
||||
<span>clear structure</span>
|
||||
<span>quiet interface</span>
|
||||
<span>steady updates</span>
|
||||
</div>
|
||||
<div className={styles.noteLines}>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
<div className={styles.noteFooter}>
|
||||
<span>Notes</span>
|
||||
<span>Archive</span>
|
||||
<span>Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.miniCard}>
|
||||
<strong>Simple Index</strong>
|
||||
<div>
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user