-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
392 lines (336 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!doctype html>
<html lang="en">
<head>
<title>Gedankenessen</title>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Gedankenessen is building tooling.">
<meta property="og:description" content="Gedankenessen is building tooling.">
<meta name="image" content="https://gedankenessen.de/assets/card-1200x630.png">
<meta property="og:image" content="https://gedankenessen.de/assets/card-1200x630.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Gedankenessen">
<meta property="og:type" content="website">
<meta property="og:url" content="https://gedankenessen.de">
<meta property="og:site_name" content="Gedankenessen">
<meta name="twitter:card" content="assets/card.png">
<meta name="twitter:creator" content="Marlon Schlosshauer">
<meta name="twitter:title" content="Gedankenessen">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://gedankenessen.de/assets/card-1280x640.png">
<meta name="theme-color" content="#7775D2">
<meta charset="utf-8">
<style>
:root {
--background: black;
--foreground: white;
--highlight: #7775D2;
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 64px;
--space-7: 96px;
--space-8: 296px;
}
* {
padding: 0;
margin: 0;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: 'Arial', sans-serif;
}
.wrapper {
min-height: 100vh;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex-shrink: 0;
grid-gap: var(--space-6);
justify-content: center;
align-items: center;
}
.header-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin-left: 16vw;
margin-right: 16vw;
grid-gap: var(--space-6);
}
.logo {
height: 35vw;
width: 35vw;
max-width: var(--space-8);
max-height: var(--space-8);
}
.title {
max-width: 100vw;
color: var(--foreground);
text-align: center;
font-size: 7vw;
font-weight: 300;
}
.section-wrapper {
overflow: hidden;
}
.section-container {
max-width: 100vw;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
grid-gap: var(--space-5);
overflow: scroll;
}
.section-wrapper-header {
margin-left: var(--space-6);
margin-bottom: var(--space-5);
}
.section:first-child {
margin-left: var(--space-6);
}
.section:last-child {
margin-right: var(--space-6);
}
.section {
width: var(--space-8);
}
.section-header {
padding-bottom: var(--space-4);
}
@media(min-width: 1400px) {
.title {
font-size: 84px;
}
.section:first-child {
margin-left: auto;
}
.section:last-child {
margin-right: auto;
}
.section-wrapper-header {
margin-left: auto;
}
}
.text, .section-description {
text-align: justify;
}
.highlight {
color: var(--highlight);
}
/* Hide scrollbar for Chrome, Safari and Opera */
.section-container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.section-container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
a {
color: var(--highlight);
}
a:visited {
color: var(--highlight);
}
.spacer {
margin-bottom: 10vh;
}
br {
margin-top: var(--space-2);
margin-bottom: var(--space-2);
}
@media (prefers-reduced-motion: no-preference) {
.animated {
animation-duration: 0.5s;
animation-fill-mode: both;
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-webkit-animation-name: fadeInUp;
}
}
.animated-1-0 {
animation-delay: 100ms;
}
.animated-1-2 {
animation-delay: 120ms;
}
.animated-1-4 {
animation-delay: 140ms;
}
.animated-1-6 {
animation-delay: 160ms;
}
.animated-2-0 {
animation-delay: 200ms;
}
.animated-2-2 {
animation-delay: 220ms;
}
.animated-2-4 {
animation-delay: 240ms;
}
.animated-2-6 {
animation-delay: 260ms;
}
.animated-3-0 {
animation-delay: 300ms;
}
.animated-3-2 {
animation-delay: 320ms;
}
.animated-3-4 {
animation-delay: 340ms;
}
.animated-3-6 {
animation-delay: 360ms;
}
.animated-3-8 {
animation-delay: 380ms;
}
.animated-4-0 {
animation-delay: 400ms;
}
.animated-4-2 {
animation-delay: 420ms;
}
.animated-4-4 {
animation-delay: 440ms;
}
.animated-4-6 {
animation-delay: 460ms;
}
@keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
::selection {
background: var(--highlight);
color: var(--foreground);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="spacer"></div>
<div class="header-container">
<svg class="logo animated animated-1-0" alt="gedankenessen logo" width="155" height="121" viewBox="0 0 155 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.088 0H30.9117V30.1424H0L1.52588e-05 60.2847L0 60.7153L1.52588e-05 90.8577H30.9117V121H124.088V90.8577H155V60.7153V60.2847V30.1424H124.088V0ZM123.647 90.427H93.1767V60.7153H123.647V90.427ZM61.8234 90.427H31.3533V60.7153H61.8234V90.427ZM62.265 30.573V60.2847H92.735V30.573H62.265Z" fill="#7775D2"/>
</svg>
<h3 class="title animated animated-1-2">Gedankenessen is building <span class="highlight">tooling</span>.</h3>
</div>
<div class="section-wrapper">
<div class="section-container">
<div class="section animated animated-2-0">
<h3 class="section-header">Why transparency?</h3>
<p class="section-description">
<span class="highlight">Sharing</span> data, <span class="highlight">visualizing</span> processes and <span class="highlight">modeling</span> statuses inside of our application allows us to accurately <span class="highlight">communicate</span> with both customers and team members. That is the goal of transparency.
It helps build <span class="highlight">trust</span> and improves the <span class="highlight">understanding</span> of how work is done. Everyone can understand <span class="highlight">progress</span> quicker, have more <span class="highlight">accurate</span> expectations and do more precise <span class="highlight">planing</span>.
</p>
</div>
<div class="section animated animated-2-2">
<h3 class="section-header">Why prototyping?</h3>
<p class="section-description">
Offering superior <span class="highlight">UX</span> or even just a different perspective can be enough to make your product <span class="highlight">viable</span>. Yet while UX has become a honed craft, user <span class="highlight">expectations</span> have exploded. We need to acknowledge that we don't know how <span class="highlight">effective</span> our solution is, until we try it. Embracing prototyping gives us the necessary <span class="highlight">speed</span> to explore these new ideas and transform them into successful products.
</p>
</div>
<div class="section animated animated-2-4">
<h3 class="section-header">Why less?</h3>
<p class="section-description">
<span class="highlight">Complexity</span> is one of the biggest challenges that we face today. Software needs to be continuously <span class="highlight">evolved</span> and <span class="highlight">morphed</span> to suit new use-cases. Yet, it’s universally understood that the best tools are the ones that are <span class="highlight">focused</span> and do one thing well.
By expecting less we allow our products to focus on that one thing and <span class="highlight">perfect</span> it. Besides great UX and achievable deadlines the arguably greatest win is <span class="highlight">avoiding</span> the endless pit of complexity that looms over every project.
</p>
</div>
<div class="section animated animated-2-6">
<h3 class="section-header">Why digital?</h3>
<p class="section-description">
Computers are very <span class="highlight">different</span> to analog tools in that they allow us to seemingly <span class="highlight">scale</span> endlessly. We can <span class="highlight">abstract</span> away busywork, define new ways to work with data and overpower previously unsolvable problems. And most importantly: Users can be <span class="highlight">empowered</span> to do their best work.
In the end we have no <span class="highlight">choice</span> but to take up digital <span class="highlight">solution</span> as the never ending arms race of <span class="highlight">productivity</span> continues.
</p>
</div>
</div>
</div>
<div class="section-wrapper">
<h1 class="section-wrapper-header animated animated-3-0">Products</h1>
<div class="section-container">
<div class="section animated animated-3-2">
<h3 class="section-header">crud</h3>
<p class="section-description">
Prototype your <span class="highlight">backend</span> from your
<span class="highlight">frontend</span>.
Easily create a <span class="highlight">basic</span> crud REST API by <span class="highlight">sending</span> your desired data format via JSON. As your data <span class="highlight">expectations</span> change just resend a POST request to <span class="highlight">morph</span> the structure of your <span class="hightlight">data</span> to your liking.
Quickly <span class="highlight">iterate</span>. Once you’re done with experimenting, you can <span class="highlight">browse</span> the final state of your submitted data and use it to <span class="highlight">build</span> your production backend.
<br/>
<a class="link" href="https://crud.gedankenessen.de" target="_blank">Learn more</a>
</p>
</div>
<div class="section animated animated-3-4">
<h3 class="section-header">stackradar</h3>
<p class="section-description">
Fusce <span class="highlight">tellus</span> orci erat, sit amet <span class="highlight">molestie</span> mauris iaculis sit amet. Sed ut varius augue. <span class="highlight">Praesent</span> tellus nisi, commodo sed mauris non, condimentum bibendum turpis. Sed at vulputate massa.
Vestibulum <span class="highlight">tempus</span> purus nec lacinia consectetur. Mauris congue nec felis nec facilisis. Nullam quam <span class="highlight">neque</span>, malesuada sagittis nunc sed, tempus vulputate ligula. Proin dictum mauris ut suscipit ullamcorper.
Ut accumsan nulla at <span class="highlight">enim</span> consequat rutrum. Nullam purus ligula, <span class="highlight">egestas</span> quis sapien vel, interdum dignissim ligula. Ut non enim vehicula, tincidunt neque <span class="highlight">posuere</span>, ornare neque. Nullam purus ligula, egestas.
<br/>
<span class="highlight">Coming soon.</span>
</p>
</div>
<div class="section animated animated-3-6">
<h3 class="section-header">feedstack</h3>
<p class="section-description">
Ut vel <span class="highlight">urna</span> eu neque finibus posuere non non <span class="highlight">magna</span>. Nullam ac ultricies nisi. Curabitur <span class="highlight">lorem</span> risus, ultricies ut sapien vitae, pharetra pharetra <span class="highlight">mauris</span>. Praesent commodo est id semper sollicitudin.
Proin et <span class="highlight">velit</span> non sapien molestie <span class="highlight">congue</span> id ut lorem. Aliquam erat volutpat. Integer et lectus vel massa <span class="highlight">malesuada</span> suscipit. Sed vulputate, nisi eget scelerisque tristique, massa eros vestibulum ligula.
<span class="highlight">Augue</span> massa at ipsum. In <span class="highlight">dictum</span> porta ultrices. Praesent eget placerat urna. Etiam ut <span class="highlight">lacus</span> quis turpis ultrices bibendum. Mauris congue <span class="highlight">vestibulum</span> rutrum.
<br/>
<span class="highlight">Coming soon.</span>
</p>
</div>
<div class="section animated animated-3-8">
<h3 class="section-header">blob</h3>
<p class="section-description">
Vivamus <span class="highlight">commodo</span> porta porttitor. Vestibulum ante ipsum primis in <span class="highlight">faucibus</span> orci luctus et ultrices posuere cubilia curae.
In nec <span class="highlight">magna</span> euismod, finibus eros nec, scelerisque <span class="highlight">augue</span>. Ut sollicitudin placerat lectus, ac scelerisque leo tempus eleifend.
<span class="highlight">Fusce</span> id tempor ligula. Maecenas id odio nec ligula elementum <span class="highlight">mollis</span> et id nisi. Cras vel eros imperdiet diam consequat malesuada. Mauris volutpat laoreet <span class="highlight">lacinia</span>.
<br/>
<span class="highlight">Coming soon.</span>
</p>
</div>
</div>
</div>
<div class="section-wrapper animated animated-4-0">
<h1 class="section-wrapper-header">Blog</h1>
<div class="section-container" style="overflow: hidden">
<div class="section">
<p class="section-description">
<span class="highlight">Coming soon.</span>
</p>
</div>
</div>
</div>
<div class="spacer"></div>
</div>
</body>
</html>