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

Compare commits

base: rayelliott:5d174994c8e246f5d2cd0afd2993973cacac7177
Branches Tags
rayelliott:master
...
compare: rayelliott:55c1f24ebd88af752287d50c4c173edc548396c7
Branches Tags
rayelliott:master

15 Commits
5d174994c8 ... 55c1f24ebd

Author SHA1 Message Date
Ray Elliott 55c1f24ebd do not track img.jpg 2020-03-31 15:06:47 +00:00
Ray Elliott 7540c82925 remove nested styles from lists 2020-03-31 15:05:09 +00:00
Ray Elliott bc7abccbb9 fix absolute positioning mixin 
add `top:` declaration
 2020-03-31 15:03:27 +00:00
Ray Elliott 1a6b7bcb06 add footer styles 2020-03-31 15:02:34 +00:00
Ray Elliott 7b5a9be359 remove nested selector li from .l-flex-list-row 2020-03-31 14:29:47 +00:00
Ray Elliott a65efbfd2b add font mixins 2020-03-31 13:33:43 +00:00
Ray Elliott 1831ae15c1 add footer body content 2020-03-31 13:19:53 +00:00
Ray Elliott 0eb45ce9a7 rename l-section -> l-section-pad 2020-03-31 13:09:12 +00:00
Ray Elliott 86e5bebb13 decrease font size on x-small devices 2020-03-31 12:58:26 +00:00
Ray Elliott 81f3835060 add padding to sections 2020-03-31 12:58:15 +00:00
Ray Elliott 1b2243bdcd remove unused style 2020-03-31 12:13:30 +00:00
Ray Elliott b96491a9f0 basic footer styles 2020-03-31 12:13:03 +00:00
Ray Elliott 2737408983 decrease size of 1rem 2020-03-31 11:12:45 +00:00
Ray Elliott 7e591cbed0 rename class: page-bg -> body-bg 2020-03-31 10:42:49 +00:00
Ray Elliott b5e34b7d7f rename css custom property 2020-03-31 10:30:22 +00:00
11 changed files with 218 additions and 24 deletions
Show Stats Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<article id="about" class="l-relative l-screen-min-full">
<div class="l-wrapper">
<div class="l-section-pad 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>

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

@ -1,5 +1,5 @@
<article id="contact" class="l-relative l-screen-min-full contact-bg">
<div class="l-wrapper">
<div class="l-section-pad l-wrapper">
<h2>Contact</h2>
<form action="https://mailthis.to/remailthis" method="POST" encType="multipart/form-data">
<ul class="u-no-list">

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

@ -1,8 +1,40 @@
<footer class="transition-fade">
<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>
<footer class="footer transition-fade">
<div class="l-underlay footer-bg"></div>
<div class="l-wrapper l-section-pad l-section-pad--pb-reduce">
<ul class="l-flex-list-row footer__body">
<li class="footer__body-section footer__body-section--m-left-align">
<h3 class="footer__heading">Let's keep in touch!</h3>
<p>Find us on any of these platforms. We respond in 1-2 business days.</p>
<ul class="l-flex-list-row footer__social-list">
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
<li><span class="social-icon"></span></li>
</ul>
</li>
<li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
<h3 class="footer__heading--small footer__heading">Useful Links</h3>
<ul class="l-list-bare">
<li><a class="footer__link" href="#">Link One</a></li>
<li><a class="footer__link" href="#">Link Two</a></li>
<li><a class="footer__link" href="#">Link Three</a></li>
<li><a class="footer__link" href="#">Link Four</a></li>
</ul>
</li>
<li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow">
<h3 class="footer__heading--small footer__heading">Other Resources</h3>
<ul class="l-list-bare">
<li><a class="footer__link" href="#">Link One</a></li>
<li><a class="footer__link" href="#">Link Two</a></li>
<li><a class="footer__link" href="#">Link Three</a></li>
<li><a class="footer__link" href="#">Link Four</a></li>
</ul>
</li>
</ul>
<ul class="l-flex-list-row footer__footer">
<li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
<li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
</ul>
<p class="footer__attr">Copyright &copy; <span id="js-copy-date">2020</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
</div>
</footer>

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

@ -1,8 +1,8 @@
<header class="header">
<div class="l-underlay page-bg header-bg"></div>
<div class="l-underlay body-bg header-bg"></div>
<div class="l-wrapper">
<nav class="nav">
<ul class="l-flex-list-row nav__item">
<ul class="l-flex-list-row">
<li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
</ul>
<ul class="l-flex-list-row nav__item">

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

@ -1,5 +1,5 @@
<article id="services" class="l-relative l-screen-min-full services-bg">
<div class="l-wrapper">
<div class="l-section-pad l-wrapper">
<h2>Services</h2>
<ul>
<li>

