add basic layout styles

This commit is contained in:
Ray Elliott 2020-03-29 18:58:41 +00:00
parent 0a0c78f0b0
commit cb6cc081cb
11 changed files with 121 additions and 38 deletions

View File

@ -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">
<div class="l-wrapper">
<h2>About</h2>
</div>
</article>

View File

@ -1,7 +1,8 @@
<article id="contact" class="container max-w-full w-full h-screen bg-gray-700">
<article id="contact" class="l-relative l-screen-full">
<div class="l-wrapper">
<h2>Contact</h2>
<form>
<ul>
<ul class="u-no-list">
<li>
<label for="name">Name</label>
<input id="name" type="text" name="user_name">
@ -19,4 +20,5 @@
</li>
</ul>
</form>
</div>
</article>

View File

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

View File

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

View File

@ -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>

View File

@ -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">
<div class="l-wrapper">
<h2>Services</h2>
</div>
</article>

View File

@ -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;

View File

@ -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;
}

View File

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

View File

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

View File

@ -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;
}