Skip to content

Commit 5417849

Browse files
0xgraciegrace0xgraciegrace
authored
Merge pull request 0xPolygon#61 from 0xPolygon/km/tools_section
Proposal for Tools front page section
2 parents 67319e0 + f4b8f26 commit 5417849

File tree

2 files changed

+127
-3
lines changed

2 files changed

+127
-3
lines changed

‎docs/tools/index.md‎

Lines changed: 125 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,125 @@
1-
In progress.
1+
<style>
2+
.feature-paragraph {
3+
text-align: left;
4+
}
5+
.md-sidebar.md-sidebar--secondary,
6+
.md-content__button {
7+
display: none;
8+
}
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.grid-container {
13+
display: flex;
14+
flex-wrap: wrap;
15+
width: 100%;
16+
padding: 10px;
17+
align-items: stretch;
18+
}
19+
.grid-item {
20+
background-color: hsla(0,0%,100%,0);
21+
border-radius: 8px;
22+
-webkit-box-shadow: 0 8px 16px 0 rgb(17 17 17 / 8%);
23+
box-shadow: 0 8px 16px 0 rgb(17 17 17 / 8%);
24+
padding: 33px;
25+
margin: 5px;
26+
text-align: center;
27+
align-items: center;
28+
flex: 32%;
29+
width: 32%;
30+
}
31+
@media screen and (max-width: 1000px) {
32+
.grid-item {
33+
flex: 32%;
34+
max-width: 32%;
35+
}
36+
}
37+
@media screen and (max-width: 800px) {
38+
.grid-item {
39+
flex: 48%;
40+
max-width: 48%;
41+
}
42+
}
43+
@media screen and (max-width: 600px) {
44+
.grid-item {
45+
flex: 100%;
46+
max-width: 100%;
47+
}
48+
}
49+
</style>
50+
<div class="section-wrapper product-section-head">
51+
<div class="hero-image"><img src="../img/home/main-img.svg" loading="lazy" class="hero-image" style="width: 40%; float: right;"></div>
52+
<div class="hero-left">
53+
<h1 class="hero-heading">Tools</h1>
54+
<p class="hero-subtext">This section of the documentation describes some of the available third-party tools used by developers with Polygon products and services.</p>
55+
<p class="hero-subtext">Find out how to access data, code against blockchain networks, use data oracles, and much more. </p>
56+
</div>
57+
</div>
58+
<div class="grid-container">
59+
<div class="grid-item">
60+
<a href="./smart-contracts/hardhat">
61+
<div class="product-list-item-header">
62+
<div class="feature-card-heading">Smart contracts</div>
63+
</div>
64+
<p class="feature-paragraph">Common software for designing, building, and deploying smart contracts.</p>
65+
</a>
66+
</div>
67+
<div class="grid-item">
68+
<a href="./gas/matic-faucet">
69+
<div class="product-list-item-header">
70+
<div class="feature-card-heading">Gas</div>
71+
</div>
72+
<p class="feature-paragraph">The Polygon MATIC gas faucet and gas estimation tools.</p>
73+
</a>
74+
</div>
75+
<div class="grid-item">
76+
<a href="./data/the-graph/overview">
77+
<div class="product-list-item-header">
78+
<div class="feature-card-heading">Data</div>
79+
</div>
80+
<p class="feature-paragraph">Software tools, such as Graph, used for efficient data manipulation on Polygon networks.</p>
81+
</a>
82+
</div>
83+
<div class="grid-item">
84+
<a href="./matic-js/get-started">
85+
<div class="product-list-item-header">
86+
<div class="feature-card-heading">MaticJS</div>
87+
</div>
88+
<p class="feature-paragraph">The <code>matic.js</code> library used to interact with Polygon networks and services.</p>
89+
</a>
90+
</div>
91+
<div class="grid-item">
92+
<a href="./storage/ipfs">
93+
<div class="product-list-item-header">
94+
<div class="feature-card-heading">Storage</div>
95+
</div>
96+
<p class="feature-paragraph">Interact with blockchain storage services such as IPFS.</p>
97+
</a>
98+
</div>
99+
<div class="grid-item">
100+
<a href="./oracles/getting-started">
101+
<div class="product-list-item-header">
102+
<div class="feature-card-heading">Oracles</div>
103+
</div>
104+
<p class="feature-paragraph">Oracle services used for accessing accurate offline data.</p>
105+
</a>
106+
</div>
107+
<div class="grid-item">
108+
<a href="./wallets/getting-started">
109+
<div class="product-list-item-header">
110+
<div class="feature-card-heading">Wallets</div>
111+
</div>
112+
<p class="feature-paragraph">Using Polygon-compatible external wallets, such as MetaMask, with Polygon networks.</p>
113+
</a>
114+
</div>
115+
<div class="grid-item">
116+
<a href="https://polygonscan.com/">
117+
<div class="product-list-item-header">
118+
<div class="feature-card-heading">Block explorers</div>
119+
</div>
120+
<p class="feature-paragraph">Quick links to useful block explorers such as https://polygonscan.com/ for example.</p>
121+
</a>
122+
</div>
123+
</div>
124+
</div>
125+
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6569b132e06e045d402ee3ac" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

‎mkdocs.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ nav:
286286
- Overview: miden/overview.md
287287
- Miden zkRollup docs: https://0xpolygonmiden.github.io/miden-base/introduction.html
288288
- Tools:
289-
- tools/index.md
289+
- Tools: tools/index.md
290290
- Smart contract development:
291291
- Hardhat: tools/smart-contracts/hardhat.md
292292
- Truffle: tools/smart-contracts/truffle.md
@@ -306,10 +306,10 @@ nav:
306306
- PARSIQ: tools/data/parsiq.md
307307
- Matic.js:
308308
- POS:
309+
- Get started: tools/matic-js/get-started.md
309310
- Installation: tools/matic-js/installation.md
310311
- POS client: tools/matic-js/pos/client.md
311312
- API overview: tools/matic-js/api-architecture.md
312-
- Get started: tools/matic-js/get-started.md
313313
- Setup:
314314
- Ethers: tools/matic-js/setup/ethers.md
315315
- Web3js: tools/matic-js/setup/web3js.md

0 commit comments

Comments
 (0)