Merge pull request #56 from CodeWithGroup/feature/home-page-layout

codewithgithub · web-flow · commit 72a4106e4bc9 · 2020-09-21T10:23:04.000+01:00
Changes to home page layout as per Jim's suggestions
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,19 +5,20 @@
 <body>
     <a class="sr-only sr-only-focusable" href="#page-content">Skip to main content</a>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WPSF3G7"
-                      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WPSF3G7" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div id="main-container" class="page-wrapper toggled">
         {% include sidebar.html %}
         <main role="main" class="page-content" id="page-content">
             <div class="row">
-                <div class="main-logo">
+                <div class="col-12 main-logo">
                     <a href="{{site.url}}"><img src="{{site.url}}/images/keyboard-green.png"></a>
                 </div>
-                <div class="main-logo-title">
-                    <h1 class="cover-heading">CODEWITH<span id="small-screen-break"><br /></span><span id="suffix" class="typed-suffix">US</span></h1>
+                <div class="col-12 main-logo-title">
+                    <h1 class="cover-heading">CODEWITH<span id="small-screen-break"><br /></span><span id="suffix"
+                            class="typed-suffix">US</span></h1>
                 </div>
             </div>
             <div class="row unpadded">
diff --git a/css/style.css b/css/style.css
@@ -461,7 +461,25 @@ div.event-book-button {
 
 /* RESIZING (min-width) */
 
-@media screen and (min-width: 526px) {
+@media screen and (min-width: 576px) {
+    .logo-col {
+        width: 120px;
+    }
+
+    .main-logo {
+        padding-right: 1em;
+    }
+
+    span#small-screen-break {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .center-when-small {
+        text-align: left;
+    }
+
     .page-wrapper .main-logo {
         display: initial;
         text-align: left;
@@ -481,27 +499,7 @@ div.event-book-button {
         margin-top: -5px;
         text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
     }
-}
-
-@media screen and (min-width: 576px) {
-    .center-when-small {
-        text-align: left;
-    }
-
-    .logo-col {
-        width: 120px;
-    }
-
-    .main-logo {
-        padding-right: 1em;
-    }
-
-    span#small-screen-break {
-        display: none;
-    }
-}
 
-@media screen and (min-width: 768px) {
     .page-wrapper.toggled .page-content {
         padding-left: 340px;
         padding-right: 40px;
diff --git a/index.html b/index.html
@@ -29,9 +29,11 @@
 title: Home
 ---
 
-<h1>Welcome to CodeWith!</h1>
 <div class="row intro">
-    <div class="offset-2 col-8 text-center">
+    <div class="col-12 center-when-small">
+        <h1>Welcome to CodeWith!</h1>
+    </div>
+    <div class="col-12 text-center">
         <h4>
             Our mission is to create a virtual space for adults to pursue programming-related learning
             and conversation, where everyone is valued, everyone has agency, and everyone is supported.
@@ -47,7 +49,9 @@ <h4>
     <div class="col-sm-9 col-md-10">
         <p class="intro-text">
             Want to dive right in? We usually have a few people connected to our
-            <a href="https://codewithpeople.slack.com">Slack workspace</a>, so come and speak to us there!
+            <a href="https://codewithpeople.slack.com">Slack workspace</a>, so come and speak to us
+            there. If you're not signed up, you can
+            <a href="https://launchpass.com/codewithpeople">join our Slack here</a>.
         </p>
     </div>
 </div>
