Skip to content

Commit

Permalink
Release 12-11-2024 (#236)
Browse files Browse the repository at this point in the history 
[LISKDOCS-14] Update Docs UI to match the Lisk Rebranding (#235)

* Replace new fonts, update colors, etc.

* Apply changes to styling in light and dark mode. Update images

* Replace homepage images and style them

* Update logos, footer, images and buttons' styling

* Apply Rita Osokina's feedback

* Apply Dominic's feedback

* Apply Mona's feedback.

* Apply Mona's feedback.

* Update padding of 'heroBanner'
  • Loading branch information
@TalhaMaliktz
TalhaMaliktz authored Nov 12, 2024
1 parent bcf7bfd commit fde60e8
Show file tree
Hide file tree
Showing 71 changed files with 380 additions and 817 deletions.
Binary file removed docs/building-on-lisk/img/docsVersionDropdown.png
View file
Binary file not shown.
Binary file removed docs/building-on-lisk/img/localeDropdown.png
View file
Binary file not shown.
8 changes: 5 additions & 3 deletions docs/intro.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ keywords:
---

# Introduction to Lisk
<span className="overview-span">
{/* <span className="overview-span">
<h2>Getting started</h2>
<img src="/img/bannerwhite.svg" alt="Getting started" className="overview-img" />
</span>
</span> */}


Lisk provides a cost-efficient, fast, and scalable Layer 2 (L2) network based on [Optimism](https://docs.optimism.io/) (OP) that is secured by Ethereum.
Expand All @@ -52,4 +52,6 @@ Any L2 based on OP Stack is designed so that users can send arbitrary messages b
For more information on the tokens available on Lisk see [Optimism Tokens](https://cryptorank.io/blockchains/optimism).

:::info
Lisk is an OP stack chain and is designed to be [EVM equivalent](https://web.archive.org/web/20231127160757/https://medium.com/ethereum-optimism/introducing-evm-equivalence-5c2021deb306). However, there are a few differences between [Ethereum and OP stack chains](https://docs.optimism.io/stack/differences), which developers should be aware of.
Lisk is an OP stack chain and is designed to be [EVM equivalent](https://web.archive.org/web/20231127160757/https://medium.com/ethereum-optimism/introducing-evm-equivalence-5c2021deb306).
However, there are a few differences between [Ethereum and OP stack chains](https://docs.optimism.io/stack/differences), which developers should be aware of.
:::
27 changes: 13 additions & 14 deletions src/components/HomepageFeatures/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,58 +7,57 @@ const FeatureList = [
{
img: (
<>
<img src='/img/lisk-light.svg' className='lisk-smp-light'></img>
<img src='/img/lisk-dark.svg' className='lisk-smp-dark'></img>
<img src='/img/Lisk.svg' className='lisk-smp'></img>
</>
),
title: 'What is Lisk?',
description: (
<>
<p>Lisk offers a highly efficient, lightning-fast, and easily scalable Layer 2 (L2) network built on Optimism (OP) and secured by Ethereum.</p>
<p className='line-space-text' style={{ marginBottom: '4%' }}>Lisk offers a highly efficient, lightning-fast, and easily scalable Layer 2 (L2) network built on Optimism (OP) and secured by Ethereum.
</p>
<br></br>
<br></br>
<Link
className="button button--secondary button--lg btn-custom"
to="/docs/">
EXPLORE
Explore
</Link>
</>
),
},
{
img: (
<>
<img src='/img/build-light.svg' className='lisk-smp-light'></img>
<img src='/img/build-dark.svg' className='lisk-smp-dark'></img>
<img src='/img/build.svg' className='lisk-smp'></img>
</>
),
title: 'Build with Lisk',
description: (
<>
<p>Lisk offers low-cost transactions, EVM compatibility, and support for all major developer frameworks, making it the top choice for developers. Join Lisk to access essential technical materials for your development journey.</p>
<p className='line-space-text'>Lisk offers low-cost transactions, EVM compatibility, and support for all major developer frameworks, making it the top choice for developers. Join Lisk to access essential technical materials for your development journey.</p>
{/* <br></br> */}
<Link
className="button button--secondary button--lg btn-custom"
to="/category/building-on-lisk">
GET STARTED
Get started
</Link>
</>
),
},
{
img: (
<>
<img src='/img/lisk-ecosystem-light.svg' className='lisk-smp-light'></img>
<img src='/img/lisk-ecosystem-dark.svg' className='lisk-smp-dark'></img>
<img src='/img/lisk-ecosystem.svg' className='lisk-smp'></img>
</>
),
title: 'Ecosystem for the future',
description: (
<>
<p>Lisk embraces the superchain framework, offering decentralized <Link to="/category/governance">governance</Link> and an interoperable ecosystem. We provide <Link to="https://lisk.com/blog/posts/say-hello-to-the-new-Lisk-L2-grant-program">grant programs</Link> to support the development of products and advocate for the principles of a decentralized world and inclusivity.</p>
<p className='line-space-text'>Lisk embraces the superchain framework, offering decentralized <Link to="/category/governance">governance</Link> and an interoperable ecosystem. We provide <Link to="https://lisk.com/blog/posts/say-hello-to-the-new-Lisk-L2-grant-program">grant programs</Link> to support the development of products and advocate for the principles of a decentralized world and inclusivity.</p>
<Link
className="button button--secondary button--lg btn-custom"
to="/governance/overview">
LEARN MORE
Learn more
</Link>
</>
),
Expand All @@ -71,8 +70,8 @@ function Feature({ img, title, description }) {
<div className="text--center">
<p>{img}</p>
</div>
<div className="text--center text-style-custom padding-horiz--md">
<Heading as="h3">{title}</Heading>
<div className="text--center homepage-text-style-custom padding-horiz--md">
<Heading as="h5">{title}</Heading>
<p>{description}</p>
</div>
</div>
Expand Down
52 changes: 25 additions & 27 deletions src/css/admonitions.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
/* Light mode configurations */

.theme-admonition-info {
background-color: rgba(64, 112, 244, 0.10);
border: var(--ifm-alert-border-width) solid rgba(64, 112, 244, 1);
background-color: rgba(209, 208, 251, 0.25);
border: var(--ifm-alert-border-width) solid rgba(97, 63, 255, 1);
border-left-width: var(--ifm-alert-border-left-width);

}

.theme-admonition-info code {
background-color: rgb(246, 247, 248)
}

.theme-admonition-tip {
background-color: rgba(43, 214, 123, 0.15);
border: var(--ifm-alert-border-width) solid rgba(43, 214, 123, 1);
background-color: rgba(204, 255, 238, 0.25);
border: var(--ifm-alert-border-width) solid rgba(0, 170, 98, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

Expand All @@ -22,8 +21,8 @@
}

.theme-admonition-danger {
background-color: rgba(255, 69, 87, 0.15);
border: var(--ifm-alert-border-width) solid rgba(255, 69, 87, 1);
background-color: rgba(250, 199, 190, .25);
border: var(--ifm-alert-border-width) solid rgba(232, 77, 49, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

Expand All @@ -32,8 +31,8 @@
}

.theme-admonition-note {
background-color: rgb(197, 207, 228, 0.15);
border: var(--ifm-alert-border-width) solid rgb(197, 207, 228, 1);
background-color: rgba(209, 215, 225, .25);
border: var(--ifm-alert-border-width) solid rgba(40, 49, 61, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

Expand All @@ -42,64 +41,63 @@
}

.theme-admonition-caution {
background-color: rgba(247, 227, 109, 0.15);
border: var(--ifm-alert-border-width) solid rgba(247, 227, 109, 1);
background-color: rgba(250, 225, 183, 0.25);
border: var(--ifm-alert-border-width) solid rgba(232, 177, 77, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

.theme-admonition-caution code {
background-color: rgb(246, 247, 248)
}


/* Dark mode configurations */

[data-theme='dark'] .theme-admonition-info {
background-color: rgba(64, 112, 244, 0.20);
border: var(--ifm-alert-border-width) solid rgba(64, 112, 244, 1);
background-color: rgba(97, 63, 255, .5);
border: var(--ifm-alert-border-width) solid rgba(97, 63, 255, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

[data-theme='dark'] .theme-admonition-info code {
background-color: rgb(246 247 248 / 30%)
background-color: rgba(209, 208, 251, 0.30);
}

[data-theme='dark'] .theme-admonition-tip {
background-color: rgba(43, 214, 123, 0.20);
border: var(--ifm-alert-border-width) solid rgba(43, 214, 123, 1);
background-color: rgba(0, 170, 98, .5);
border: var(--ifm-alert-border-width) solid rgba(0, 170, 98, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

[data-theme='dark'] .theme-admonition-tip code {
background-color: rgb(255, 255, 255, .30);
background-color: rgba(209, 208, 251, 0.30);
}

[data-theme='dark'] .theme-admonition-danger {
background-color: rgba(255, 69, 87, 0.20);
border: var(--ifm-alert-border-width) solid rgba(255, 69, 87, 1);
background-color: rgba(232, 77, 49, .5);
border: var(--ifm-alert-border-width) solid rgba(232, 77, 49, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

[data-theme='dark'] .theme-admonition-danger code {
background-color: rgb(246 247 248 / 30%)
background-color: rgba(209, 208, 251, 0.30);
}

[data-theme='dark'] .theme-admonition-note {
background-color: rgb(197, 207, 228, 0.20);
border: var(--ifm-alert-border-width) solid rgb(197, 207, 228, 1);
background-color: rgba(40, 49, 61, .5);
border: var(--ifm-alert-border-width) solid rgba(40, 49, 61, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

[data-theme='dark'] .theme-admonition-note code {
background-color: rgb(246 247 248 / 30%)
background-color: rgba(209, 208, 251, 0.30);
}

[data-theme='dark'] .theme-admonition-caution {
background-color: rgba(247, 227, 109, 0.20);
border: var(--ifm-alert-border-width) solid rgba(247, 227, 109, 1);
background-color: rgba(232, 177, 77, .5);
border: var(--ifm-alert-border-width) solid rgba(232, 177, 77, 1);
border-left-width: var(--ifm-alert-border-left-width);
}

[data-theme='dark'] .theme-admonition-caution code {
background-color: rgb(246 247 248 / 30%)
background-color: rgba(209, 208, 251, 0.30);
}
Loading

0 comments on commit fde60e8

Please sign in to comment.