10
src/css/imports/base.scss
View File

@ -1,6 +1,12 @@
body {
font-family: "Montserrat", sans-serif;
@include font-body;
color: var(--color__body);
background-color: var(--color__bg);
background-color: var(--color-bg);
font-size: 0.9em;
@media (min-width: $bp-xs) {
font-size: 1em;
}
}

34
src/css/imports/layout.scss
View File

@ -1,10 +1,31 @@
.l-wrapper {
width: 100%;
max-width: 90rem;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
}
.l-section-pad {
padding: 24px 8px;
@media (min-width: $bp-m) {
padding: 32px 32px;
}
@media (min-width: $bp-l) {
padding: 48px 32px;
}
// reduce padding bottom
&--pb-reduce {
padding-bottom: 8px;
@media (min-width: $bp-m) {
padding-bottom: 16px;
}
}
}
// #position
.l-absolute {
@ -69,9 +90,12 @@
justify-content: center;
padding-left: 0;
list-style: none;
> li {
margin-bottom: 0;
}
margin: 0;
}
.l-list-bare {
list-style: none;
padding-left: 0;
margin: 0;
}

12
src/css/imports/mixins.scss
View File

@ -1,7 +1,17 @@
@mixin font-body($weight: normal) {
font-family: "Montserrat", sans-serif;
font-weight: $weight;
}
@mixin font-link($weight: normal) {
font-family: "Montserrat", sans-serif;
font-weight: $weight;
}
@mixin abs-full {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
}

10
src/css/imports/variables.scss
View File

@ -1,3 +1,11 @@
$bp-xs: 28em;
$bp-s: 40em;
$bp-m: 50em;
$bp-l: 80em;
$bp-footer-s: 28em;
$bp-footer-m: 60em;
$z-index__header: 100;
:root {
@ -42,6 +50,6 @@ $z-index__header: 100;
// --accent-quaternary-100: #fffcf4;
// --accent-quinary-100: #ffeefc;
--color__bg: var(--neutral-100);
--color__body: var(--neutral-600);
--color-bg: var(--neutral-100);
}

122
src/css/main.css
View File

@ -5,10 +5,10 @@
@import "milligram/src/milligram.scss";
@import "imports/mixins.scss";
@import "imports/base.scss";
@import "imports/layout.scss";
@import "imports/utility.scss";
@import "imports/mixins.scss";
@import "imports/blocks.scss";
@import "mapbox-gl/dist/mapbox-gl.css";
@ -64,7 +64,121 @@ html.is-animating .transition-fade {
}
}
.nav-item {
// footer
.footer {
position: relative;
font-size: 0.9rem;
color: var(--neutral-100);
}
.footer-bg {
background-color: var(--neutral-700);
}
.footer__term {
margin: 0 0.5em;
}
.footer__attr {
text-align: center;
margin-bottom: 0;
font-size: 0.8em;
}
.footer__body {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
}
.footer__body-section {
flex: 0 0 100%;
margin-bottom: 1.6rem;
@media (min-width: $bp-footer-s) {
&--narrow {
flex: 0 0 50%;
}
}
@media (min-width: $bp-footer-m) {
flex: 0 0 60%;
margin-bottom: 0;
padding: 0 0.8rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
&--narrow {
flex: 0 1 20%;
}
&--m-left-align {
text-align: left;
.footer__social-list {
justify-content: left;
}
}
}
}
.footer__footer {
position: relative;
font-size: 0.9em;
margin-top: 2.4rem;
&::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
left: 0;
top: -1.2rem;
background-color: var(--neutral-400);
opacity: 0.2;
}
}
.footer__heading {
font-size: 2.25em;
&--small {
@include font-body(bold);
font-size: 1em;
text-transform: uppercase;
}
}
.footer__social-list {
justify-content: center;
}
.footer__link {
color: var(--neutral-200);
text-decoration: none;
@include font-link(bold);
&:focus,
&:hover {
color: var(--neutral-400);
}
}
.social-icon {
display: block;
width: 3em;
height: 3em;
background-color: red;
margin: 0 0.25em;
border-radius: 50%;
}
// hero
@ -91,8 +205,8 @@ html.is-animating .transition-fade {
text-transform: capitalize;
}
.page-bg {
background-color: var(--color__bg);
.body-bg {
background-color: var(--color-bg);
}
// vim:set filetype=scss:

2
src/css/milligram

@ -1 +1 @@
Subproject commit 0b46c4eef2df813bfa136f12cfbf332ae60ffa13
Subproject commit aa63878e1cd82f40ea590bc607313f5ec6a701ff