add basic layout styles
This commit is contained in:
parent
0a0c78f0b0
commit
cb6cc081cb
|
|
@ -1,4 +1,6 @@
|
|||
<article id="about" class="container max-w-full w-full h-screen bg-gray-300">
|
||||
<h2>About</h2>
|
||||
<article id="about" class="l-relative l-screen-full">
|
||||
<div class="l-wrapper">
|
||||
<h2>About</h2>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
<article id="contact" class="container max-w-full w-full h-screen bg-gray-700">
|
||||
<h2>Contact</h2>
|
||||
<form>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="user_name">
|
||||
</li>
|
||||
<li>
|
||||
<label for="mail">E-mail:</label>
|
||||
<input id="mail" type="email" name="user_email">
|
||||
</li>
|
||||
<li>
|
||||
<label for="msg">Message:</label>
|
||||
<textarea id="msg" name="user_message"></textarea>
|
||||
</li>
|
||||
<li>
|
||||
<button id="js-form-send" type="button">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
<article id="contact" class="l-relative l-screen-full">
|
||||
<div class="l-wrapper">
|
||||
<h2>Contact</h2>
|
||||
<form>
|
||||
<ul class="u-no-list">
|
||||
<li>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="user_name">
|
||||
</li>
|
||||
<li>
|
||||
<label for="mail">E-mail:</label>
|
||||
<input id="mail" type="email" name="user_email">
|
||||
</li>
|
||||
<li>
|
||||
<label for="msg">Message:</label>
|
||||
<textarea id="msg" name="user_message"></textarea>
|
||||
</li>
|
||||
<li>
|
||||
<button id="js-form-send" type="button">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<footer class="transition-fade">
|
||||
<ul>
|
||||
<li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
|
||||
<li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<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 class="l-wrapper">
|
||||
<nav>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<article id="services" class="container max-w-full w-full h-screen bg-gray-500">
|
||||
<h2>Services</h2>
|
||||
<article id="services" class="l-relative l-screen-full">
|
||||
<div class="l-wrapper">
|
||||
<h2>Services</h2>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -4,3 +4,7 @@ html,
|
|||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.u-overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// #lists
|
||||
.u-no-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue