rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: rayelliott:18df3ea018c976942993a45d5dcd3e7e4c203440
Branches Tags
rayelliott:master
..
compare: rayelliott:d7ed367377e9c28c9d417afdda389146ea6832a3
Branches Tags
rayelliott:master

9 Commits
18df3ea018 ... d7ed367377

Author SHA1 Message Date
Ray Elliott d7ed367377 update field names 2020-03-29 21:16:49 +00:00
Ray Elliott 581d512171 add services skeleton content 2020-03-29 20:17:01 +00:00
Ray Elliott b115bb3ddb update placeholder image alt text 2020-03-29 20:16:47 +00:00
Ray Elliott df20af6386 add skeleton about content 2020-03-29 20:10:27 +00:00
Ray Elliott b20ecca1da add .l-screen-min-full style 2020-03-29 20:09:54 +00:00
Ray Elliott b4daf39445 tidy up temporary blocks layout 2020-03-29 19:58:33 +00:00
Ray Elliott cb6cc081cb add basic layout styles 2020-03-29 19:11:03 +00:00
Ray Elliott 0a0c78f0b0 use montserrat font 2020-03-29 17:57:32 +00:00
Ray Elliott 8f95984538 move all css reset to reset.css 2020-03-29 17:57:07 +00:00
13 changed files with 229 additions and 60 deletions
Show Stats Expand all files Collapse all files

1
site/layouts/_default/baseof.html
View File

@ -11,6 +11,7 @@
{{ with $stylesheet.css }}
<link href="{{ relURL . }}" rel="stylesheet">
{{ end }}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>

18
site/layouts/partials/about.html
View File

@ -1,4 +1,18 @@
<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-min-full">
<div class="l-wrapper">
<div>
<h2>About Heading</h2>
<p>Lorem fuga cupiditate quidem quia earum, hic. Iusto id beatae sit similique sequi! Earum veritatis mollitia iste ipsam totam deleniti Nam cupiditate recusandae tempore ab magnam! Officiis maxime incidunt asperiores?</p>
<p>Amet sed ullam ea dolore corrupti sit. Alias aut doloribus explicabo perferendis fuga? Quas nostrum aut earum tempora voluptatem, magnam? Veritatis corrupti perspiciatis at aliquid perspiciatis Eligendi reprehenderit quidem veniam</p>
<p>Amet dolore atque iure inventore vitae Dolores fuga porro quo odit et autem. Sint est nesciunt unde non aliquid officiis fugit Repellat cum sequi cum fugiat fugit Voluptatem quaerat quibusdam.</p>
</div>
<div>
<img src="https://via.placeholder.com/200" alt="CARD IMAGE">
<h3>Card Heading</h3>
<p>
Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
</p>
</div>
</div>
</article>

26
site/layouts/partials/blocks.html
View File

@ -2,17 +2,21 @@
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--4 c-block-br bg-gray-300 w-64 text-green-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
</div>
<div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--3 bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--4 bg-gray-300 w-64 text-green-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
</div>

44
site/layouts/partials/contact.html
View File

@ -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-min-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="name">
</li>
<li>
<label for="email">E-mail:</label>
<input id="email" type="email" name="replyto">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea>
</li>
<li>
<button id="js-form-send" type="button">Send</button>
</li>
</ul>
</form>
</div>
</article>

10
site/layouts/partials/footer.html
View File

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

18
site/layouts/partials/header.html
View File

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

6
site/layouts/partials/hero.html
View File

@ -1,5 +1,7 @@
<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">
{{ partial "blocks.html" . }}
<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">
<div class="block-container block-grid">
{{ partial "blocks.html" . }}
</div>
</div>
</article>

48
site/layouts/partials/services.html
View File

@ -1,4 +1,48 @@
<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-min-full">
<div class="l-wrapper">
<h2>Services</h2>
<ul>
<li>
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<h3>Service Heading</h3>
<p>
<span>Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus.</span>
</p>
<p>
<span>Sit minima sapiente quidem ipsam animi? Nesciunt officiis amet facilis repellat nulla maiores? Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<h3>Service Heading</h3>
<p>
<span>Elit rem consequatur magnam magnam et voluptatem laborum? Maxime recusandae assumenda ratione ratione nisi laudantium! Recusandae accusantium eaque dolorum corporis quod. Excepturi provident commodi adipisci distinctio voluptatibus. Nulla ullam vitae.</span>
</p>
<p>
<span>Consectetur provident modi corporis reprehenderit incidunt? Vel illo dolor minima excepturi accusamus nostrum? Illo dignissimos aliquid perspiciatis corrupti possimus fuga. Reiciendis excepturi commodi voluptatum molestias magnam Accusantium totam illo harum</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<h3>Service Heading</h3>
<p>
<span>Amet illo expedita facere nihil vero, ab Deserunt doloremque commodi error aperiam laborum. Placeat omnis possimus est ipsam voluptas. Incidunt officia atque nisi dicta voluptates laborum Iusto exercitationem tempora dicta.</span>
</p>
<p>
<span>Amet architecto praesentium cumque delectus exercitationem Repudiandae facere quia sed id inventore? Vel tempore fugit iusto ab magnam. Consequatur iure ex temporibus odio ab eligendi dolore? Dignissimos ipsum non sit</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/200" alt="SERVICE IMAGE">
<h3>Service Heading</h3>
<p>
<span>Ipsum perferendis perspiciatis velit ut commodi accusantium Dignissimos quisquam quam voluptatum perspiciatis optio? Beatae molestiae quisquam esse ut cum? Ab praesentium ad eius recusandae nisi. Laudantium eos minima ex quod?</span>
</p>
<p>
<span>Lorem nisi facilis corrupti sunt nihil! Ipsum soluta possimus expedita commodi expedita. Reprehenderit sed fugit hic amet maxime velit? Repellat saepe quasi iure laborum quasi. Pariatur dolorem reprehenderit laboriosam dolorum</span>
</p>
</li>
</ul>
</div>
</article>

33
src/css/imports/blocks.scss
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;
@ -146,8 +150,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
}
.c-block--4 {
height: 24rem;
&::before {
transform-origin: 100% 0;
@ -200,4 +202,31 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
}
}
.block-container {
position: relative;
width: 100%;
max-width: 110rem;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
.block-grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
.c-block-tr {
grid-column: 3/4;
grid-row: 1/3;
}
.c-block-br {
grid-column: 2/4;
grid-row: 3/3;
}
}
// vim:set filetype=scss:

56
src/css/imports/layout.scss Normal file
View File

@ -0,0 +1,56 @@
.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-min-full {
width: 100%;
min-height: 100vh;
}
.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;
}

10
src/css/imports/reset.css
View File

@ -1,10 +1,10 @@
/*
Define your resets here or use something like Normalize.css if you like
*/
@import "normalize.css";
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
box-sizing: border-box;
}

10
src/css/imports/utility.scss Normal file
View File

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

9
src/css/main.css
View File

@ -1,11 +1,14 @@
@import "normalize.css";
@import "imports/reset.css";
@import "milligram";
@import "imports/layout.scss";
@import "imports/utility.scss";
@import "imports/mixins.scss";
@import "imports/blocks.scss";
html,
// fonts
body {
height: 100%;
font-family: "Montserrat", sans-serif;
}
// swup transition classes