Skip to content

Commit 8be6ab9

Browse files
pa238pa238
committed
Add website files
1 parent d265c0e commit 8be6ab9

File tree

5 files changed

+724
-0
lines changed

5 files changed

+724
-0
lines changed

‎assets/border.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎assets/style.css‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
:root {
2+
--font-xl: 42px;
3+
--font-lg: 24px;
4+
--font-md: 20px;
5+
--font-sm: 18px;
6+
--font-xs: 16px;
7+
--font-xxs: 14px;
8+
}
9+
@media (max-width: 768px) {
10+
:root {
11+
--font-xl: 18px;
12+
--font-lg: 16px;
13+
--font-md: 14px;
14+
--font-sm: 12px;
15+
--font-xs: 12px;
16+
--font-xxs: 12px;
17+
}
18+
}
19+
20+
body {
21+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
22+
color: #222;
23+
display: flex;
24+
min-height: 100vh;
25+
flex-direction: column;
26+
font-size: var(--font-md);
27+
background-color: #fff;
28+
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzEuMjA3IDY0OS44MDJDOTM1LjQ4NCA2NDIuMTQgMTQ4MCAzMzcuMzI1IDE0ODAgMTgwLjg4OGMwLTE1Ni40MzgtMzA5Ljc0NC0zNi4wNTUtNzIwLTM2LjA1NVMwLTE3NC40ODMgMCAxMzUuMTQ0YzAgMzA5LjYyNyA1MjYuOTMgNTIyLjMyIDczMS4yMDcgNTE0LjY1OHoiIGZpbGw9IiNGNkY4RkEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==);
29+
background-size: cover;
30+
background-position-x: 20vw;
31+
background-position-y: -10vh;
32+
background-repeat: no-repeat;
33+
line-height: 1.4;
34+
}
35+
36+
main {
37+
flex: 1;
38+
width: 100%;
39+
}
40+
41+
a {
42+
color: #65638f;
43+
text-decoration: none;
44+
}
45+
a:hover {
46+
color: #5A51FE;
47+
}
48+
49+
.button {
50+
display: flex;
51+
background: linear-gradient(65deg, #DA552F, #ea8e39);
52+
font-family: "Heebo", sans-serif;
53+
color: #fff;
54+
display: inline-flex;
55+
font-size: var(--font-xxs);
56+
letter-spacing: 0px;
57+
font-weight: 700;
58+
line-height: 16px;
59+
text-transform: uppercase;
60+
text-decoration: none !important;
61+
border: none;
62+
border-radius: 2px;
63+
cursor: pointer;
64+
justify-content: center;
65+
padding: 16px 32px;
66+
text-align: center;
67+
white-space: nowrap;
68+
box-shadow: 0 8px 24px rgba(32, 43, 54, 0.12);
69+
mix-blend-mode: multiply;
70+
transition: all 0.15s ease;
71+
}
72+
.button:hover {
73+
color: #fff;
74+
box-shadow: 0 8px 24px rgba(32, 43, 54, 0.25);
75+
}
76+
.button--link {
77+
background: rgba(0, 0, 0, 0);
78+
color: #5A51FE;
79+
box-shadow: none;
80+
}
81+
.button--link:hover {
82+
color: #8751FE;
83+
box-shadow: none;
84+
}
85+
86+
.accent {
87+
color: #5A51FE;
88+
}
89+
90+
.container {
91+
max-width: 960px;
92+
padding: 0 30px;
93+
margin: auto;
94+
}
95+
96+
h1, h2 {
97+
font-family: "Heebo", sans-serif;
98+
}
99+
100+
.container-desktop {
101+
max-width: 960px;
102+
padding: 0 30px;
103+
margin: auto;
104+
}
105+
@media (max-width: 768px) {
106+
.container-desktop {
107+
max-width: 100%;
108+
padding: 0;
109+
}
110+
}
111+
112+
.tobi-zoom__icon {
113+
display: none;
114+
}
115+
116+
.app__header {
117+
display: flex;
118+
flex-direction: row;
119+
margin-top: 128px;
120+
margin-bottom: 128px;
121+
align-items: center;
122+
}
123+
@media (max-width: 768px) {
124+
.app__header {
125+
align-items: flex-start;
126+
margin-top: 32px;
127+
margin-bottom: 16px;
128+
}
129+
}
130+
.app__logo-wrapper {
131+
display: inline-block;
132+
background-image: url("border.svg");
133+
background-size: contain;
134+
max-width: 250px;
135+
max-height: 250px;
136+
padding: 1px;
137+
margin-right: 64px;
138+
width: 100%;
139+
height: 100%;
140+
background-repeat: no-repeat;
141+
}
142+
html[dir=rtl] .app__logo-wrapper {
143+
margin-left: 64px;
144+
margin-right: 0;
145+
}
146+
@media (max-width: 768px) {
147+
.app__logo-wrapper {
148+
max-width: 100px;
149+
max-height: 100px;
150+
margin-right: 16px;
151+
}
152+
}
153+
.app__logo {
154+
border-radius: 25.5%;
155+
mask-size: cover;
156+
width: 100%;
157+
height: auto;
158+
}
159+
.app__name {
160+
font-size: var(--font-xl);
161+
margin: 0;
162+
}
163+
.app__description {
164+
font-size: var(--font-lg);
165+
}
166+
@media (max-width: 768px) {
167+
.app__description {
168+
margin-top: 8px;
169+
margin-bottom: 0;
170+
}
171+
}
172+
.app__screenshots-list {
173+
display: grid;
174+
grid-template-columns: 200px 200px 200px 200px 200px 200px;
175+
grid-column-gap: 20px;
176+
padding: 30px 0;
177+
}
178+
@media (max-width: 768px) {
179+
.app__screenshots-list {
180+
padding: 32px;
181+
width: 800px;
182+
}
183+
}
184+
.app__screenshot {
185+
width: 100%;
186+
border-radius: 16px;
187+
box-shadow: 0 12px 48px rgba(17, 16, 62, 0.12);
188+
transition: all 0.3s ease-in-out;
189+
transform: scale(1);
190+
cursor: pointer;
191+
}
192+
.app__screenshot:hover {
193+
box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
194+
transform: scale(1.05);
195+
}
196+
.app__screenshots-wrapper {
197+
overflow-y: auto;
198+
}
199+
.app__buttons {
200+
display: flex;
201+
flex-direction: row;
202+
align-items: center;
203+
margin-left: -9.8px;
204+
}
205+
.app__buttons--mobile {
206+
display: none;
207+
}
208+
@media (max-width: 768px) {
209+
.app__buttons {
210+
margin-left: 0;
211+
margin-bottom: 64px;
212+
}
213+
.app__buttons--mobile {
214+
display: flex;
215+
justify-content: center;
216+
}
217+
.app__buttons--desktop {
218+
display: none;
219+
}
220+
}
221+
.app__button-play img {
222+
width: 176.4px;
223+
}
224+
.app__button-ios img {
225+
width: 196.4px;
226+
}
227+
.app__button-web {
228+
margin-left: 12px;
229+
}
230+
.app__button-web img {
231+
width: 157px;
232+
}
233+
@media (max-width: 768px) {
234+
.app__button-play img {
235+
width: 126px;
236+
}
237+
.app__button-ios img {
238+
width: 136px;
239+
}
240+
.app__button-web {
241+
margin-left: 8px;
242+
}
243+
.app__button-web img {
244+
width: 112px;
245+
}
246+
}
247+
.app__section-title {
248+
font-size: var(--font-lg);
249+
}
250+
.app__section {
251+
margin-bottom: 128px;
252+
}
253+
@media (max-width: 768px) {
254+
.app__section {
255+
margin-bottom: 64px;
256+
}
257+
}
258+
.app__featured-content {
259+
display: grid;
260+
grid-template-columns: 1fr 1fr 1fr 1fr;
261+
grid-column-gap: 32px;
262+
align-items: center;
263+
}
264+
@media (max-width: 768px) {
265+
.app__featured-content {
266+
display: block;
267+
padding: 32px;
268+
}
269+
}
270+
.app__featured-image {
271+
width: 100%;
272+
margin: auto;
273+
}
274+
275+
.footer {
276+
padding: 16px 0;
277+
font-size: var(--font-xs) !important;
278+
}
279+
.footer a {
280+
font-size: var(--font-xs) !important;
281+
}
282+
.footer__container {
283+
color: #65638f;
284+
display: flex;
285+
width: 100%;
286+
justify-content: space-between;
287+
align-items: center;
288+
}
289+
@media (max-width: 768px) {
290+
.footer__container {
291+
flex-direction: column-reverse;
292+
align-items: flex-start;
293+
}
294+
}
295+
.footer__links {
296+
list-style: none;
297+
display: flex;
298+
padding-left: 0;
299+
}
300+
.footer__link {
301+
margin-left: 32px;
302+
}
303+
@media (max-width: 768px) {
304+
.footer__link {
305+
margin-left: 0;
306+
margin-right: 8px;
307+
}
308+
}
309+
310+
.page {
311+
max-width: 960px;
312+
padding: 0 30px;
313+
margin: auto;
314+
}
315+
316+
.darkmode-toggle {
317+
z-index: 500;
318+
}
319+
320+
.darkmode-background {
321+
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzEuMjA3IDY0OS44MDJDOTM1LjQ4NCA2NDIuMTQgMTQ4MCAzMzcuMzI1IDE0ODAgMTgwLjg4OGMwLTE1Ni40MzgtMzA5Ljc0NC0zNi4wNTUtNzIwLTM2LjA1NVMwLTE3NC40ODMgMCAxMzUuMTQ0YzAgMzA5LjYyNyA1MjYuOTMgNTIyLjMyIDczMS4yMDcgNTE0LjY1OHoiIGZpbGw9IiNGNkY4RkEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) !important;
322+
background-size: cover !important;
323+
background-position-x: 20vw !important;
324+
background-position-y: -10vh !important;
325+
background-repeat: no-repeat !important;
326+
}

0 commit comments

Comments
 (0)