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 { .fifty {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
> * { > * {
flex: 1 1 auto; flex: 1 1 auto;
margin: $gutter 0; margin: $gutter 0;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 650px) {
flex-wrap: nowrap; flex-wrap: nowrap;
> * { > * {

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

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

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

@ -2,70 +2,36 @@ body {
min-width: 300px; min-width: 300px;
} }
header { header,
main {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
section {
margin-bottom: $gutter;
padding: $gutter;
&:nth-of-type(even) {
background-color: $light-grey;
}
}
footer { footer {
margin: 0; margin: 0;
padding: 0 $gutter; padding: 0 $gutter;
} }
main { @media screen and (min-width: 900px) {
margin: 0 $gutter;
padding: 0;
}
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 { section {
padding: $gutter calc((100% - 425px) / 2); padding: ($gutter * 2) calc((100% - 850px) / 2);
width: 850px;
&: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;
} }
footer { footer {
margin: 0 auto; padding: 0 calc((100% - 850px) / 2);
padding: 0; width: 850px;
}
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);
}
} }
} }

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

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

47
site/pages/styleguide.hbs
View File

@ -6,32 +6,34 @@
theme: orange theme: orange
--- ---
<h1>Looking at styling for an h1</h1> <section>
<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> <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> <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> <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> <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> <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 1 in unordered list</li>
<li>item 2 in unordered list</li> <li>item 2 in unordered list</li>
<li>item 3 in unordered list</li> <li>item 3 in unordered list</li>
<li>item 4 in unordered list</li> <li>item 4 in unordered list</li>
<li>item 5 in unordered list</li> <li>item 5 in unordered list</li>
</ul> </ul>
<h4>Looking at styling for an h4</h4> <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> <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> <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> <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> <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> <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-primary" href="#cta-primary">Do a Thing!</a>
<a class="cta-secondary" href="#cta-secondary">Do another thing</a> <a class="cta-secondary" href="#cta-secondary">Do another thing</a>
<h2>Colors</h2> <h2>Colors</h2>
<div class="color-samples"> <div class="color-samples">
<div> <div>
<div></div> <div></div>
<div></div> <div></div>
@ -45,14 +47,15 @@
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div> </div>
<h2>Code Samples</h2> <h2>Code Samples</h2>
<code> <code>
function thing1(thing2) { function thing1(thing2) {
var thing3 = 'some default value'; var thing3 = 'some default value';
return thing2 + thing3; return thing2 + thing3;
} }
</code> </code>
</section>