Skip to content

Commit 646c3a1

Browse files
nik-revnik-rev
committed
docs: make landing page responsive
1 parent c94a9e6 commit 646c3a1

File tree

3 files changed

+128
-160
lines changed

3 files changed

+128
-160
lines changed

‎.github/workflows/gh-pages.yml

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ jobs:
2020
# we want our `./index.html` which is the landing page at the root and served at `ferrishot.com` root
2121
# And `./book/index.html` will be served at `ferrishot.com/docs`
2222
bin/mdbook build docs
23+
mv docs docs-src
24+
mv docs-src/docs .
2325
2426
- name: Setup Pages
2527
uses: actions/configure-pages@v4

‎CNAME

-1
This file was deleted.

‎docs/index.html renamed to ‎index.html

+126-159
Original file line numberDiff line numberDiff line change
@@ -12,189 +12,100 @@
1212
--background: #fff8f0;
1313
--background-dark: #fae8d4;
1414
--text: #452601f0;
15+
--font: 'Courier New', Courier, monospace;
1516
}
16-
h1, h2, h3 {
17-
color: var(--accent-color);
18-
}
17+
li { list-style: none; }
18+
h1, h2, h3, h4, h5, h6 { color: var(--accent-color); }
19+
h3, h4, h5, h6 { font-weight: normal; }
20+
1921
.learn-more {
22+
text-decoration: underline;
23+
font-size: 0.8em;
2024
margin-top: -6px;
2125
margin-left: 6px;
22-
font-size: 0.8em;
23-
text-decoration: underline;
2426
&::before {
2527
content: "→ "
2628
}
2729
}
28-
h3 {
29-
font-weight: normal;
30-
}
31-
body {
32-
font-family: 'Courier New', Courier, monospace;
33-
display: flex;
34-
gap: 40px;
35-
align-items: center;
36-
flex-direction: column;
37-
background-color: var(--background);
38-
color: var(--text);
39-
}
40-
main {
41-
display: flex;
42-
flex-direction: column;
43-
width: 100%;
44-
padding-left: 80px;
45-
padding-top: 80px;
46-
padding-bottom: 120px;
47-
max-width: 800px;
48-
}
49-
#platforms {
50-
margin-bottom: 16px;
51-
}
52-
#download {
53-
align-self: start;
54-
}
55-
#logo-container {
56-
width: 100%;
57-
display: flex;
58-
flex-direction: column;
59-
gap: 20px;
60-
}
61-
svg {
62-
color: var(--accent-color);
63-
}
64-
#logo {
65-
display: flex;
66-
gap: 10px;
67-
h1 {
68-
margin-top: auto;
69-
margin-bottom: auto;
70-
font-size: 26px;
71-
}
72-
}
73-
a:has(svg) {
74-
text-decoration: none;
75-
}
76-
#description {
77-
display: flex;
78-
flex-direction: column;
79-
p {
80-
margin: 0;
81-
font-style: italic;
82-
}
83-
}
8430

