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 }} {{ with $stylesheet.css }}
<link href="{{ relURL . }}" rel="stylesheet"> <link href="{{ relURL . }}" rel="stylesheet">
{{ end }} {{ end }}
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head> </head>
<body> <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"> <article id="about" class="l-relative l-screen-min-full">
<h2>About</h2> <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> </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 class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</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="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 class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</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>

14
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"> <article id="contact" class="l-relative l-screen-min-full">
<div class="l-wrapper">
<h2>Contact</h2> <h2>Contact</h2>
<form> <form>
<ul> <ul class="u-no-list">
<li> <li>
<label for="name">Name</label> <label for="name">Name</label>
<input id="name" type="text" name="user_name"> <input id="name" type="text" name="name">
</li> </li>
<li> <li>
<label for="mail">E-mail:</label> <label for="email">E-mail:</label>
<input id="mail" type="email" name="user_email"> <input id="email" type="email" name="replyto">
</li> </li>
<li> <li>
<label for="msg">Message:</label> <label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea> <textarea id="msg" name="message"></textarea>
</li> </li>
<li> <li>
<button id="js-form-send" type="button">Send</button> <button id="js-form-send" type="button">Send</button>
</li> </li>
</ul> </ul>
</form> </form>
</div>
</article> </article>

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

@ -1,6 +1,8 @@
<footer class="transition-fade"> <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="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
<li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li> <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
</ul> </ul>
</div>
</footer> </footer>

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

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

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

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

46
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"> <article id="services" class="l-relative l-screen-min-full">
<div class="l-wrapper">
<h2>Services</h2> <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> </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; z-index: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%;
&::before { &::before {
//will-change: transform; //will-change: transform;
z-index: 1; z-index: 1;
@ -146,8 +150,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
} }
.c-block--4 { .c-block--4 {
height: 24rem;
&::before { &::before {
transform-origin: 100% 0; 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: // 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 @@
/* @import "normalize.css";
Define your resets here or use something like Normalize.css if you like
*/
html, html,
body { body {
margin: 0;
padding: 0;
height: 100%; 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 "milligram";
@import "imports/layout.scss";
@import "imports/utility.scss";
@import "imports/mixins.scss"; @import "imports/mixins.scss";
@import "imports/blocks.scss"; @import "imports/blocks.scss";
html, // fonts
body { body {
height: 100%; font-family: "Montserrat", sans-serif;
} }
// swup transition classes // swup transition classes