diff --git a/www/src/index.md b/www/src/index.md
index e167c7402..3e9a2ddc8 100644
--- a/www/src/index.md
+++ b/www/src/index.md
@@ -11,14 +11,17 @@ for Delta Chat users. For details how it avoids storing personal information
please see our [privacy policy](privacy.html).
{% endif %}
-Get a {{config.mail_domain}} chat profile
+
+ Get a {{config.mail_domain}} chat profile
+
If you are viewing this page on a different device
without a Delta Chat app,
you can also **scan this QR code** with Delta Chat:
-
- 
+
+
+
🐣 **Choose** your Avatar and Name
diff --git a/www/src/main.css b/www/src/main.css
index 772b2e9d6..6b966acfd 100644
--- a/www/src/main.css
+++ b/www/src/main.css
@@ -1,25 +1,27 @@
+:root {
+ font-size: 1.25rem;
+}
body {
+ margin: 1rem auto;
+ padding: 0 0.5rem;
+ max-width: 40rem;
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
line-height: 1.4;
- font-size: 1.2em;
- max-width: 800px;
- margin: 20px auto;
- padding: 0 10px;
+
color: #363636;
background: #fff;
}
h1 {
- font-size: 2.2em;
- margin-top: 0;
+ font-size: 2.2rem;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
- margin-bottom: 12px;
- margin-top: 24px;
font-weight: 600;
+ margin: 1rem 0;
}
a {
@@ -38,8 +40,8 @@ img, video {
code {
background: #efefef;
- padding: 2.5px 5px;
- border-radius: 6px;
+ padding: 0.1rem 0.25rem;
+ border-radius: 0.25rem;
}
#menu {
@@ -50,14 +52,15 @@ code {
#menu li {
display: inline-block;
- padding-right: 0.5em;
+ padding-right: 0.85rem;
}
-#domain {
+li#domain {
margin-left: auto;
+ padding-right: 0;
}
-#domain a {
+li#domain a {
color: #888;
}
@@ -66,21 +69,27 @@ code {
}
.experimental {
- margin: 3em 0;
- padding: 1em;
- border: 4px dashed red;
+ margin-top: 2rem;
+ padding: 1rem;
+ border: 0.2rem dashed red;
+
color: red;
font-weight: bold;
}
+.link-centered {
+ display: block;
+ width: fit-content;
+ margin: 0 auto;
+ text-align: center;
+}
+
.cta-button, .cta-button:hover, .cta-button:visited {
- border: 1.5px solid #a4c2d0;
- border-radius: 5px;
- padding: 10px;
- display: inline-block;
- margin: 10px 0;
-
- background: linear-gradient(120deg, #77888f, #364e59);
- color: white !important;
- font-weight: bold;
+ border: 0.05rem solid #a4c2d0;
+ border-radius: 0.25rem;
+ padding: 0.5rem;
+
+ background: linear-gradient(120deg, #77888f, #364e59);
+ color: #fff;
+ font-weight: bold;
}
diff --git a/www/src/page-layout.html b/www/src/page-layout.html
index 4fe178eb9..28ffde561 100644
--- a/www/src/page-layout.html
+++ b/www/src/page-layout.html
@@ -9,7 +9,7 @@
{{ config.mail_domain }} {{ pagename }}
-
+