85-
#install-button {
86-
width: full;
87-
margin-right: 160px;
88-
margin-top: 40px;
89-
margin-left: auto;
31+
.install-button {
32+
width: 171px;
9033
a {
34+
background-color: var(--accent-color);
35+
color: var(--background);
36+
text-decoration: none;
37+
display: flex;
38+
align-items: center;
39+
gap: 8px;
40+
padding: 16px 40px;
41+
border: none;
42+
cursor: pointer;
43+
font: inherit;
9144
svg {
9245
color: var(--background);
9346
}
47+
/* pressed effect */
48+
box-shadow: 3px 3px var(--text);
9449
&:active {
9550
transform: translateX(3px) translateY(3px);
9651
box-shadow: none;
9752
transition-property: transform box-shadow;
9853
transition-duration: 0.07s;
9954
}
100-
display: flex;
101-
align-items: center;
102-
gap: 8px;
103-
padding: 16px 40px;
104-
background-color: var(--accent-color);
105-
color: var(--background);
106-
border: none;
107-
cursor: pointer;
108-
box-shadow: 3px 3px var(--text);
109-
font: inherit;
11055
}
11156
}
112-
113-
#final-install-button {
114-
margin-top: 100px;
115-
margin-left: auto;
116-
margin-right: 100px;
117-
}
118-
119-
#features {
120-
max-width: 65ch;
121-
h2 {
122-
display: flex;
123-
gap: 60px;
124-
margin-top: 120px;
125-
margin-left: auto;
126-
margin-right: auto;
127-
}
128-
ul {
129-
display: flex;
130-
margin-top: 60px;
131-
flex-direction: column;
132-
gap: 40px;
133-
li {
134-
list-style: none;
135-
display: flex;
136-
flex-direction: column;
137-
gap: 12px;
138-
}
139-
}
140-
}
141-
142-
footer {
143-
height: 150px;
144-
width: 100%;
145-
background-color: var(--background-dark);
57+
</style>
58+
<style>
59+
body {
60+
font-family: var(--font);
61+
background-color: var(--background);
62+
color: var(--text);
14663
display: flex;
147-
justify-content: end;
148-
align-items: center;
149-
justify-content: center;
64+
flex-direction: column;
15065
}
151-
152-
@media (max-width: 600px) {
153-
body {
154-
gap: 20px;
155-
padding: 0 16px;
156-
align-items: stretch;
157-
}
158-
66+
</style>
67+
<body>
68+
<style>
15969
main {
160-
padding: 40px 20px 80px 20px;
161-
max-width: 100%;
162-
}
163-
164-
#logo {
165-
flex-direction: column;
166-
align-items: center;
167-
text-align: center;
168-
}
169-
170-
#install-button {
171-
margin: 40px auto 0 auto;
172-
}
173-
174-
#final-install-button {
175-
margin: 60px auto 0 auto;
176-
}
177-
178-
#features h2 {
179-
flex-direction: column;
180-
gap: 20px;
181-
margin-left: 0;
182-
margin-right: 0;
183-
}
184-
185-
footer {
70+
display: flex;
71+
align-self: center;
18672
flex-direction: column;
187-
gap: 8px;
188-
height: auto;
189-
padding: 20px;
73+
max-width: 65ch;
74+
padding: 80px;
75+
@media (width <= 600px) {
76+
padding: 40px;
77+
}
19078
}
191-
}
192-
</style>
193-
<body>
79+
</style>
19480
<main>
81+
<style>
82+
#logo-container {
83+
display: flex;
84+
flex-direction: column;
85+
gap: 20px;
86+
#description {
87+
font-style: italic;
88+
}
89+
svg {
90+
color: var(--accent-color);
91+
}
92+
}
93+
</style>
19594
<div id="logo-container">
95+
<style>
96+
#logo {
97+
display: flex;
98+
gap: 10px;
99+
h1 {
100+
font-size: 26px;
101+
/* center text */
102+
margin-top: auto;
103+
margin-bottom: auto;
104+
}
105+
}
106+
</style>
196107
<div id="logo">
197-
<img src="../icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
108+
<img src="/icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
198109
<h1>ferrishot<h1>
199110
</div>
200111
<div id="description">
@@ -207,10 +118,41 @@ <h1>ferrishot<h1>
207118
</a>
208119
</div>
209120
</div>
210-
<div id="install-button">
211-
<a href="https://github.com/nik-rev/ferrishot/tree/main?tab=readme-ov-file#installation">Install<svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
212-
</a>
121+
<style>
122+
#first-install-button {
123+
width: 100%;
124+
display: flex;
125+
justify-content: end;
126+
@media (width <= 600px) {
127+
justify-content: center;
128+
}
129+
margin-top: 40px;
130+
margin-bottom: 80px;
131+
}
132+
</style>
133+
<div id="first-install-button">
134+
<div class="install-button">
135+
<a href="https://github.com/nik-rev/ferrishot/tree/main?tab=readme-ov-file#installation">Install<svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
136+
</a>
137+
</div>
213138
</div>
139+
<style>
140+
#features {
141+
h2 {
142+
margin-bottom: 60px;
143+
}
144+
ul {
145+
display: flex;
146+
gap: 40px;
147+
flex-direction: column;
148+
li {
149+
display: flex;
150+
flex-direction: column;
151+
gap: 12px;
152+
}
153+
}
154+
}
155+
</style>
214156
<section id="features">
215157
<h2 class="title">
216158
# Features
@@ -228,17 +170,42 @@ <h3>Cross-platform</h3>
228170
</li>
229171
</ul>
230172
</section>
173+
<style>
174+
#final-install-button {
175+
margin-top: 120px;
176+
display: flex;
177+
margin-right: 60px;
178+
justify-content: end;
179+
margin-bottom: 80px;
180+
@media (width <= 600px) {
181+
margin-top: 90px;
182+
margin-right: 45px;
183+
margin-bottom: 40px;
184+
}
185+
}
186+
</style>
231187
<div id="final-install-button">
232-
<div id="install-button">
188+
<div class="install-button">
233189
<i>sounds cool?</i>
234190
<a href="https://github.com/nik-rev/ferrishot/tree/main?tab=readme-ov-file#installation">Install<svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
235191
</a>
236192
</div>
237193
</div>
238194
</main>
195+
<style>
196+
footer {
197+
height: 150px;
198+
width: 100%;
199+
background-color: var(--background-dark);
200+
display: flex;
201+
justify-content: end;
202+
align-items: center;
203+
justify-content: center;
204+
}
205+
</style>
239206
<footer>
240207
<div id="logo">
241-
<img src="../icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
208+
<img src="/icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
242209
<h1>ferrishot<h1>
243210
</div>
244211
</footer>

0 commit comments

Comments
 (0)