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;
}