Skip to content

Commit

Permalink
Merge pull request #201 from 0xPolygon/km/learn-frontpage
Browse files Browse the repository at this point in the history
Doing the Learn front page and section styling
  • Loading branch information
kmurphypolygon authored Feb 9, 2024
2 parents 3a1f5a8 + ba75262 commit 24123f4
Show file tree
Hide file tree
Showing 9 changed files with 236 additions and 48 deletions.
21 changes: 16 additions & 5 deletions docs/_site_essentials/stylesheets/extra.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,13 @@ div.main h2 {

h3 {
margin-bottom: 0 !important;
margin-top: 0px;
font-size: 24px;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: 600 !important;
line-height: 1.2;
color: var(--main-black) !important;
font-family: Generalsans, sans-serif !important;
}

Expand Down Expand Up @@ -169,6 +173,8 @@ div.flex-figure div.flex-figure-right {

.feature-paragraph {
text-align: left;
margin-block-start: 0px;
margin-block-end: 0px;
}

.md-header--shadow {
Expand Down Expand Up @@ -319,10 +325,14 @@ div.main .nav-content {
.heading-h3 {
margin-bottom: 8px;
font-size: 22px;
margin-block-start: 0px;
margin-block-end: 0px;
}

.heading-h3.margin-none {
margin-bottom: 0;
margin-block-start: 0px;
margin-block-end: 0px;
}

.feature-paragraph {
Expand Down Expand Up @@ -539,11 +549,11 @@ div.main .nav-content {
color: var(--purple);
background-color: #ebe1ff;
border-radius: 4px;
margin-left: 10px;
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
font-weight: 500;
margin-left: 26px;
padding-left: 4px;
padding-right: 4px;
font-size: 11px;
font-weight: 600;
}

.product-list-item-header {
Expand All @@ -563,6 +573,7 @@ div.main .nav-content {
width: 16px;
min-width: 16px;
margin-left: 8px;
margin-right: -16px;
display: inline-block;
}
* {
Expand Down
15 changes: 9 additions & 6 deletions docs/img/home/build-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 8 additions & 6 deletions docs/img/home/learn-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 98 additions & 0 deletions docs/img/learn/learn.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 24 additions & 6 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ hide:
<div class="flexbox-2-col">
<div class="flex-card-child">
<div class="flex-card-item header-item">
<div class="product-list-header"><img src="img/home/build-icon.svg" loading="lazy" alt="">
<div class="product-list-header"><img width="24px" src="img/home/build-icon.svg" loading="lazy" alt="">
<h3 class="heading-h3 margin-none">BUILD</h3>
</div>
<p class="feature-paragraph">Build today using Polygon technology. Select the protocol that best fits your needs.</p>
Expand Down Expand Up @@ -95,12 +95,30 @@ hide:
</div>
<div class="flex-card-child">
<div class="flex-card-item header-item">
<div class="product-list-header"><img src="img/home/learn-icon.svg" loading="lazy" alt="">
<div class="product-list-header"><img width="24px" src="img/home/learn-icon.svg" loading="lazy" alt="">
<h3 class="heading-h3 margin-none">LEARN</h3>
</div>
<p class="feature-paragraph">Deep dives only. Further your understanding of Polygon scaling technology.</p>
</div>
<a href="learn" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Learn docs</div>
<div class="arrow-embed w-embed"><svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewbox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg></div>
</div>
<p class="feature-paragraph"> Resources focused on both current and future Polygon technologies. It features detailed guides, foundational concepts, and previews of upcoming innovations. </p>
</a>
<a href="learn/welcome" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Welcome</div>
<div class="arrow-embed w-embed"><svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewbox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg></div>
</div>
<p class="feature-paragraph"> This segment aims to educate users about the intricacies of ZK-powered L2s on Ethereum, offering a blend of theoretical understanding and practical application.</p>
</a>
<a href="learn/deep-dive-arch" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Polygon 2.0</div>
<div class="arrow-embed w-embed"><svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewbox="0 0 16 17" fill="none">
Expand All @@ -109,7 +127,7 @@ hide:
</div>
<p class="feature-paragraph">A vision for a unified web of ZK-powered L2s on Ethereum, built using Polygon technology. Unlimited scale, unified liquidity, and blockspace on demand.</p>
</a>
<a href="learn" class="flex-card-item w-inline-block">
<a href="learn/liquidity-and-scalability" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Unified liquidity</div>
<div class="arrow-embed w-embed"><svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewbox="0 0 16 17" fill="none">
Expand All @@ -118,14 +136,14 @@ hide:
</div>
<p class="feature-paragraph">Level up your understanding of zero-knowledge with whitepapers by the researchers at Polygon Labs.</p>
</a>
<a href="learn" class="flex-card-item w-inline-block">
<a href="learn/polygon-protocols" class="flex-card-item w-inline-block">
<div class="product-list-item-header">
<div class="feature-card-heading">Architecture</div>
<div class="feature-card-heading">Polygon protocols</div>
<div class="arrow-embed w-embed"><svg xmlns="http://www.w3.org/2000/svg" display="block" width="100%" height="auto" viewbox="0 0 16 17" fill="none">
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
</svg></div>
</div>
<p class="feature-paragraph">The Polygon protocol that’s best for you. A guide and decision matrix.</p>
<p class="feature-paragraph">The Polygon protocol that’s best for you. A guide and decision matrix designed to empower users to navigate the evolving world of decentralization.</p>
</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/learn/deep-dive-arch.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
### Deep-dive into the architecture
## Deep-dive into the architecture

For a deep dive into the proposed architecture of Polygon 2.0, please read the blog post [here](https://polygon.technology/blog/polygon-2-0-protocol-vision-and-architecture). More details will be forthcoming and added to this section in the coming months.
For a deep dive into the proposed architecture of Polygon 2.0, please read the blog post [here](https://polygon.technology/blog/polygon-2-0-protocol-vision-and-architecture). More details will be forthcoming and added to this section in the coming months.
81 changes: 58 additions & 23 deletions docs/learn/index.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,58 @@
The Polygon Knowledge Layer consists of two parts. Firstly, documents that developers need in order to build with Polygon protocols. Secondly, resources necessary for learning about Polygon technologies.

The Learn section outlines scaling technologies, both live and in-development Polygon protocols, with the intention to display how they will all fit together.
As these scaling technologies go live, details of the concepts will in tandem be documented and published.

This section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.

## Polygon 2.0: The basics

Polygon technologies will help developers build in an elastically scalable and unified ecosystem of ZK-powered Layer 2s on Ethereum, where users can create, program and exchange value.

The Polygon 2.0 vision is a unified multichain ecosystem. A web of interoperable ZK-powered Ethereum L2s, with near-instant and atomic L2 <> L2 transactions, and designed to empower developers to build without limitations. Developers will choose to build dApps, design and launch dedicated application-specific L2 chains, or migrate existing EVM Layer 1 chains to become an L2.

The endgame of Polygon 2.0 is for developers to build in an environment that feels and functions more like the internet. This means a blockchain ecosystem that can scale without limit, seamlessly unified, and backed by the decentralization and security of Ethereum.

### Zero-knowledge is the key

Fundamentally, building this web of ZK-powered L2s comes down to one challenge: trustless, off-chain computation. In order to scale Ethereum, one needs to preserve Ethereum’s execution logic while making it more efficient.

The best way to accomplish this goal is through zero-knowledge cryptography as it is capable of providing verifiable proofs that attest to the integrity of off-chain computations. Otherwise, scaling technologies often have to add additional social-economic mechanisms to mediate off-chain computations. The consequence of which is delayed settlement of transactions.

Polygon 2.0 applies the open source, zero-knowledge scaling technology developed at Polygon Labs, and this will allow Ethereum to scale to the limits of the internet.

---
hide:
- navigation
- toc
---

<style>
.git-revision-date-localized-plugin, .md-source-file, .md-content__button.md-icon {
display: none;
}
[data-md-color-scheme="default"] {
.md-main, .md-sidebar__scrollwrap {
background-color: #E8E8E8 !important;
}
}
[data-md-color-scheme="slate"] {
.md-main, .md-sidebar__scrollwrap {
background-color: #181818 !important;
}
}
</style>

<div class="section-wrapper product-section-head">
<div class="hero-image"><img src="../img/learn/learn.svg" loading="lazy" class="hero-image" style="width: 40%; float: right;"></div>
<div class="hero-left">
<h1 class="hero-heading">Learn</h1>
<p class="hero-subtext">The Polygon Knowledge Layer consists of two parts. Firstly, tech docs that developers need in order to build with Polygon protocols. Secondly, resources necessary for learning about Polygon technologies.</p>
<p class="hero-subtext">This section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.
</p>
</div>
</div>
<div class="grid-container">
<div class="grid-item">
<a href="./liquidity-and-scalability">
<div class="product-list-item-header">
<div class="feature-card-heading">Liquidity and scalability</div>
</div>
<p class="feature-paragraph">ZK-powered L2s to unify liquidity across ecosystem and scale on demand.</p>
</a>
</div>
<div class="grid-item">
<a href="./polygon-protocols">
<div class="product-list-item-header">
<div class="feature-card-heading">Polygon 2.0</div>
</div>
<p class="feature-paragraph">Widely-adopted EVM-compatible sidechain designed for low transaction costs and fast transaction times.</p>
</a>
</div>
<div class="grid-item">
<a href="./deep-dive-arch">
<div class="product-list-item-header">
<div class="feature-card-heading">Deep dive into the architecture</div>
</div>
<p class="feature-paragraph">Read the blog for a deeper dive into the upcoming technologies.</p>
</a>
</div>
</div>
</div>
20 changes: 20 additions & 0 deletions docs/learn/welcome.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
The Polygon Knowledge Layer consists of two parts. Firstly, documents that developers need in order to build with Polygon protocols. Secondly, resources necessary for learning about Polygon technologies.

The Learn section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.

## Polygon 2.0: The basics

Polygon technologies will help developers build in an elastically scalable and unified ecosystem of ZK-powered Layer 2s on Ethereum, where users can create, program and exchange value.

The Polygon 2.0 vision is a unified multichain ecosystem. A web of interoperable ZK-powered Ethereum L2s, with near-instant and atomic L2 <> L2 transactions, and designed to empower developers to build without limitations. Developers will choose to build dApps, design and launch dedicated application-specific L2 chains, or migrate existing EVM Layer 1 chains to become an L2.

The endgame of Polygon 2.0 is for developers to build in an environment that feels and functions more like the internet. This means a blockchain ecosystem that can scale without limit, seamlessly unified, and backed by the decentralization and security of Ethereum.

### Zero-knowledge is the key

Fundamentally, building this web of ZK-powered L2s comes down to one challenge: trustless, off-chain computation. In order to scale Ethereum, one needs to preserve Ethereum’s execution logic while making it more efficient.

The best way to accomplish this goal is through zero-knowledge cryptography as it is capable of providing verifiable proofs that attest to the integrity of off-chain computations. Otherwise, scaling technologies often have to add additional social-economic mechanisms to mediate off-chain computations. The consequence of which is delayed settlement of transactions.

Polygon 2.0 applies the open source, zero-knowledge scaling technology developed at Polygon Labs, and this will allow Ethereum to scale to the limits of the internet.

1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@ nav:
- OKLink: https://www.oklink.com/polygon
- Learn:
- Learn: learn/index.md
- Welcome: learn/welcome.md
- Unified liquidity and scalability: learn/liquidity-and-scalability.md
- Polygon protocols: learn/polygon-protocols.md
- Polygon 2.0 architecture: learn/deep-dive-arch.md
Expand Down

0 comments on commit 24123f4

Please sign in to comment.