Merge pull request 'Remove full-page hero in favor of more density' (#1) from TobTobXX/slashdev.space-landing:main into main

Reviewed-on: garrit/slashdev.space-landing#1
2 years ago · 6f941f09cf
6 changed files with 48 additions and 75 deletions
--- a/index.html
+++ b/index.html
@ -8,25 +8,19 @@
        <link rel="stylesheet" href="styles/index.css" />
    </head>
    <body>
-        <section class="hero">
-            <div class="hero__text-area__container">
-                <h1 class="hero__text-area__heading">/dev.space</h1>
-                <h3 class="hero__text-area__subheading">
-                    The digital hackerspace
-                </h3>
-            </div>
-        </section>
-        <section class="introduction">
-            <div class="introduction__container">
-                <h1 class="introduction__container__heading">
-                    /dev.space is a platform providing online services for
-                    developers to collectively learn and grow.
+        <section class="welcome">
+            <div class="welcome__container">
+                <h1 class="welcome__text-area__heading">
+                    /dev.space
                </h1>
-                <h3 class="introduction__container__subheading">
-                    Whether you're freshly starting out, or you are just looking
-                    to connect with likeminded people. We help you turn your
-                    project ideas into reality.
+                <h3 class="welcome__text-area__subheading">
+                    Where developers can collectively learn an grow.
                </h3>
+                <p class="welcome__text-area__description">
+                    Whether you're freshly starting out, or you are just looking
+                    to connect with likeminded people. Our suite of online services
+                    helps you turn your project ideas into reality.
+                </p>
            </div>
        </section>
        <section class="services">
--- a/styles/hero.css
+++ b/styles/hero.css
@ -1,38 +0,0 @@
-.hero {
-    align-items: center;
-    display: flex;
-    height: 100vh;
-    justify-content: center;
-    font-family: "Work Sans", sans-serif;
-}
-
-.hero__text-area__container {
-    text-align: center;
-}
-
-.hero__text-area__heading {
-    font-size: 4rem;
-    margin: 1rem;
-}
-
-
-.hero__text-area__subheading {
-    font-size: 2rem;
-}
-
-@media (min-width: 800px) {
-    .hero__text-area__heading {
-        font-size: 10rem;
-    }
-
-    .hero__text-area__subheading {
-        font-size: 3rem;
-    }
-}
-
-.hero__scroll-arrow {
-    font-size: 6rem;
-    font-weight: lighter;
-    position: absolute;
-    bottom: 1rem;
-}
--- a/styles/index.css
+++ b/styles/index.css
@ -2,8 +2,7 @@
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap");

 /* Components */
-@import url("./hero.css");
-@import url("./introduction.css");
+@import url("./welcome.css");
@import url("./services.css");

 body {
--- a/styles/introduction.css
+++ b/styles/introduction.css
@ -1,15 +0,0 @@
-.introduction {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    margin-bottom: 10rem;
-}
-
-.introduction__container__heading {
-    font-size: 2.5rem;
-}
-
-.introduction__container__subheading {
-    font-size: 1.5rem;
-}
--- a/styles/services.css
+++ b/styles/services.css
@ -3,11 +3,13 @@
    display: flex;
    justify-content: center;
    text-align: center;
-    margin-bottom: 10rem;
+    margin-top: 2rem;
 }

 .services__heading {
-    font-size: 5rem;
+    font-size: 3.3rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
 }

 .services__offers {
@ -18,7 +20,6 @@
 }

 .services__offers__card {
-    margin-top: 1.5rem;
    width: 15rem;
 }
 .services__offers__card__heading {
--- a/styles/welcome.css
+++ b/styles/welcome.css
@ -0,0 +1,32 @@
+.welcome {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    font-family: "Work Sans", sans-serif;
+}
+
+.welcome__container {
+	margin-top: 8vh;
+    text-align: center;
+}
+
+.welcome__text-area__heading {
+    font-size: 5rem;
+    margin: 1rem;
+    text-align: center;
+}
+
+.welcome__text-area__subheading {
+    font-size: 2rem;
+    text-align: center;
+	margin-top: 0;
+	margin-bottom: 2em;
+}
+
+.welcome__text-area__description {
+    font-size: 1.5rem;
+	/* font-weight: 350; */ /* Can't try out, I don't have multiple weights installed. */
+    text-align: center;
+	margin-left: 12vw;
+	margin-right: 12vw;
+}