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

layout changes

Browse Source
This commit is contained in:
Mark Moser
2017-08-22 18:56:58 -05:00
committed by Mark Moser
parent c1b5232add
commit 7117f4e0c4
5 changed files with 66 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/assets/scss/components/_fifty.scss
View File

@ -1,13 +1,14 @@
.fifty {
display: flex;
flex-wrap: wrap;
align-items: center;
> * {
flex: 1 1 auto;
margin: $gutter 0;
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 650px) {
flex-wrap: nowrap;
> * {

17
site/assets/scss/components/_hero.scss
View File

@ -4,18 +4,15 @@
align-content: center;
align-items: center;
justify-content: center;
margin: 0 0 ($gutter * 2);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 0;
height: 250px;
h1 {
flex: 1 1 auto;
background-color: rgba($blue, 0.75);
padding: $gutter;
width: auto;
text-align: center;
color: $copy-light;
}
@ -42,20 +39,10 @@
}
}
@media screen and (min-width: 426px) {
@media screen and (min-width: 900px) {
.hero {
h1 {
flex: 0 0 auto;
width: 425px;
}
}
}
@media screen and (min-width: 768px) {
.hero {
h1 {
width: calc(100% * 0.809);
max-width: 860px;
padding: $gutter calc((100% - 850px) / 2);
text-align: inherit;
}
}

66
site/assets/scss/elements/_layout.scss
View File

@ -2,70 +2,36 @@ body {
min-width: 300px;
}
header {
header,
main {
margin: 0;
padding: 0;
}
section {
margin-bottom: $gutter;
padding: $gutter;
&:nth-of-type(even) {
background-color: $light-grey;
}
}
footer {
margin: 0;
padding: 0 $gutter;
}
main {
margin: 0 $gutter;
padding: 0;
}
@media screen and (min-width: 900px) {
section {
margin: ($gutter * 2) 0;
&:nth-of-type(even) {
margin-right: -$gutter;
margin-left: -$gutter;
background-color: $light-grey;
padding: $gutter;
}
}
@media screen and (min-width: 426px) {
main {
margin: 0 auto;
width: 100%;
}
footer,
section {
padding: $gutter calc((100% - 425px) / 2);
&:nth-of-type(even) {
padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
}
}
}
@media screen and (min-width: 768px) {
footer,
main {
width: calc(100% * 0.809);
max-width: 860px;
padding: ($gutter * 2) calc((100% - 850px) / 2);
width: 850px;
}
footer {
margin: 0 auto;
padding: 0;
}
section {
margin: ($gutter * 4) 0;
padding: $gutter 0;
width: auto;
&:nth-of-type(even) {
margin-right: calc(-100% * 0.809 / 2);
margin-left: calc(-100% * 0.809 / 2);
padding: ($gutter * 2) calc(100% * 0.809 / 2);
}
padding: 0 calc((100% - 850px) / 2);
width: 850px;
}
}

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

@ -10,7 +10,6 @@ h1 {
@include font-roboto;
margin: 0 0 ($gutter / 2);
padding: 8px 0;
width: 100%;
font-size: 40px;
font-weight: 300;
}

89
site/pages/styleguide.hbs
View File

@ -6,53 +6,56 @@
theme: orange
---
<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>
<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>
<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>
<section>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>
<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>
<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>
<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>
<h2>Colors</h2>
<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a>
<div class="color-samples">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<h2>Colors</h2>
<div class="color-samples">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<h2>Code Samples</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
<h2>Code Samples</h2>
<code>
function thing1(thing2) {
var thing3 = 'some default value';
return thing2 + thing3;
}
</code>
</section>