mmoser/markamoser.com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

style guide noodles

Browse Source
This commit is contained in:
Mark Moser
2017-08-05 22:44:03 -05:00
committed by Mark Moser
parent 8b0e536819
commit 6f7f5b8836
16 changed files with 386 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
site/assets/scss/elements/_layout.scss Normal file
View File

@ -0,0 +1,5 @@
header,
main,
footer {
padding: 0 $gutter;
}

9
site/assets/scss/elements/_nav.scss Normal file
View File

@ -0,0 +1,9 @@
nav {
ul {
@include slim-ul;
li {
display: inline-block;
}
}
}

127
site/assets/scss/elements/_typography.scss
View File

@ -1,48 +1,81 @@
// .h1,
// h1 {
// }
//
// .h2,
// h2 {
// }
//
// .h3,
// h3 {
// }
//
// .h4,
// h4 {
// }
//
// .h5,
// h5 {
// }
//
// .h6,
// h6 {
// }
//
// a {
// &:visited {
// }
//
// &:hover {
// }
//
// &:active {
// }
// }
//
// .small {
// }
//
// code {
//
// }
// tahoma
.sample {
margin: 25px;
font-size: 28px;
html,
body {
@include font-default;
}
.h1,
h1 {
@include font-roboto;
margin: $gutter 0 ($gutter / 2);
font-size: 40px;
font-weight: 300;
}
.h2,
h2 {
@include font-roboto;
margin: $gutter 0 ($gutter / 2);
font-size: 32px;
font-weight: 300;
}
.h3,
h3 {
@include font-roboto;
margin: $gutter 0 ($gutter / 2);
font-size: 26px;
font-weight: 400;
}
.h4,
h4 {
@include font-roboto;
margin: $gutter 0 0;
font-size: 22px;
font-weight: 700;
}
.h5,
h5 {
@include font-roboto;
margin: $gutter 0 0;
font-size: 18px;
font-weight: 700;
}
.small-heading,
.h6,
h6 {
@include font-roboto;
margin: $gutter 0 0;
font-size: 14px;
font-weight: 700;
}
p {
margin: ($gutter / 2) 0 0;
line-height: 1.4;
}
// a {
// &:visited { }
// &:hover { }
// &:active { }
// }
.small {
@include font-roboto;
line-height: 1.3;
letter-spacing: 0.3px;
font-size: 14px;
font-weight: 300;
}
code {
@include font-mono;
display: block;
margin: $gutter;
line-height: 1.35;
white-space: pre;
font-size: 18px;
}

2
site/assets/scss/main.scss
View File

@ -7,6 +7,8 @@
@import 'generic/reset';
@import 'elements/typography';
@import 'elements/nav';
@import 'elements/icons';
@import 'elements/layout';
// @import 'components/thing';

85
site/assets/scss/settings/_colors.scss
View File

@ -0,0 +1,85 @@
$color-a1: rgba(191, 189, 193, 1);
$color-a2: rgba(109, 106, 117, 1);
$color-a3: rgba(55, 50, 62, 1);
$color-a4: rgba(222, 184, 65, 1);
$color-a5: rgba(222, 158, 54, 1);
$color-b1: rgba(187, 225, 195, 1);
$color-b2: rgba(167, 205, 189, 1);
$color-b3: rgba(134, 157, 122, 1);
$color-b4: rgba(145, 120, 93, 1);
$color-b5: rgba(139, 93, 51, 1);
$color-c1: rgba(240, 58, 71, 1);
$color-c2: rgba(175, 91, 91, 1);
$color-c3: rgba(246, 244, 243, 1);
$color-c4: rgba(39, 111, 191, 1);
$color-c5: rgba(24, 48, 89, 1);
$color-d1: rgba(172, 189, 186, 1);
$color-d2: rgba(205, 221, 221, 1);
$color-d3: rgba(165, 153, 181, 1);
$color-d4: rgba(46, 47, 47, 1);
$color-d5: rgba(5, 16, 20, 1);
$color-e1: rgba(255, 200, 87, 1);
$color-e2: rgba(233, 114, 76, 1);
$color-e3: rgba(197, 40, 61, 1);
$color-e4: rgba(72, 29, 36, 1);
$color-e5: rgba(37, 95, 133, 1);
.color-samples {
> div {
display: flex;
margin: $gutter 0;
height: 100px;
> div { flex: 1 1 auto; }
}
.color-a {
:nth-child(1) { background-color: $color-a1; }
:nth-child(2) { background-color: $color-a2; }
:nth-child(3) { background-color: $color-a3; }
:nth-child(4) { background-color: $color-a4; }
:nth-child(5) { background-color: $color-a5; }
}
.color-b {
:nth-child(1) { background-color: $color-b1; }
:nth-child(2) { background-color: $color-b2; }
:nth-child(3) { background-color: $color-b3; }
:nth-child(4) { background-color: $color-b4; }
:nth-child(5) { background-color: $color-b5; }
}
.color-c {
:nth-child(1) { background-color: $color-c1; }
:nth-child(2) { background-color: $color-c2; }
:nth-child(3) { background-color: $color-c3; }
:nth-child(4) { background-color: $color-c4; }
:nth-child(5) { background-color: $color-c5; }
}
.color-d {
:nth-child(1) { background-color: $color-d1; }
:nth-child(2) { background-color: $color-d2; }
:nth-child(3) { background-color: $color-d3; }
:nth-child(4) { background-color: $color-d4; }
:nth-child(5) { background-color: $color-d5; }
}
.color-e {
:nth-child(1) { background-color: $color-e1; }
:nth-child(2) { background-color: $color-e2; }
:nth-child(3) { background-color: $color-e3; }
:nth-child(4) { background-color: $color-e4; }
:nth-child(5) { background-color: $color-e5; }
}
}

1
site/assets/scss/settings/_variables.scss
View File

@ -0,0 +1 @@
$gutter: 15px;

14
site/assets/scss/tools/_fonts.scss
View File

@ -33,16 +33,16 @@
src: url('/assets/fonts/roboto-bolditalic-webfont.woff2') format('woff2'), url('/assets/fonts/roboto-bolditalic-webfont.woff') format('woff');
}
@font-face {
font-family: 'inconsolata';
font-weight: 700;
font-style: normal;
src: url('/assets/fonts/inconsolata-bold-webfont.woff2') format('woff2'), url('/assets/fonts/inconsolata-bold-webfont.woff') format('woff');
}
@font-face {
font-family: 'inconsolata';
font-weight: 400;
font-style: normal;
src: url('/assets/fonts/inconsolata-regular-webfont.woff2') format('woff2'), url('/assets/fonts/inconsolata-regular-webfont.woff') format('woff');
}
@font-face {
font-family: 'inconsolata';
font-weight: 700;
font-style: normal;
src: url('/assets/fonts/inconsolata-bold-webfont.woff2') format('woff2'), url('/assets/fonts/inconsolata-bold-webfont.woff') format('woff');
}

