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

page cleanup

Browse Source
This commit is contained in:
Mark Moser
2017-08-21 19:50:08 -05:00
committed by Mark Moser
parent a7ec08196e
commit 4ab6579576
3 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,24 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
> * { flex: 1 1 auto; } > * {
flex: 1 1 auto;
@media screen and (min-width: 425px) { margin: $gutter 0;
> * { width: 50%; }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
flex-wrap: nowrap; flex-wrap: nowrap;
> * {
margin: 0 $gutter;
}
&.fifty-reversed {
> * {
&:first-of-type { order: 2;}
&:last-of-type { order: 0;}
}
} }
} }
}

6
site/assets/scss/components/_pie.scss
View File

@ -6,16 +6,17 @@
padding: $gutter; padding: $gutter;
.key { .key {
flex: 1 1 auto;
margin-left: calc(#{$gutter} + 1em); margin-left: calc(#{$gutter} + 1em);
div { div {
position: relative; position: relative;
margin-bottom: 0.6em;
padding-left: 0.33em; padding-left: 0.33em;
line-height: 1.4em;
&::before { &::before {
position: absolute; position: absolute;
bottom: 0.2em; top: 0.1em;
left: -1em; left: -1em;
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -34,6 +35,7 @@
ul { ul {
@include slim-ul; @include slim-ul;
position: relative; position: relative;
flex: 0 0 auto;
margin: 0; margin: 0;
width: 100px; width: 100px;
height: 100px; height: 100px;

8
site/pages/index.hbs
View File

@ -3,8 +3,6 @@
img: stock/lake.png img: stock/lake.png
copy: I build web things copy: I build web things
theme: blue theme: blue
# VALUE * 360 / 100
--- ---
<section> <section>
@ -47,8 +45,8 @@
<div class="key"> <div class="key">
<div class="blue"><span>30%</span><span>Ruby</span></div> <div class="blue"><span>30%</span><span>Ruby</span></div>
<div class="orange"><span>25%</span><span>CSS</span></div> <div class="orange"><span>25%</span><span>CSS</span></div>
<div class="red"><span>10%</span><span>HTML</span></div> <div class="red"><span>10%</span><span>JavaScript</span></div>
<div class="dark-blue"><span>15%</span><span>JavaScript</span></div> <div class="dark-blue"><span>15%</span><span>HTML</span></div>
<div class="yellow"><span>20%</span><span>SQL</span></div> <div class="yellow"><span>20%</span><span>SQL</span></div>
</div> </div>
</div> </div>
@ -57,7 +55,7 @@
<section class="fifty"> <section class="fifty fifty-reversed">
<div> <div>
<h2>Back-End Proficiency's</h2> <h2>Back-End Proficiency's</h2>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>