Skip to content

Commit b203f68

Browse files
xMartinxMartin
authored
Merge pull request #4 from xMartin/design-update
Update content and layout and add dark mode
2 parents 5600f54 + fe180e4 commit b203f68

File tree

8 files changed

+111
-153
lines changed

8 files changed

+111
-153
lines changed

‎fonts/LICENSE.txt‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎fonts/generator_config.txt‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎fonts/sourcesanspro-regular.otf.woff‎

-33.2 KB
Binary file not shown.

‎fonts/sourcesanspro-regular.otf.woff2‎

-26.6 KB
Binary file not shown.

‎fonts/sourcesanspro-semibold.otf.woff‎

-33 KB
Binary file not shown.

‎fonts/sourcesanspro-semibold.otf.woff2‎

-26.3 KB
Binary file not shown.

‎index.html‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,35 @@
1111
<div id="main">
1212
<h1 class="center header"><img id="logo" src="logo.png" alt=""><span>Grouptabs</span></h1>
1313
<p class="center"><strong>Track expenses in a group of people!</strong></p>
14+
<p class="center"><a class="button" href="https://app.grouptabs.net/">Start using Grouptabs</a></p>
1415

15-
<p>Share things with friends, have one person pay, and note it in the app. Next time someone else pays. You always know who is currently in red or green.</p>
16-
17-
<p>You can enter any constellation of participants for an expense. And have multiple people pay arbitrary parts of it. It’s easy and flexible.</p>
18-
19-
<p class="center"><a class="button" href="https://app.grouptabs.net/">Try the App</a></p>
20-
21-
<p>It is an offline-capable, installable web app and allows collaborating without user accounts. It works great on mobile devices!</p>
22-
23-
<hr>
24-
25-
<div>
26-
<p>You can <a href="https://github.com/xMartin/grouptabs">contribute to the open source code</a> and <a href="https://github.com/xMartin/grouptabs/issues">report issues &amp; suggest features</a> on GitHub. Also check out <a href="https://github.com/xMartin/grouptabs/wiki">concepts, ideas and documentation</a>.</p>
27-
28-
<p>Find the source code of the former version which used <a href="http://remotestorage.io">remoteStorage</a> in the branch <a href="https://github.com/xMartin/grouptabs/tree/remotestorage-legacy">“remotestorage-legacy”</a>. There’s an <a href="https://rs-importer.grouptabs.net">importer app</a> to move your tabs from a Remote Storage to the new app.</p>
16+
<div class="descriptions">
17+
<div class="row">
18+
<div class="column">
19+
<div class="emojis">🏂 🍜</div>
20+
<h2>Share experiences</h2>
21+
<p>Share things with friends, have one person pay, and note it in the app. Next time someone else pays. You always know who is currently in the red.</p>
22+
</div>
23+
<div class="column">
24+
<div class="emojis">💸 💰</div>
25+
<h2>Share expenses</h2>
26+
<p>You can enter any constellation of participants for an expense. And have multiple people pay arbitrary parts of it. It’s easy and flexible.</p>
27+
</div>
28+
</div>
29+
<div class="row">
30+
<div class="column">
31+
<div class="emojis">📱 📴</div>
32+
<h2>Mobile &amp; offline</h2>
33+
<p>Grouptabs is an offline-capable, installable web app and allows collaborating without user accounts. It works great on mobile devices!</p>
34+
</div>
35+
<div class="column">
36+
<div class="emojis">💻 🎉</div>
37+
<h2>Open source</h2>
38+
<p>Come join us! Contribute code, or report issues, or suggest features to the project on GitHub.</p>
39+
<p><a href="https://github.com/xMartin/grouptabs">Contribute to Grouptabs</a></p>
40+
<p><a href="https://rs-importer.grouptabs.net">remoteStorage import</a></p>
41+
</div>
42+
</div>
2943
</div>
3044
</div>
3145
</body>

‎style.css‎

