hero updates and general layout work

This commit is contained in:
2017-08-19 13:17:39 -05:00
committed by Mark Moser
parent 323f3a1263
commit 83acf3e641
8 changed files with 148 additions and 40 deletions

View File

@ -1,9 +1,62 @@
.hero { .hero {
display: flex;
position: relative; position: relative;
margin: 0; align-content: center;
align-items: center;
justify-content: center;
margin: 0 0 ($gutter * 2);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
padding: 0; padding: 0;
height: 250px; height: 250px;
h1 {
flex: 1 1 auto;
background-color: rgba($blue, 0.75);
padding: $gutter;
width: auto;
text-align: center;
color: $copy-light;
}
.blue {
background-color: rgba($blue, 0.75);
}
.dark-blue {
background-color: rgba($dark-blue, 0.75);
}
.yellow {
background-color: rgba($yellow, 0.75);
color: $copy-dark;
}
.orange {
background-color: rgba($orange, 0.75);
}
.red {
background-color: rgba($red, 0.75);
}
}
@media screen and (min-width: 426px) {
.hero {
h1 {
flex: 0 0 auto;
width: 425px;
}
}
}
@media screen and (min-width: 768px) {
.hero {
h1 {
width: calc(100% * 0.809);
max-width: 860px;
text-align: inherit;
}
}
} }

View File

@ -1,5 +1,30 @@
body {
min-width: 300px;
}
header, header,
main,
footer { footer {
margin: 0;
padding: 0; padding: 0;
} }
main {
margin: 0 $gutter;
padding: 0;
}
@media screen and (min-width: 426px) {
footer,
main {
margin: 0 auto;
width: 425px;
}
}
@media screen and (min-width: 768px) {
footer,
main {
width: calc(100% * 0.809);
max-width: 860px;
}
}

View File

@ -2,14 +2,13 @@ html,
body { body {
@include font-default; @include font-default;
background-color: $light; background-color: $light;
color: $black; color: $copy-dark;
} }
.h1, .h1,
h1 { h1 {
@include font-roboto; @include font-roboto;
margin: 0 0 ($gutter / 2); margin: 0 0 ($gutter / 2);
background-color: $light-grey;
padding: 8px 0; padding: 8px 0;
width: 100%; width: 100%;
font-size: 40px; font-size: 40px;
@ -71,7 +70,8 @@ a {
&:hover, &:hover,
&:active { &:active {
text-decoration: underline; background-color: $white;
text-decoration: none;
color: $dark-blue; color: $dark-blue;
} }
} }

View File

@ -9,3 +9,6 @@ $orange: rgba(233, 114, 76, 1);
$red: rgba(197, 40, 61, 1); $red: rgba(197, 40, 61, 1);
$blue: rgba(37, 95, 133, 1); $blue: rgba(37, 95, 133, 1);
$dark-blue: rgba(24, 48, 89, 1); $dark-blue: rgba(24, 48, 89, 1);
$copy-light: $white;
$copy-dark: $black;

View File

@ -1,13 +1,17 @@
--- ---
hero: stock/lake.png heading:
img: stock/lake.png
copy: I build web things
theme: blue
--- ---
<h1>I build web things.</h1> <section>
<h2>I'm Mark Moser</h2>
<p> <p>
A well-seasoned web developer with an affinity for clean code, A well-seasoned web developer with an affinity for clean code, workflow
workflow optimization, and ruby. I have experiences ranging from optimization, and ruby. I have experiences ranging from HTML prototyping
HTML prototyping through designing and executing API architectures. through designing and executing complex API architectures.
</p> </p>
<p> <p>
@ -17,14 +21,31 @@
providing creative solutions to specific needs, always keeping providing creative solutions to specific needs, always keeping
the bigger picture in mind. the bigger picture in mind.
</p> </p>
</section>
<h2>Proficiency's</h2> <section>
<h2>General Proficiency's</h2>
<div class="fifty">
<p> <p>
Well versed in many web development tool chains, my strengths Well versed in many web development tool chains, my strengths
include Ruby, JavaScript, SCSS, SQL, and PHP. include Ruby, JavaScript, SCSS, SQL, and PHP.
</p> </p>
<div class="pie">
<ul>
<li>Ruby</li>
<li>JavaScript</li>
<li>CSS</li>
<li>SQL</li>
<li>PHP</li>
</ul>
</div>
</div>
</section>
<section>
<h2>Back-end Proficiency's</h2>
<ul> <ul>
<li>5/5 HTML Prototyping</li> <li>5/5 HTML Prototyping</li>
<li>5/5 Ruby on Rails</li> <li>5/5 Ruby on Rails</li>
@ -38,3 +59,4 @@
<li>5/5 SQL</li> <li>5/5 SQL</li>
<li>5/5 Ruby</li> <li>5/5 Ruby</li>
</ul> </ul>
</section>

View File

@ -1,6 +1,9 @@
--- ---
title: site style guide title: Style guide
hero: stock/star_nasa.jpg heading:
img: stock/star_nasa.jpg
copy: Style guide
theme: orange
--- ---
<h1>Looking at styling for an h1</h1> <h1>Looking at styling for an h1</h1>

View File

@ -1,2 +1,3 @@
<div class="hero" style="background-image: url('{{assets}}/img/{{hero}}');"> <div class="hero" style="background-image: url('{{assets}}/img/{{heading.img}}');">
<h1 class="{{heading.theme}}">{{heading.copy}}</h1>
</div> </div>

View File

@ -1,5 +1,6 @@
<nav class="nav-foot"> <nav class="nav-foot">
<ul> <ul>
<li><a href="index.html">home</a></li>
<li><a href="styleguide.html">styleguide</a></li> <li><a href="styleguide.html">styleguide</a></li>
<li><a href="video.html">video</a></li> <li><a href="video.html">video</a></li>
<li><a href="misc.html">misc</a></li> <li><a href="misc.html">misc</a></li>