styling the jackal docs homepage

This commit is contained in:
Marston Connell 2022-09-02 13:17:42 -04:00
parent ed94482513
commit 05f84a1757
9 changed files with 125 additions and 133 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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:
![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
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.

View File

@ -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

View File

@ -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',

View File

@ -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;
}
}

View File

@ -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>
);
}