Skip to content

Commit 2ab4759

Browse files
authored
Merge pull request #25 from adityaoberai/sponsor
Add AutoSEO as sponsor
2 parents 053cef1 + 5c4e68f commit 2ab4759

File tree

3 files changed

+60
-14
lines changed

3 files changed

+60
-14
lines changed

public/sponsor.png

71.8 KB
Loading

src/App.svelte

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,42 @@
33
</script>
44

55
<main>
6+
<div class="sponsor align-main">
7+
<label class="sponsor-label" for="sponsor-link">
8+
Thank you to our sponsor!
9+
<a id="sponsor-link" class="sponsor-link" href="https://getautoseo.com/image-alt-text-generator" target="_blank">
10+
<img class="sponsor-image" src="/sponsor.png" alt="AutoSEO Alt Text Generator">
11+
</a>
12+
</label>
13+
</div>
14+
615
<div class="align-main">
716
<h1>Alt Text Generator</h1>
817

918
<p>Generate alt text for your images and help make the internet more accessible!</p>
1019

1120
<AltText />
1221
</div>
13-
</main>
14-
<div class="footer">
15-
<p>Support this project by <a href="https://github.com/adityaoberai/Alt-Text-Generator" target="_blank">starring ⭐</a> and <a href="https://github.com/sponsors/adityaoberai" target="_blank">sponsoring 💸</a> on GitHub</p>
16-
</div>
1722

23+
<div class="footer">
24+
<p>Support this project by <a href="https://github.com/adityaoberai/Alt-Text-Generator" target="_blank">starring ⭐</a> and <a href="https://github.com/sponsors/adityaoberai" target="_blank">sponsoring 💸</a> on GitHub</p>
25+
</div>
26+
</main>
1827

1928
<style>
2029
h1 {
21-
font-size: 3.2em;
30+
font-size: 4rem;
2231
line-height: 1.1;
2332
max-width: 80vw;
2433
}
2534
2635
p {
36+
font-size: 1.5rem;
37+
max-width: 80vw;
38+
}
39+
40+
.footer p {
2741
max-width: 80vw;
42+
font-size: 1rem;
2843
}
2944
</style>

src/app.css

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,56 @@
1616

1717
body {
1818
max-width: 100vw;
19-
min-height: 100vh;
2019
margin: 0;
21-
display: flex;
22-
place-items: center;
2320
}
2421

2522
#app {
2623
margin: 0 auto;
2724
padding: 2rem;
2825
text-align: center;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: space-evenly;
29+
}
30+
31+
.sponsor {
32+
display: flex;
33+
flex-direction: column;
34+
}
35+
.sponsor-label {
36+
font-size: 1rem;
37+
padding: 1rem;
38+
border-radius: 8px;
39+
border: 1.5px solid;
40+
display: flex;
41+
flex-direction: column;
42+
text-align: left;
43+
}
44+
45+
@media screen and (min-width: 1201px) {
46+
.sponsor-image {
47+
width: 25vw;
48+
}
49+
}
50+
51+
@media screen and (min-width: 601px) and (max-width: 1200px) {
52+
.sponsor-image {
53+
width: 65vw;
54+
}
55+
}
56+
57+
@media screen and (max-width: 600px) {
58+
.sponsor-image {
59+
width: 90vw;
60+
}
2961
}
3062

3163
main {
3264
display: flex;
33-
justify-content: center;
65+
flex-direction: column;
66+
justify-content: space-evenly;
3467
align-items: center;
35-
min-height: 70vh;
68+
min-height: 100vh;
3669
}
3770

3871
.align-main {
@@ -62,7 +95,7 @@ button {
6295
border-radius: 8px;
6396
border: 1.5px solid #f9f9f9;
6497
padding: 0.6em 1.2em;
65-
font-size: 1em;
98+
font-size: 1.5rem;
6699
font-weight: 500;
67100
font-family: inherit;
68101
background-color: #242424;
@@ -82,14 +115,12 @@ button:focus-visible {
82115
display: block;
83116
border-top: 2px solid #f9f9f9;
84117
bottom: 0;
85-
left: 0;
86-
right: 0;
87118
margin: 0 5vw;
88119
text-align: center;
89120
}
90121

91122
.footer p {
92-
padding: 0 5vw;
123+
padding: 1vw 5vw;
93124
line-height: 2.5rem;
94125
}
95126

0 commit comments

Comments
 (0)