add basic layout styles

site/layouts/partials/about.html

@@ -1,4 +1,6 @@
-<article id="about" class="container max-w-full w-full h-screen bg-gray-300">
+<article id="about" class="l-relative l-screen-full">
-  <h2>About</h2>
+  <div class="l-wrapper">
+    <h2>About</h2>
+  </div>
 </article>
 

site/layouts/partials/contact.html

@@ -1,22 +1,24 @@
-<article id="contact" class="container max-w-full w-full h-screen bg-gray-700">
+<article id="contact" class="l-relative l-screen-full">
-  <h2>Contact</h2>
+  <div class="l-wrapper">
-  <form>
+    <h2>Contact</h2>
-    <ul>
+    <form>
-      <li>
+      <ul class="u-no-list">
-        <label for="name">Name</label>
+        <li>
-        <input id="name" type="text" name="user_name">
+          <label for="name">Name</label>
-      </li>
+          <input id="name" type="text" name="user_name">
-      <li>
+        </li>
-        <label for="mail">E-mail:</label>
+        <li>
-        <input id="mail" type="email" name="user_email">
+          <label for="mail">E-mail:</label>
-      </li>
+          <input id="mail" type="email" name="user_email">
-      <li>
+        </li>
-        <label for="msg">Message:</label>
+        <li>
-        <textarea id="msg" name="user_message"></textarea>
+          <label for="msg">Message:</label>
-      </li>
+          <textarea id="msg" name="user_message"></textarea>
-      <li>
+        </li>
-        <button id="js-form-send" type="button">Send</button>
+        <li>
-      </li>
+          <button id="js-form-send" type="button">Send</button>
-    </ul>
+        </li>
-  </form>
+      </ul>
+    </form>
+  </div>
 </article>

site/layouts/partials/footer.html

@@ -1,6 +1,8 @@
 <footer class="transition-fade">
-  <ul>
+  <div class="l-wrapper">
-    <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
+    <ul class="u-no-list l-flex l-flex-row">
-    <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
+      <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-  </ul>
+      <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
+    </ul>
+  </div>
 </footer>

site/layouts/partials/header.html

@@ -1,10 +1,12 @@
 <header>
-  <nav>
+  <div class="l-wrapper">
-    <ul>
+    <nav>
-      <li><a href="{{ .Site.BaseURL }}">Home</a></li>
+      <ul class="u-no-list l-flex l-flex-row">
-      <li><a href="#about">About</a></li>
+        <li><a href="{{ .Site.BaseURL }}">Home</a></li>
-      <li><a href="#services">Services</a></li>
+        <li><a href="#about">About</a></li>
-      <li><a href="#contact">Contact</a></li>
+        <li><a href="#services">Services</a></li>
-    </ul>
+        <li><a href="#contact">Contact</a></li>
-  </nav>
+      </ul>
+    </nav>
+  </div>
 </header>

site/layouts/partials/hero.html

@@ -1,5 +1,5 @@
 <article id="home">
-  <div id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
+  <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden">
     {{ partial "blocks.html" . }}
   </div>
 </article>

site/layouts/partials/services.html

@@ -1,4 +1,6 @@
-<article id="services" class="container max-w-full w-full h-screen bg-gray-500">
+<article id="services" class="l-relative l-screen-full">
-  <h2>Services</h2>
+  <div class="l-wrapper">
+    <h2>Services</h2>
+  </div>
 </article>
 

src/css/imports/blocks.scss

@@ -23,6 +23,10 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
   z-index: 1;
   position: relative;
   overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
   &::before {
     //will-change: transform;
     z-index: 1;

src/css/imports/layout.scss

@@ -0,0 +1,51 @@
+.l-wrapper {
+  width: 100%;
+  max-width: 90rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// #position
+
+.l-absolute {
+  position: absolute;
+}
+
+.l-relative {
+  position: relative;
+}
+
+// #sizes
+
+.l-screen-full {
+  width: 100%;
+  height: 100vh;
+}
+
+// #flex
+
+.l-flex {
+  display: flex;
+}
+
+.l-flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.l-justify-around {
+  justify-content: space-around;
+}
+
+.l-flex-column {
+  flex-direction: column;
+}
+
+.l-flex-row {
+  flex-direction: row;
+}
+
+.l-flex-wrap {
+  flex-wrap: wrap;
+}
+

src/css/imports/reset.css

@@ -4,3 +4,7 @@ html,
 body {
   height: 100%;
 }
+
+html {
+  box-sizing: border-box;
+}

src/css/imports/utility.scss

@@ -0,0 +1,10 @@
+.u-overflow-hidden {
+  overflow: hidden;
+}
+
+// #lists
+.u-no-list {
+  list-style: none;
+  padding-left: 0;
+}
+

src/css/main.css

@@ -1,8 +1,12 @@
 @import "imports/reset.css";
 @import "milligram";
+
+@import "imports/layout.scss";
+@import "imports/utility.scss";
 @import "imports/mixins.scss";
 @import "imports/blocks.scss";
 
+// fonts
 body {
   font-family: "Montserrat", sans-serif;
 }