Lines changed: 83 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
11
:root {
2-
--color-cta: #44f;
3-
--color-cta-opposite: #fff;
4-
--main-text-color: #131313;
5-
--main-background-color: #f5f5f5;
6-
--subtle-text-color: #707070;
7-
--divider-color: #e5e5e5;
2+
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
3+
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
4+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
5+
--dark-color: #131313;
6+
--light-color: #f5f5f5;
7+
--color-primary: #44f;
8+
--color-primary-opposite: #fff;
9+
--main-text-color: var(--dark-color);
10+
--main-background-color: var(--light-color);
11+
--subtle-text-color: #707071;
12+
--font-size: 18px;
13+
--font-size-large: 22px;
14+
--font-size-small: 14px;
815
}
9-
10-
@font-face {
11-
font-family: SourceSansPro;
12-
font-display: optional;
13-
src: url("./fonts/sourcesanspro-regular.otf.woff2") format("woff2"),
14-
url("./fonts/sourcesanspro-regular.otf.woff") format("woff");
15-
font-weight: 400;
16-
font-style: normal;
17-
}
18-
19-
@font-face {
20-
font-family: SourceSansPro;
21-
font-display: optional;
22-
src: url("./fonts/sourcesanspro-semibold.otf.woff2") format("woff2"),
23-
url("./fonts/sourcesanspro-semibold.otf.woff") format("woff");
24-
font-weight: 600;
25-
font-style: normal;
16+
@media (prefers-color-scheme: dark) {
17+
:root {
18+
--main-text-color: var(--light-color);
19+
--main-background-color: var(--dark-color);
20+
--subtle-text-color: #818182;
21+
}
2622
}
2723

2824
body {
2925
margin: 0;
3026
color: var(--main-text-color);
31-
font-size: 18px;
27+
font-size: var(--font-size);
3228
background: var(--main-background-color);
33-
font-family: SourceSansPro, sans-serif;
29+
font-family: var(--font-family-sans-serif);
30+
line-height: 140%;
3431
}
3532

3633
#main {
3734
max-width: 500px;
38-
min-width: 320px;
35+
min-width: 240px;
3936
margin: 0 auto;
40-
padding: 10px;
37+
padding: 12px;
4138
}
4239
@media (min-width: 500px) and (min-height: 780px) {
4340
#main {
@@ -50,18 +47,29 @@ body {
5047
display: flex;
5148
justify-content: center;
5249
align-items: center;
53-
}
54-
.header > * {
55-
margin: 0 .125em;
50+
margin-top: 2em;
5651
}
5752

5853
#logo {
59-
width: 80px;
60-
border-radius: 100px;
54+
width: 72px;
55+
height: 72px;
56+
border-radius: 100%;
57+
margin-right: 16px;
58+
}
59+
60+
h1 {
61+
font-size: 32px;
62+
}
63+
h2 {
64+
font-size: var(--font-size);
65+
margin-bottom: 8px;
66+
}
67+
h2 + p {
68+
margin-top: 0;
6169
}
6270

6371
a, a:link, a:visited {
64-
color: var(--color-cta);
72+
color: var(--color-primary);
6573
text-decoration: none;
6674
}
6775
a:hover {
@@ -72,22 +80,56 @@ a:hover {
7280
display: inline-block;
7381
padding: 10px 12px;
7482
width: 40%;
75-
background: var(--color-cta);
76-
color: var(--color-cta-opposite) !important;
83+
background: var(--color-primary);
84+
color: var(--color-primary-opposite) !important;
7785
border-radius: 5px;
78-
font-weight: bold;
86+
}
87+
.button:hover {
88+
text-decoration: none;
7989
}
8090

8191
.center {
8292
text-align: center;
8393
}
8494

85-
hr {
86-
border: 0;
87-
height: 0;
88-
border-top: 1px solid var(--divider-color);
95+
.descriptions {
96+
padding: 36px 0;
97+
}
98+
99+
.descriptions .emojis,
100+
.descriptions h2 {
101+
text-align: center;
89102
}
90103

91-
#main div {
104+
.descriptions p {
92105
color: var(--subtle-text-color);
106+
margin-top: 0;
107+
margin-bottom: 8px;
108+
}
109+
110+
.emojis {
111+
font-size: var(--font-size-large);
112+
}
113+
114+
.row {
115+
display: flex;
116+
flex-direction: row;
117+
flex-wrap: wrap;
118+
width: 100%;
119+
}
120+
121+
.column {
122+
display: flex;
123+
flex-direction: column;
124+
flex-basis: 100%;
125+
padding: 8px 8px 16px;
126+
}
127+
.column:first-child {
128+
padding-right: 16px;
129+
}
130+
131+
@media screen and (min-width: 500px) {
132+
.column {
133+
flex: 1;
134+
}
93135
}

0 commit comments

Comments
 (0)