20
site/assets/scss/tools/_mixins.scss
View File

@ -0,0 +1,20 @@
@mixin font-default {
letter-spacing: 0.1em;
font-family: tahoma, sans-serif;
}
@mixin font-roboto {
font-family: 'roboto', tahoma, sans-serif;
}
@mixin font-mono {
font-family: 'inconsolata', 'consolas', monospace;
}
@mixin slim-ul {
margin-right: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}

6
site/layouts/default.hbs
View File

@ -6,8 +6,10 @@
<body>
{{> analytics }}
{{> nav-main }}
{{> nav-social }}
<header>
{{> nav-main }}
{{> nav-social }}
</header>
<main>
{{> body }}

23
site/pages/about.hbs
View File

@ -1,23 +0,0 @@
<h1>Mark Moser - digital handyman</h1>
<p>
I&rsquo;m a ruby developer exploring and learning everything I can about being a better
developer. This place is where I share my findings, explorations, and other creative
outlets.
</p>
<p>
I&rsquo;m also fond of working in video post production: editing, compositing, and
motion graphics. I can either be your &ldquo;one man band&rdquo; for those smaller
productions, put together a killer team when you need even greater production value,
or be the go-to post production guy you call to join your existing team.
I have experience shooting interviews and putting together short informational
videos. I am very comfortable in the whole Adobe Production Suite of tools.
</p>
<p>
I have a high value for quality craftsmanship. I want to do great work, with people who
also do great work. I love to explore and learn about my world. I enjoy being
challenged. I take pleasure in providing creative solutions to specific needs, always
keeping the bigger picture in mind. I was raised to work hard and play hard.
</p>

50
site/pages/index.hbs
View File

@ -1,41 +1,15 @@
<h1>Looking at styling for an h1</h1>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h2>Looking at styling for an h2</h2>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h3>Looking at styling for an h3</h3>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h4>Looking at styling for an h4</h4>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h5>Looking at styling for an h5</h5>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h6>Looking at styling for an h6</h6>
<p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h1>I build web things.</h1>
<h2>Fonts</h2>
{{> sample font="roboto" }}
{{> sample font="tahoma" }}
{{> sample font="inconsolata" }}
<p>
I&rsquo;m a web developer exploring and learning everything I can about being a better
developer. This place is where I share my findings, explorations, and other creative
outlets.
</p>
<h2>Colors</h2>
<p>
I have a high value for quality craftsmanship. I want to do great work, with people who
also do great work. I love to explore and learn about my world. I enjoy being
challenged. I take pleasure in providing creative solutions to specific needs, always
keeping the bigger picture in mind. I was raised to work hard and play hard.
</p>
<h2>Misc elements</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
<ul>
<li>item 1 in unordered list</li>
<li>item 2 in unordered list</li>
<li>item 3 in unordered list</li>
<li>item 4 in unordered list</li>
<li>item 5 in unordered list</li>
</ul>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>

