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

Compare commits

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

No commits in common. "d7ed367377e9c28c9d417afdda389146ea6832a3" and "18df3ea018c976942993a45d5dcd3e7e4c203440" have entirely different histories.
d7ed367377 ... 18df3ea018

13 changed files with 60 additions and 229 deletions
Show Stats Expand all files Collapse all files

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

@ -11,7 +11,6 @@
{{ 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,18 +1,4 @@
<article id="about" class="l-relative l-screen-min-full"> <article id="about" class="container max-w-full w-full h-screen bg-gray-300">
<div class="l-wrapper"> <h2>About</h2>
<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,21 +2,17 @@
<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,24 +1,22 @@
<article id="contact" class="l-relative l-screen-min-full"> <article id="contact" class="container max-w-full w-full h-screen bg-gray-700">
<div class="l-wrapper">
<h2>Contact</h2> <h2>Contact</h2>
<form> <form>
<ul class="u-no-list"> <ul>
<li> <li>
<label for="name">Name</label> <label for="name">Name</label>
<input id="name" type="text" name="name"> <input id="name" type="text" name="user_name">
</li> </li>
<li> <li>
<label for="email">E-mail:</label> <label for="mail">E-mail:</label>
<input id="email" type="email" name="replyto"> <input id="mail" type="email" name="user_email">
</li> </li>
<li> <li>
<label for="msg">Message:</label> <label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea> <textarea id="msg" name="user_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,8 +1,6 @@
<footer class="transition-fade"> <footer class="transition-fade">
<div class="l-wrapper"> <ul>
<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,12 +1,10 @@
<header> <header>
<div class="l-wrapper">
<nav> <nav>
<ul class="u-no-list l-flex l-flex-row"> <ul>
<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,7 +1,5 @@
<article id="home"> <article id="home">
<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 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 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,48 +1,4 @@
<article id="services" class="l-relative l-screen-min-full"> <article id="services" class="container max-w-full w-full h-screen bg-gray-500">
<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,10 +23,6 @@ $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;
@ -150,6 +146,8 @@ $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;
@ -202,31 +200,4 @@ $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
View File

@ -1,56 +0,0 @@
.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
View File

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

9
src/css/main.css
View File

@ -1,14 +1,11 @@
@import "imports/reset.css"; @import "normalize.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";
// fonts html,
body { body {
font-family: "Montserrat", sans-serif; height: 100%;
} }
// swup transition classes // swup transition classes