diff --git a/index.html b/index.html index faf176d..56f6827 100644 --- a/index.html +++ b/index.html @@ -4,45 +4,43 @@ Kosmos - - - + -
-

Kosmos

-

Open-source group communication for the 21st century

- - -
- +
+
+

Kosmos

+

Group communication for the 21st century

+
+
+

+ We are an open co-operative of people, who are developing a free, + open-source, and user-centric alternative to centralized group chat + platforms, based on widely used protocols and standards. +

+

+ A public beta of Kosmos Chat is planned for late 2019. We also develop + a system for rewarding contributors and enabling decentralized + governance based on contributions, called + Kredits, + which we started using in production recently. +

+

+ You can find all relevant information and further links in our + wiki. + We collaborate on source code on + GitHub + as well as our own + Gitea. + For announcements and other news, you can follow us on the + fediverse + (recommended) or on + Twitter. +

+
+
diff --git a/styles/style.css b/styles/style.css index 71b6a36..a33d9c1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,6 +6,7 @@ body, html { box-sizing: border-box; height: 100%; + font-size: 16px; } *, *:before, *:after { @@ -13,186 +14,77 @@ body, html { } body { - background-color: #000; - background-image: url(/img/lagoon-close-02.jpg); - background-size: cover; - background-repeat: no-repeat; - color: #fff; + background-color: #fff; + color: #232323; font-family: Abel; font-size: 18px; text-rendering: optimizeLegibility; text-align: center; } -section#teaser { - height: 100%; - width: 768px; - max-width: 95%; +html, body, #wrapper { + min-height: 100%; +} + +#wrapper { + min-height: 100%; margin: 0 auto; - text-align: center; - display: -webkit-box; - display: -moz-box; - display: box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-direction: normal; - box-direction: normal; - -webkit-flex-direction: column; - -moz-flex-direction: column; flex-direction: column; - -ms-flex-direction: column; - -webkit-box-lines: single; - -moz-box-lines: single; - box-lines: single; - -webkit-flex-wrap: nowrap; - -moz-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-align: center; - -moz-box-align: center; - box-align: center; - -webkit-align-items: center; - -moz-align-items: center; - -ms-align-items: center; - -o-align-items: center; align-items: center; - -ms-flex-align: center; - -webkit-align-content: center; - -moz-align-content: center; - align-content: center; - -ms-flex-line-pack: center; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - -webkit-justify-content: center; - -moz-justify-content: center; - -ms-justify-content: center; - -o-justify-content: center; justify-content: center; - -ms-flex-pack: center; - -webkit-flex-grow: 0; - -moz-flex-grow: 0; - flex-grow: 0; - -ms-flex-positive: 0; } - section#teaser h1 { - display: inline-block; - margin-bottom: 1rem; - font-size: 4rem; - font-family: Raleway; - font-weight: 300; - text-transform: uppercase; } - section#teaser h2 { - margin-bottom: 4rem; - font-weight: 300; - font-size: 1.6rem; } - section#teaser p { - margin-bottom: 2rem; } - section#teaser nav { - display: block; - width: 100%; } - section#teaser nav ul { - display: block; - width: 100%; - list-style: none; - display: -webkit-box; - display: -moz-box; - display: box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - -webkit-box-direction: normal; - -moz-box-direction: normal; - box-direction: normal; - -webkit-flex-direction: row; - -moz-flex-direction: row; - flex-direction: row; - -ms-flex-direction: row; - -webkit-box-lines: single; - -moz-box-lines: single; - box-lines: single; - -webkit-flex-wrap: nowrap; - -moz-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-align: center; - -moz-box-align: center; - box-align: center; - -webkit-align-items: center; - -moz-align-items: center; - -ms-align-items: center; - -o-align-items: center; - align-items: center; - -ms-flex-align: center; - -webkit-align-content: center; - -moz-align-content: center; - align-content: center; - -ms-flex-line-pack: center; - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - -webkit-justify-content: center; - -moz-justify-content: center; - -ms-justify-content: center; - -o-justify-content: center; - justify-content: center; - -ms-flex-pack: center; - -webkit-flex-grow: 1; - -moz-flex-grow: 1; - flex-grow: 1; - -ms-flex-positive: 1; } - section#teaser nav ul li { - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; - height: 48px; } - section#teaser nav ul li a { - display: block; - margin: 0 8px; - height: 2.4rem; - line-height: 2.4rem; - font-size: 1.2rem; - font-weight: 300; - text-decoration: none; - color: #fff; - border: 1px solid #fff; - border-radius: 24px; - -webkit-transition: all linear 150ms; - -moz-transition: all linear 150ms; - transition: all linear 150ms; } - section#teaser nav ul li a:hover { - background: rgba(255, 255, 255, 0.2); - -webkit-transition: all linear 150ms; - -moz-transition: all linear 150ms; - transition: all linear 150ms; - } - -footer { - position: absolute; - bottom: 8px; - right: 8px; - font-size: 12px; } -footer p { + +header { + height: 100%; + max-width: 90%; + margin: 0 auto 10vh; + text-align: center; +} + +header h1 { display: inline-block; - opacity: 0.7; + margin-bottom: 2rem; + margin-right: -0.25em; /* fix trailing space from letter-spacing */ + font-size: 7vw; + font-family: Raleway; + font-weight: 700; + letter-spacing: 0.5em; + text-transform: uppercase; + background: url(https://kredits.kosmos.org/img/bg-947d3bf6bb15a1a3b07afcba4c307690.jpg); + background-size: cover; + background-repeat: no-repeat; + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; } -@media screen and (max-width: 600px) { - section#teaser h1 { - font-size: 72px; +header h2 { + font-weight: 300; + font-size: 1.4rem; +} + +main { + width: 768px; + max-width: 90%; + text-align: left; + font-size: 1.2rem; +} + +main p { + line-height: 1.5em; + margin-bottom: 1em; +} + +@media screen and (max-width: 760px) { + header { + margin-top: 4rem; + } + + header h1 { + font-size: 8vw; + } + + footer { + margin-bottom: 4rem; } }