5
site/partials/rail.hbs → site/pages/misc.hbs
View File

@ -1,3 +1,8 @@
---
title: Misc links and such
---
<h1>{{title}}</h1>
<ul>
<li>
<a href="mailto:markamoser@gmail.com">markamoser@gmail.com</a>

47
site/pages/styleguide.hbs Normal file
View File

@ -0,0 +1,47 @@
---
title: site style guide
---
<h1>Looking at styling for an h1</h1>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h2>Looking at styling for an h2</h2>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h3>Looking at styling for an h3</h3>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h4>Looking at styling for an h4</h4>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h5>Looking at styling for an h5</h5>
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<h6>Looking at styling for an h6</h6>
<p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>
<h2>Colors</h2>
<div class="color-samples">
<div class="color-a"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-b"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-c"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-d"><div></div><div></div><div></div><div></div><div></div></div>
<div class="color-e"><div></div><div></div><div></div><div></div><div></div></div>
</div>
<h2>Misc elements</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
<ul>
<li>item 1 in unordered list</li>
<li>item 2 in unordered list</li>
<li>item 3 in unordered list</li>
<li>item 4 in unordered list</li>
<li>item 5 in unordered list</li>
</ul>

105
site/pages/video.hbs Normal file
View File

@ -0,0 +1,105 @@
---
title: Old Video Projects
videos:
demo:
file: "reel2011.mp4"
title: "2011 Demo Reel"
width: "960"
height: "480"
options:
controls: true
autoplay: false
preload: "auto"
note: "A short sampling of my after effects work. I do love to edit. (<a href=\"video/MarkMoser_reel2011.mp4\">download</a>)"
vimeo: "<iframe src=\"//player.vimeo.com/video/29118777?byline=0&amp;portrait=0&amp;autoplay=0\" width=\"720\" height=\"360\" frameborder=\"0\" webkitAllowFullScreen allowFullScreen></iframe>"
las_invent:
file: "LAS_InventYourFuture_720x404.mp4"
title: "Invent Your Future"
width: "720"
height: "404"
options:
controls: true
autoplay: false
preload: "auto"
poster: "LAS_InventYourFuture_720x404.png"
role: "Editor"
credit: "DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Art Direction: <a href=\"http://www.bonadiescreative.com\">John Bonadies</a>"
bid_web:
file: "BackInTheDay_640x360.mov"
title: "Back In the Day"
width: "640"
height: "360"
options:
controls: true
autoplay: false
preload: "auto"
poster: "BackInTheDay_640x360.png"
role: "Editor"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Musician: <a href=\"http://www.rockymaffit.com\">Rocky Maffit</a><br />
<a href=\"http://www.jhanamusic.com/artists/Rocky%20Maffit/rockymaffit.html\">Jhana Music Group</a>"
ccrawl_large:
file: "CCrawl_purple_960x540.m4v"
title: "PW Container Crawl"
width: "960"
height: "540"
options:
controls: true
autoplay: false
preload: "auto"
poster: "CCrawl_purple_960x540.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
crawl_demo_lg:
file: "CrawlDemo_960x540.mov"
title: "Crawl Breakdown"
width: "960"
height: "540"
options:
controls: true
autoplay: false
preload: "auto"
poster: "CrawlDemo_960x540.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
pw_garden_640:
file: "SecretGarden_Alternate-640.m4v"
title: "PW Garden Spot"
width: "640"
height: "360"
options:
controls: true
autoplay: false
preload: "auto"
poster: "SecretGarden_Alternate-640.png"
role: "Edit / Compositing"
credit: "Producer/Director/DP: <a href=\"http://www.chrisbrownphoto.com\">Chris Brown</a><br />
Stylist: Ron Walder <br />
Creative Director: Dave Lierman <br />
<a href=\"http://provenwinners.com/\">Proven Winners</a>"
balloon_time:
file: "BalloonTime_400x262.mov"
title: "Balloon Time!"
width: "400"
height: "262"
options:
controls: true
autoplay: false
preload: "auto"
poster: "BalloonTime_400x262.png"
role: "Prep / Shoot / Post"
---
<h1>{{title}}</h1>

7
site/partials/nav-foot.hbs
View File

@ -1,8 +1,7 @@
<nav class="nav-foot">
<ul>
<li><a href="foot-link-1">foot-link-1</a></li>
<li><a href="foot-link-2">foot-link-2</a></li>
<li><a href="foot-link-3">foot-link-3</a></li>
<li><a href="foot-link-4">foot-link-4</a></li>
<li><a href="styleguide.html">styleguide</a></li>
<li><a href="video.html">video</a></li>
<li><a href="misc.html">misc</a></li>
</ul>
</nav>

8
site/partials/nav-main.hbs
View File

@ -2,14 +2,8 @@
<ul>
<li>
<a href='/'>
home
<span>home</span>
</a>
</li>
<li>
<a href='/video'>video</a>
</li>
<li>
<a href='/contact'>contact</a>
</li>
</ul>
</nav>