From a97593356cf5a5d5a5d9bff0f34aa1979738e089 Mon Sep 17 00:00:00 2001
From: Garrit Franke <garrit@slashdev.space>
Date: Mon, 29 Mar 2021 22:45:09 +0200
Subject: [PATCH] feat: contact section

---
 index.html            | 38 ++++++++++++++++++++++++++++----------
 styles/atoms.css      | 23 +++++++++++++++++++++++
 styles/contact.css    | 10 ++++++++++
 styles/index.css      |  3 +++
 styles/services.css   | 24 ------------------------
 styles/typography.css |  4 ++++
 6 files changed, 68 insertions(+), 34 deletions(-)
 create mode 100644 styles/atoms.css
 create mode 100644 styles/contact.css

diff --git a/index.html b/index.html
index 5833861..2f3a98f 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
         </section>
         <section class="services">
             <div class="services__container">
-                <h1 class="services__heading">Our Services</h1>
+                <h2 class="services__heading">Our Services</h2>
                 <div class="services__offers">
                     <div class="services__offers__card">
                         <h1 class="services__offers__card__heading">Chat</h1>
@@ -34,9 +34,9 @@
                         </p>
                         <a
                             href="https://matrix.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Join here!</p>
+                            <p>Join a room</p>
                         </a>
                     </div>
 
@@ -49,9 +49,9 @@
                         </p>
                         <a
                             href="https://git.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Set up your account!</p>
+                            <p>Set up your account</p>
                         </a>
                     </div>
 
@@ -62,25 +62,43 @@
                         </p>
                         <a
                             href="https://boards.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Get agile!</p>
+                            <p>Get agile</p>
                         </a>
                     </div>
                     <div class="services__offers__card">
-                        <h1 class="services__offers__card__heading">Fediverse</h1>
+                        <h1 class="services__offers__card__heading">
+                            Fediverse
+                        </h1>
                         <p class="services__offers__card__description">
                             We host our own federated social media instance.
                         </p>
                         <a
                             href="https://social.slashdev.space"
-                            class="services__offers_card__button"
+                            class="button__link"
                         >
-                            <p>Toot with us!</p>
+                            <p>Toot with us</p>
                         </a>
                     </div>
                 </div>
             </div>
         </section>
+        <section class="contact">
+            <div class="contact__container">
+                <h2>How to join</h2>
+                <p>
+                    /dev.space is a free and open community. Anyone and everyone
+                    is welcome. Simply join our Matrix server and chat with us.
+                    Already got an account on another instance? Great! See
+                    what's up in our lobby:
+                </p>
+                <a
+                    class="button__link button__contact"
+                    href="https://matrix.to/#/#lobby:matrix.slashdev.space"
+                    ><p>#lobby:matrix.slashdev.space</p></a
+                >
+            </div>
+        </section>
     </body>
 </html>
diff --git a/styles/atoms.css b/styles/atoms.css
new file mode 100644
index 0000000..f16492e
--- /dev/null
+++ b/styles/atoms.css
@@ -0,0 +1,23 @@
+.button__link {
+    font-weight: 350;
+    background: black;
+    border: 1px solid black;
+    color: white;
+    text-decoration: none;
+    padding: 0.6rem 2rem;
+    margin: 2rem 2.5rem;
+    transition: 0.2s;
+
+    display: flex;
+    align-items: center;
+}
+
+.button__link > p {
+    font-size: 1rem;
+    margin: auto;
+}
+
+.button__link:hover {
+    color: black;
+    background: white;
+}
\ No newline at end of file
diff --git a/styles/contact.css b/styles/contact.css
new file mode 100644
index 0000000..6bf86ca
--- /dev/null
+++ b/styles/contact.css
@@ -0,0 +1,10 @@
+.contact__container {
+    margin: auto 12vw;
+    justify-content: center;
+}
+
+.button__contact {
+    margin: auto;
+    margin-bottom: 2rem;
+    width: 15rem;
+}
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index 441a3b2..0519ddd 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,8 +1,11 @@
 @import url("./typography.css");
+@import url("./atoms.css");
+
 
 /* Components */
 @import url("./welcome.css");
 @import url("./services.css");
+@import url("./contact.css");
 
 /* Fonts */
 @font-face {
diff --git a/styles/services.css b/styles/services.css
index 20beec3..158a8d0 100644
--- a/styles/services.css
+++ b/styles/services.css
@@ -33,30 +33,6 @@
     font-size: 1rem;
 }
 
-.services__offers_card__button {
-    font-weight: 350;
-    background: black;
-    border: 1px solid black;
-    color: white;
-    text-decoration: none;
-    padding: 0.6rem 2rem;
-    margin: 2rem 2.5rem;
-    transition: 0.2s;
-
-    display: flex;
-    align-items: center;
-}
-
-.services__offers_card__button > p {
-    font-size: 1rem;
-    margin: auto;
-}
-
-.services__offers_card__button:hover {
-    color: black;
-    background: white;
-}
-
 @media only screen and (max-width: 380px) {
     .services__offers {
         width: 100vw;
diff --git a/styles/typography.css b/styles/typography.css
index f34f0c3..131d18d 100644
--- a/styles/typography.css
+++ b/styles/typography.css
@@ -17,4 +17,8 @@ h3 {
 p {
     font-size: 1.5rem;
 	font-weight: 200;
+}
+
+a {
+    color: black;
 }
\ No newline at end of file