styling the jackal docs homepage
This commit is contained in:
Marston Connell
parent
ed94482513
commit
05f84a1757
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
slug: first-blog-post
|
|
||||||
title: First Blog Post
|
|
||||||
authors:
|
|
||||||
name: Gao Wei
|
|
||||||
title: Docusaurus Core Team
|
|
||||||
url: https://github.com/wgao19
|
|
||||||
image_url: https://github.com/wgao19.png
|
|
||||||
tags: [hola, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
---
|
|
||||||
slug: long-blog-post
|
|
||||||
title: Long Blog Post
|
|
||||||
authors: endi
|
|
||||||
tags: [hello, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
This is the summary of a very long blog post,
|
|
||||||
|
|
||||||
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
|
||||||
|
|
||||||
<!--truncate-->
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
slug: mdx-blog-post
|
|
||||||
title: MDX Blog Post
|
|
||||||
authors: [slorber]
|
|
||||||
tags: [docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
|
|
||||||
Use the power of React to create interactive blog posts.
|
|
||||||
|
|
||||||
```js
|
|
||||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
||||||
```
|
|
||||||
|
|
||||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
||||||
|
|
||||||
:::
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
@ -1,25 +0,0 @@
|
|||||||
---
|
|
||||||
slug: welcome
|
|
||||||
title: Welcome
|
|
||||||
authors: [slorber, yangshun]
|
|
||||||
tags: [facebook, hello, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
|
||||||
|
|
||||||
Simply add Markdown files (or folders) to the `blog` directory.
|
|
||||||
|
|
||||||
Regular blog authors can be added to `authors.yml`.
|
|
||||||
|
|
||||||
The blog post date can be extracted from filenames, such as:
|
|
||||||
|
|
||||||
- `2019-05-30-welcome.md`
|
|
||||||
- `2019-05-30-welcome/index.md`
|
|
||||||
|
|
||||||
A blog post folder can be convenient to co-locate blog post images:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The blog supports tags as well!
|
|
||||||
|
|
||||||
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
endi:
|
|
||||||
name: Endilie Yacop Sucipto
|
|
||||||
title: Maintainer of Docusaurus
|
|
||||||
url: https://github.com/endiliey
|
|
||||||
image_url: https://github.com/endiliey.png
|
|
||||||
|
|
||||||
yangshun:
|
|
||||||
name: Yangshun Tay
|
|
||||||
title: Front End Engineer @ Facebook
|
|
||||||
url: https://github.com/yangshun
|
|
||||||
image_url: https://github.com/yangshun.png
|
|
||||||
|
|
||||||
slorber:
|
|
||||||
name: Sébastien Lorber
|
|
||||||
title: Docusaurus maintainer
|
|
||||||
url: https://sebastienlorber.com
|
|
||||||
image_url: https://github.com/slorber.png
|
|
||||||
@ -63,12 +63,6 @@ const config = {
|
|||||||
src: 'img/jklimage.png',
|
src: 'img/jklimage.png',
|
||||||
},
|
},
|
||||||
items: [
|
items: [
|
||||||
{
|
|
||||||
type: 'doc',
|
|
||||||
docId: 'intro',
|
|
||||||
position: 'left',
|
|
||||||
label: 'Getting Started',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
href: 'https://github.com/jackallabs/canine-chain',
|
href: 'https://github.com/jackallabs/canine-chain',
|
||||||
label: 'GitHub',
|
label: 'GitHub',
|
||||||
|
|||||||
@ -27,6 +27,7 @@
|
|||||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
--ifm-font-family-base: SegoeUISemi;
|
--ifm-font-family-base: SegoeUISemi;
|
||||||
|
/* --ifm-background-color: #eef0f2; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -39,6 +40,10 @@ body {
|
|||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-margin{
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -54,4 +59,67 @@ h1 {
|
|||||||
--ifm-color-primary-lighter: #c1f0cd;
|
--ifm-color-primary-lighter: #c1f0cd;
|
||||||
--ifm-color-primary-lightest: #dff7e6;
|
--ifm-color-primary-lightest: #dff7e6;
|
||||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.main-header{
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title{
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-subtitle{
|
||||||
|
font-size: 32px;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-heading{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-card{
|
||||||
|
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
|
||||||
|
border: 1px solid var(--ifm-color-emphasis-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar{
|
||||||
|
box-shadow: none;
|
||||||
|
border-bottom: 1px solid var(--ifm-toc-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-wrapper, .navbar__inner{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 640px){
|
||||||
|
.container, .main-wrapper, .navbar__inner {
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px){
|
||||||
|
.container, .main-wrapper, .navbar__inner {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px){
|
||||||
|
.container, .main-wrapper, .navbar__inner {
|
||||||
|
max-width: 1024px;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.container, .main-wrapper, .navbar__inner {
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -10,17 +10,68 @@ import styles from './index.module.css';
|
|||||||
function HomepageHeader() {
|
function HomepageHeader() {
|
||||||
const {siteConfig} = useDocusaurusContext();
|
const {siteConfig} = useDocusaurusContext();
|
||||||
return (
|
return (
|
||||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
<header className="main-header">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
<h1 className="main-title">{siteConfig.title}</h1>
|
||||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
<p className="main-subtitle">{siteConfig.tagline}</p>
|
||||||
<div className={styles.buttons}>
|
|
||||||
<Link
|
<Link
|
||||||
className="button button--secondary button--lg"
|
className="button button--secondary button--lg margin-bottom--xl"
|
||||||
to="/docs/intro">
|
to="/docs/intro">
|
||||||
Get Started
|
Get Started
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
<h2 className="component-heading">About Jackal</h2>
|
||||||
|
<div className='row margin-top--md'>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="/docs/protocol/modules/module-overview">
|
||||||
|
<h2 className='no-margin'>Jackal Protocol</h2>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="/docs/protocol/validators">
|
||||||
|
<h2 className='no-margin'>Networks</h2>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="https://discord.com/invite/5GKym3p6rj">
|
||||||
|
<h2 className='no-margin'>Join the Community</h2>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
<h2 className="component-heading">Get Involved</h2>
|
||||||
|
<div className='row margin-top--md'>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="/docs/using-jackal/wallet">
|
||||||
|
<h2>Get a Wallet</h2>
|
||||||
|
<div>Set up an account on Jackal to interact with the chain</div>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="/docs/using-jackal/delegate">
|
||||||
|
<h2>Staking and Liquidity</h2>
|
||||||
|
<div>Learn how to earn yield on your JKL tokens</div>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
<article className='col col--4'>
|
||||||
|
<Link
|
||||||
|
className="card main-card padding--lg margin-bottom--lg"
|
||||||
|
to="https://github.com/JackalLabs/canine-docs">
|
||||||
|
<h2>Contribute</h2>
|
||||||
|
<div>Maintain and improve the Jackal Documentation</div>
|
||||||
|
</Link>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
@ -33,9 +84,6 @@ export default function Home() {
|
|||||||
title={`${siteConfig.title}`}
|
title={`${siteConfig.title}`}
|
||||||
description="Documentation for the Jackal Ecosystem.">
|
description="Documentation for the Jackal Ecosystem.">
|
||||||
<HomepageHeader />
|
<HomepageHeader />
|
||||||
<main>
|
|
||||||
<HomepageFeatures />
|
|
||||||
</main>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user