Skip to content

Commit c47584c

Browse files
JoblersTunesidvishnoi
JoblersTune
and
sidvishnoi
authored
feat: added an installation page (#501)
* feat: added an installation page --------- Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
1 parent 957a8e2 commit c47584c

File tree

4 files changed

+197
-0
lines changed

4 files changed

+197
-0
lines changed

‎public/img/Fx-Browser-icon.png‎

11.2 KB
Loading

‎public/img/chrome-webstore.png‎

10.6 KB
Loading

‎public/img/microsoft-edge.png‎

21 KB
Loading

‎src/pages/install.astro‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
import i18next, { t, changeLanguage } from "i18next"
3+
import Base from "../layouts/Base.astro"
4+
5+
changeLanguage("en")
6+
7+
const title = `Install | ${t("site.title")}`
8+
const description = t("site.description")
9+
---
10+
<!-- All changes (including styles) are limited to this page since it is temporary -->
11+
12+
<Base title={title} description={description}>
13+
<section class="section">
14+
<div class="contentWrapperSm">
15+
<img
16+
alt="Web Monetization Icon"
17+
class="wm-icon"
18+
src="/img/wm-logo--animated.svg"
19+
width="120"
20+
height="86"
21+
/>
22+
<h1 class="heading2">Web Monetization</h1>
23+
</div>
24+
</section>
25+
<section>
26+
<div class="contentWrapperLg">
27+
<div class="cards">
28+
<div class="card">
29+
<div class="cardContent">
30+
<h2 class="heading3">Support content with the web extension</h2>
31+
<ul class="icons">
32+
<li class="icon">
33+
<a
34+
href="https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii"
35+
>
36+
<img
37+
alt="Chrome Web Store logo"
38+
src="/img/chrome-webstore.png"
39+
width="200px"
40+
height="200px"
41+
/>
42+
</a>
43+
</li>
44+
<li class="icon">
45+
<a
46+
href="https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension"
47+
>
48+
<img
49+
alt="Firefox Browser Add-ons"
50+
src="/img/Fx-Browser-icon.png"
51+
width="200px"
52+
height="200px"
53+
/>
54+
</a>
55+
</li>
56+
<li class="icon">
57+
<a
58+
href="https://microsoftedge.microsoft.com/addons/detail/web-monetization/imjgemgmeoioefpmfefmffbboogighjl"
59+
>
60+
<img
61+
alt="Edge Add-ons"
62+
src="/img/microsoft-edge.png"
63+
width="200px"
64+
height="200px"
65+
/>
66+
</a>
67+
</li>
68+
</ul>
69+
<ul class="icons">
70+
<li class="icon">
71+
<a
72+
href="https://github.com/interledger/web-monetization-extension"
73+
>
74+
<img
75+
alt="GitHub repository"
76+
src="/img/icon-github.svg"
77+
width="98px"
78+
height="96px"
79+
/>
80+
</a>
81+
</li>
82+
</ul>
83+
</div>
84+
</div>
85+
<div class="card">
86+
<div class="cardContent">
87+
<h2 class="heading3">Get support with a Web Monetization link</h2>
88+
<h2 class="heading3">
89+
<a href="/link-tag/">Generate your link tag</a>
90+
</h2>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
</Base>
97+
98+
<style>
99+
body {
100+
background-image: url("/img/bg-tile.svg");
101+
background-size: 25em;
102+
}
103+
104+
section {
105+
text-align: center;
106+
}
107+
108+
.wm-icon {
109+
width: 120px;
110+
margin-block-end: var(--space-s);
111+
margin-inline: auto;
112+
}
113+
114+
.heading2 {
115+
color: var(--wm-accent);
116+
}
117+
118+
/* Card wrapper styles */
119+
.cards {
120+
display: flex;
121+
flex-wrap: wrap;
122+
gap: var(--space-s);
123+
margin-block-end: var(--space-s);
124+
justify-content: center;
125+
}
126+
127+
.card {
128+
display: flex;
129+
transition:
130+
box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
131+
position: relative;
132+
overflow: initial;
133+
box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
134+
0px 2px 10px hsla(0, 0%, 0%, 0.06);
135+
border-radius: 6px;
136+
padding: var(--space-s);
137+
background-color: white;
138+
flex: 0 1 100%;
139+
max-width: 25em;
140+
gap: var(--space-s);
141+
font-size: var(--step-0);
142+
margin-block-end: var(--space-s);
143+
color: var(--color-black);
144+
}
145+
146+
@media screen and (min-width: 900px) {
147+
.card {
148+
flex: 0 1 calc(50% - 1em);
149+
}
150+
}
151+
152+
.card::after {
153+
content: "";
154+
border-radius: 6px;
155+
position: absolute;
156+
top: 0;
157+
left: 0;
158+
width: 100%;
159+
height: 100%;
160+
z-index: -1;
161+
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25);
162+
opacity: 0;
163+
transition: opacity 0.3s ease-in-out;
164+
}
165+
166+
.card:hover::after {
167+
opacity: 1;
168+
}
169+
170+
/* Icon section styles */
171+
.icons {
172+
list-style: none;
173+
display: flex;
174+
flex-wrap: wrap;
175+
justify-content: center;
176+
gap: var(--space-m);
177+
padding: var(--space-xs) var(--space-s);
178+
}
179+
180+
.icon {
181+
flex: 0 0 3em;
182+
max-width: 3em;
183+
}
184+
185+
.icon img {
186+
height: auto;
187+
}
188+
189+
.icon a {
190+
display: block;
191+
transition: transform 0.2s ease-in-out;
192+
}
193+
194+
.icon a:hover {
195+
transform: scale(1.1);
196+
}
197+
</style>

0 commit comments

Comments
 (0)