Skip to content

Commit 24123f4

Browse files
kmurphypolygonkmurphypolygon
authored
Merge pull request 0xPolygon#201 from 0xPolygon/km/learn-frontpage
Doing the Learn front page and section styling
2 parents 3a1f5a8 + ba75262 commit 24123f4

File tree

9 files changed

+236
-48
lines changed

9 files changed

+236
-48
lines changed

‎docs/_site_essentials/stylesheets/extra.css‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,13 @@ div.main h2 {
106106

107107
h3 {
108108
margin-bottom: 0 !important;
109+
margin-top: 0px;
109110
font-size: 24px;
111+
margin-block-start: 0px;
112+
margin-block-end: 0px;
110113
font-weight: 600 !important;
111114
line-height: 1.2;
115+
color: var(--main-black) !important;
112116
font-family: Generalsans, sans-serif !important;
113117
}
114118

@@ -169,6 +173,8 @@ div.flex-figure div.flex-figure-right {
169173

170174
.feature-paragraph {
171175
text-align: left;
176+
margin-block-start: 0px;
177+
margin-block-end: 0px;
172178
}
173179

174180
.md-header--shadow {
@@ -319,10 +325,14 @@ div.main .nav-content {
319325
.heading-h3 {
320326
margin-bottom: 8px;
321327
font-size: 22px;
328+
margin-block-start: 0px;
329+
margin-block-end: 0px;
322330
}
323331

324332
.heading-h3.margin-none {
325333
margin-bottom: 0;
334+
margin-block-start: 0px;
335+
margin-block-end: 0px;
326336
}
327337

328338
.feature-paragraph {
@@ -539,11 +549,11 @@ div.main .nav-content {
539549
color: var(--purple);
540550
background-color: #ebe1ff;
541551
border-radius: 4px;
542-
margin-left: 10px;
543-
padding-left: 8px;
544-
padding-right: 8px;
545-
font-size: 12px;
546-
font-weight: 500;
552+
margin-left: 26px;
553+
padding-left: 4px;
554+
padding-right: 4px;
555+
font-size: 11px;
556+
font-weight: 600;
547557
}
548558

549559
.product-list-item-header {
@@ -563,6 +573,7 @@ div.main .nav-content {
563573
width: 16px;
564574
min-width: 16px;
565575
margin-left: 8px;
576+
margin-right: -16px;
566577
display: inline-block;
567578
}
568579
* {

‎docs/img/home/build-icon.svg‎

Lines changed: 9 additions & 6 deletions
Loading

‎docs/img/home/learn-icon.svg‎

Lines changed: 8 additions & 6 deletions
Loading

‎docs/img/learn/learn.svg‎

Lines changed: 98 additions & 0 deletions
Loading

‎docs/index.md‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ hide:
3737
<div class="flexbox-2-col">
3838
<div class="flex-card-child">
3939
<div class="flex-card-item header-item">
40-
<div class="product-list-header"><img src="img/home/build-icon.svg" loading="lazy" alt="">
40+
<div class="product-list-header"><img width="24px" src="img/home/build-icon.svg" loading="lazy" alt="">
4141
<h3 class="heading-h3 margin-none">BUILD</h3>
4242
</div>
4343
<p class="feature-paragraph">Build today using Polygon technology. Select the protocol that best fits your needs.</p>
@@ -95,12 +95,30 @@ hide:
9595
</div>
9696
<div class="flex-card-child">
9797
<div class="flex-card-item header-item">
98-
<div class="product-list-header"><img src="img/home/learn-icon.svg" loading="lazy" alt="">
98+
<div class="product-list-header"><img width="24px" src="img/home/learn-icon.svg" loading="lazy" alt="">
9999
<h3 class="heading-h3 margin-none">LEARN</h3>
100100
</div>
101101
<p class="feature-paragraph">Deep dives only. Further your understanding of Polygon scaling technology.</p>
102102
</div>
103103
<a href="learn" class="flex-card-item w-inline-block">
104+
<div class="product-list-item-header">
105+
<div class="feature-card-heading">Learn docs</div>
106+
<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">
107+
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
108+
</svg></div>
109+
</div>
110+
<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>
111+
</a>
112+
<a href="learn/welcome" class="flex-card-item w-inline-block">
113+
<div class="product-list-item-header">
114+
<div class="feature-card-heading">Welcome</div>
115+
<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">
116+
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
117+
</svg></div>
118+
</div>
119+
<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>
120+
</a>
121+
<a href="learn/deep-dive-arch" class="flex-card-item w-inline-block">
104122
<div class="product-list-item-header">
105123
<div class="feature-card-heading">Polygon 2.0</div>
106124
<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">
@@ -109,7 +127,7 @@ hide:
109127
</div>
110128
<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>
111129
</a>
112-
<a href="learn" class="flex-card-item w-inline-block">
130+
<a href="learn/liquidity-and-scalability" class="flex-card-item w-inline-block">
113131
<div class="product-list-item-header">
114132
<div class="feature-card-heading">Unified liquidity</div>
115133
<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">
@@ -118,14 +136,14 @@ hide:
118136
</div>
119137
<p class="feature-paragraph">Level up your understanding of zero-knowledge with whitepapers by the researchers at Polygon Labs.</p>
120138
</a>
121-
<a href="learn" class="flex-card-item w-inline-block">
139+
<a href="learn/polygon-protocols" class="flex-card-item w-inline-block">
122140
<div class="product-list-item-header">
123-
<div class="feature-card-heading">Architecture</div>
141+
<div class="feature-card-heading">Polygon protocols</div>
124142
<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">
125143
<path d="M9.98805 5.70133L3.41071 12.2787L4.58922 13.4572L11.1666 6.87976V12.2013H12.8333V4.03467H4.66665V5.70133H9.98805Z" fill="currentColor"></path>
126144
</svg></div>
127145
</div>
128-
<p class="feature-paragraph">The Polygon protocol that’s best for you. A guide and decision matrix.</p>
146+
<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>
129147
</a>
130148
</div>
131149
</div>

‎docs/learn/deep-dive-arch.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
### Deep-dive into the architecture
1+
## Deep-dive into the architecture
22

3-
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.
3+
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.

‎docs/learn/index.md‎

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,58 @@
1-
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.
2-
3-
The Learn section outlines scaling technologies, both live and in-development Polygon protocols, with the intention to display how they will all fit together.
4-
As these scaling technologies go live, details of the concepts will in tandem be documented and published.
5-
6-
This section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.
7-
8-
## Polygon 2.0: The basics
9-
10-
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.
11-
12-
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.
13-
14-
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.
15-
16-
### Zero-knowledge is the key
17-
18-
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.
19-
20-
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.
21-
22-
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.
23-
1+
---
2+
hide:
3+
- navigation
4+
- toc
5+
---
6+
7+
<style>
8+
.git-revision-date-localized-plugin, .md-source-file, .md-content__button.md-icon {
9+
display: none;
10+
}
11+
[data-md-color-scheme="default"] {
12+
.md-main, .md-sidebar__scrollwrap {
13+
background-color: #E8E8E8 !important;
14+
}
15+
}
16+
[data-md-color-scheme="slate"] {
17+
.md-main, .md-sidebar__scrollwrap {
18+
background-color: #181818 !important;
19+
}
20+
}
21+
</style>
22+
23+
<div class="section-wrapper product-section-head">
24+
<div class="hero-image"><img src="../img/learn/learn.svg" loading="lazy" class="hero-image" style="width: 40%; float: right;"></div>
25+
<div class="hero-left">
26+
<h1 class="hero-heading">Learn</h1>
27+
<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>
28+
<p class="hero-subtext">This section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.
29+
</p>
30+
</div>
31+
</div>
32+
<div class="grid-container">
33+
<div class="grid-item">
34+
<a href="./liquidity-and-scalability">
35+
<div class="product-list-item-header">
36+
<div class="feature-card-heading">Liquidity and scalability</div>
37+
</div>
38+
<p class="feature-paragraph">ZK-powered L2s to unify liquidity across ecosystem and scale on demand.</p>
39+
</a>
40+
</div>
41+
<div class="grid-item">
42+
<a href="./polygon-protocols">
43+
<div class="product-list-item-header">
44+
<div class="feature-card-heading">Polygon 2.0</div>
45+
</div>
46+
<p class="feature-paragraph">Widely-adopted EVM-compatible sidechain designed for low transaction costs and fast transaction times.</p>
47+
</a>
48+
</div>
49+
<div class="grid-item">
50+
<a href="./deep-dive-arch">
51+
<div class="product-list-item-header">
52+
<div class="feature-card-heading">Deep dive into the architecture</div>
53+
</div>
54+
<p class="feature-paragraph">Read the blog for a deeper dive into the upcoming technologies.</p>
55+
</a>
56+
</div>
57+
</div>
58+
</div>

‎docs/learn/welcome.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
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.
2+
3+
The Learn section gives you a peek into the future, the Polygon 2.0 vision which is community-driven.
4+
5+
## Polygon 2.0: The basics
6+
7+
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.
8+
9+
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.
10+
11+
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.
12+
13+
### Zero-knowledge is the key
14+
15+
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.
16+
17+
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.
18+
19+
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.
20+

‎mkdocs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,7 @@ nav:
571571
- OKLink: https://www.oklink.com/polygon
572572
- Learn:
573573
- Learn: learn/index.md
574+
- Welcome: learn/welcome.md
574575
- Unified liquidity and scalability: learn/liquidity-and-scalability.md
575576
- Polygon protocols: learn/polygon-protocols.md
576577
- Polygon 2.0 architecture: learn/deep-dive-arch.md

0 commit comments

Comments
 (0)