Skip to content

Commit 2d4c54e

Browse files
author
Nadim Kobeissi
authored
Merge pull request 0xPolygon#69 from 0xPolygon/nadim/fix-tools-landing
Clean up Tools landing page code
2 parents 9003fb5 + e75c972 commit 2d4c54e

File tree

2 files changed

+129
-125
lines changed

2 files changed

+129
-125
lines changed

‎docs/_site_essentials/stylesheets/extra.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,59 @@ div.flex-figure div.flex-figure-left {
3838

3939
div.flex-figure div.flex-figure-right {
4040
flex-grow: 2;
41+
}
42+
43+
.feature-paragraph {
44+
text-align: left;
45+
}
46+
47+
.md-sidebar.md-sidebar--secondary,
48+
.md-content__button {
49+
display: none;
50+
}
51+
52+
* {
53+
box-sizing: border-box;
54+
}
55+
56+
.grid-container {
57+
display: flex;
58+
flex-wrap: wrap;
59+
width: 100%;
60+
padding: 10px;
61+
align-items: stretch;
62+
}
63+
64+
.grid-item {
65+
background-color: hsla(0, 0%, 100%, 0);
66+
border-radius: 8px;
67+
-webkit-box-shadow: 0 8px 16px 0 rgb(17 17 17 / 8%);
68+
box-shadow: 0 8px 16px 0 rgb(17 17 17 / 8%);
69+
padding: 33px;
70+
margin: 5px;
71+
text-align: center;
72+
align-items: center;
73+
flex: 32%;
74+
width: 32%;
75+
}
76+
77+
@media screen and (max-width: 1000px) {
78+
.grid-item {
79+
flex: 32%;
80+
max-width: 32%;
81+
}
82+
}
83+
84+
@media screen and (max-width: 800px) {
85+
.grid-item {
86+
flex: 48%;
87+
max-width: 48%;
88+
}
89+
}
90+
91+
@media screen and (max-width: 600px) {
92+
.grid-item {
93+
flex: 100%;
94+
max-width: 100%;
95+
}
4196
}

‎docs/tools/index.md‎

Lines changed: 74 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,74 @@
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">Developer 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>
1+
<div class="section-wrapper product-section-head">
2+
<div class="hero-image"><img src="../img/home/main-img.svg" loading="lazy" class="hero-image" style="width: 40%; float: right;" alt=""></div>
3+
<div class="hero-left">
4+
<h1 class="hero-heading">Developer tools</h1>
5+
<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>
6+
<p class="hero-subtext">Find out how to access data, code against blockchain networks, use data oracles, and much more. </p>
7+
</div>
8+
</div>
9+
<div class="grid-container">
10+
<div class="grid-item">
11+
<a href="./smart-contracts/hardhat">
12+
<div class="product-list-item-header">
13+
<div class="feature-card-heading">Smart contracts</div>
14+
</div>
15+
<p class="feature-paragraph">Common software for designing, building, and deploying smart contracts.</p>
16+
</a>
17+
</div>
18+
<div class="grid-item">
19+
<a href="./gas/matic-faucet">
20+
<div class="product-list-item-header">
21+
<div class="feature-card-heading">Gas</div>
22+
</div>
23+
<p class="feature-paragraph">The Polygon MATIC gas faucet and gas estimation tools.</p>
24+
</a>
25+
</div>
26+
<div class="grid-item">
27+
<a href="./data/the-graph/overview">
28+
<div class="product-list-item-header">
29+
<div class="feature-card-heading">Data</div>
30+
</div>
31+
<p class="feature-paragraph">Software tools, such as Graph, used for efficient data manipulation on Polygon networks.</p>
32+
</a>
33+
</div>
34+
<div class="grid-item">
35+
<a href="./matic-js/get-started">
36+
<div class="product-list-item-header">
37+
<div class="feature-card-heading">MaticJS</div>
38+
</div>
39+
<p class="feature-paragraph">The <code>matic.js</code> library used to interact with Polygon networks and services.</p>
40+
</a>
41+
</div>
42+
<div class="grid-item">
43+
<a href="./storage/ipfs">
44+
<div class="product-list-item-header">
45+
<div class="feature-card-heading">Storage</div>
46+
</div>
47+
<p class="feature-paragraph">Interact with blockchain storage services such as IPFS.</p>
48+
</a>
49+
</div>
50+
<div class="grid-item">
51+
<a href="./oracles/getting-started">
52+
<div class="product-list-item-header">
53+
<div class="feature-card-heading">Oracles</div>
54+
</div>
55+
<p class="feature-paragraph">Oracle services used for accessing accurate offline data.</p>
56+
</a>
57+
</div>
58+
<div class="grid-item">
59+
<a href="./wallets/getting-started">
60+
<div class="product-list-item-header">
61+
<div class="feature-card-heading">Wallets</div>
62+
</div>
63+
<p class="feature-paragraph">Using Polygon-compatible external wallets, such as MetaMask, with Polygon networks.</p>
64+
</a>
65+
</div>
66+
<div class="grid-item">
67+
<a href="https://polygonscan.com/">
68+
<div class="product-list-item-header">
69+
<div class="feature-card-heading">Block explorers</div>
70+
</div>
71+
<p class="feature-paragraph">Quick links to useful block explorers such as https://polygonscan.com/ for example.</p>
72+
</a>
73+
</div>
74+
</div>

0 commit comments

Comments
 (0)