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',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
docId: 'intro',
|
||||
position: 'left',
|
||||
label: 'Getting Started',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/jackallabs/canine-chain',
|
||||
label: 'GitHub',
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--ifm-font-family-base: SegoeUISemi;
|
||||
/* --ifm-background-color: #eef0f2; */
|
||||
|
||||
}
|
||||
|
||||
@ -39,6 +40,10 @@ body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.no-margin{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: bold;
|
||||
@ -54,4 +59,67 @@ h1 {
|
||||
--ifm-color-primary-lighter: #c1f0cd;
|
||||
--ifm-color-primary-lightest: #dff7e6;
|
||||
--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() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<header className="main-header">
|
||||
<div className="container">
|
||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<h1 className="main-title">{siteConfig.title}</h1>
|
||||
<p className="main-subtitle">{siteConfig.tagline}</p>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
className="button button--secondary button--lg margin-bottom--xl"
|
||||
to="/docs/intro">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</header>
|
||||
);
|
||||
@ -33,9 +84,6 @@ export default function Home() {
|
||||
title={`${siteConfig.title}`}
|
||||
description="Documentation for the Jackal Ecosystem.">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user