Update directory structure to include dev and design resources

This commit is contained in:
Ryan Watters 2017-02-09 12:58:02 -06:00
parent f26344aeb9
commit 87d4ad941c
14 changed files with 75 additions and 105 deletions

Binary file not shown.

View File

@ -8,10 +8,13 @@
<li class="homepage-card">
<a href="{{ $values.url }}">
<section>
<div class="homepage-card-image-wrapper">
<img src="/images/{{ $values.url }}.svg" alt="">
</div>
<div class="homepage-card-copy">
<header>
<h2>{{ $values.title }}</h2>
</header>
<div class="homepage-card-copy">
<p>{{ $values.desc | markdownify}}</p>
</div>
</section>

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M255.939,511.938C114.811,511.938 0,397.127 0,255.999C0,114.871 114.811,0.061 255.939,0.061C397.067,0.061 511.878,114.872 511.878,256C511.878,397.128 397.066,511.938 255.939,511.938Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<g transform="matrix(0.971234,0,0,1,3.04003,0)">
<path d="M136.506,383.997L122.376,383.997C113.154,383.997 105.681,376.524 105.681,367.302C105.681,358.08 113.154,350.607 122.376,350.607L136.506,350.607C159.756,350.607 179.788,334.819 185.212,312.211L227.418,136.345C236.461,98.666 269.841,72.352 308.591,72.352L322.721,72.352C331.943,72.352 339.416,79.825 339.416,89.047C339.416,98.269 331.943,105.742 322.721,105.742L308.591,105.742C285.341,105.742 265.309,121.53 259.885,144.138L217.679,320.004C208.635,357.682 175.256,383.997 136.506,383.997Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.644932,0,0,0.971786,87.792,130.707)">
<path d="M129.467,105.742L105.681,105.742C96.459,105.742 90.6,98.269 90.6,89.047C90.6,79.825 96.459,72.352 105.681,72.352L322.721,72.352C331.943,72.352 339.416,79.825 339.416,89.047C339.416,98.269 331.943,105.742 322.721,105.742L308.591,105.742C285.341,105.742 209.181,105.742 209.181,105.742C173.681,105.742 168.217,105.742 129.467,105.742Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g>
<path d="M345.654,288.717C339.133,282.196 328.567,282.196 322.046,288.717L300.459,310.304L278.873,288.717C272.352,282.196 261.786,282.196 255.265,288.717C248.744,295.233 248.744,305.808 255.265,312.325L276.852,333.912L255.266,355.498C248.745,362.014 248.745,372.59 255.266,379.106C258.527,382.367 262.799,383.998 267.07,383.998C271.341,383.998 275.614,382.367 278.874,379.106L300.461,357.519L322.048,379.106C325.309,382.367 329.581,383.998 333.852,383.998C338.123,383.998 342.396,382.367 345.656,379.106C352.177,372.59 352.177,362.014 345.656,355.498L324.069,333.911L345.656,312.324C352.176,305.808 352.176,295.232 345.654,288.717Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -56,7 +56,7 @@ $code-copy-button-color:#ffffff;
$code-copy-button-text-color:$base-font-color;
//Sidebar
$sidebar-width: 280px;
$site-navigation-width: 280px;
$content-max-width: 35em;
//Header

View File

@ -1,77 +0,0 @@
// .navigation-toggle-wrapper {
// width: 60px;
// height: 60px;
// /*border:1px solid red;*/
// position: fixed;
// top: $site-header-height;
// left: 0px;
// z-index: 20;
// h4.menu {
// display: inline-block;
// position: absolute;
// bottom: -1em;
// left: .8em;
// color: $hugo-blue;
// display: none;
// }
// @include MQ(L) {
// display: none;
// }
// }
// .navigation-toggle-wrapper.navigation-open .middle {
// width: 40px;
// height: 40px;
// top: 10%;
// border-radius: 50%;
// background-color: $hugo-pink;
// border-color: $hugo-pink;
// opacity: 0.3;
// }
// .navigation-toggle-wrapper.navigation-open .top {
// -webkit-transform: rotate(45deg);
// top: 40%;
// border-radius: 5px;
// background-color: $hugo-pink;
// border-color: $hugo-pink;
// }
// .navigation-toggle-wrapper.navigation-open .bottom {
// -webkit-transform: rotate(-45deg);
// top: 40%;
// border-radius: 5px;
// background-color: $hugo-pink;
// border-color: $hugo-pink;
// }
// .bar {
// width: 40px;
// height: 2px;
// border: 2px solid $hugo-blue;
// background-color: $hugo-blue;
// position: absolute;
// border-radius: 10px;
// &.navigation-open {
// background-color: $hugo-pink;
// border: 2px solid $hugo-pink;
// }
// }
// .top {
// left: 15%;
// top: 20%;
// -webkit-transition: all 0.5s;
// }
// .middle {
// left: 15%;
// top: 40%;
// -webkit-transition: all 0.5s;
// }
// .bottom {
// left: 15%;
// top: 60%;
// -webkit-transition: all 0.5s;
// }

View File

@ -4,11 +4,11 @@
transition: all .3s ease-in-out;
opacity: 1;
@include MQ(L) {
margin-left: $sidebar-width;
margin-left: $site-navigation-width;
}
&.navigation-open {
transition: all .3s ease-in-out;
transform:translateX(#{$sidebar-width});
transform:translateX(#{$site-navigation-width});
opacity: .4;
@include MQ(L) {
opacity: 1;

View File

@ -20,8 +20,8 @@
color:$hugo-pink;
}
@include MQ(L) {
width:calc(100% - #{$sidebar-width});
margin-left: $sidebar-width;
width:calc(100% - #{$site-navigation-width});
margin-left: $site-navigation-width;
}
}

View File

@ -13,7 +13,7 @@
left: 0px;
z-index: 10;
@include card(1);
@include MQ(M) {
@include MQ(L) {
justify-content: space-between;
}
.hugo-meta {

View File

@ -3,11 +3,11 @@
position: fixed;
left: 0px;
top: 0px;
width: $sidebar-width;
width: $site-navigation-width;
bottom: 0px;
overflow-y: scroll;
background-color: darken(#ffffff, 1%);
transform:translateX(-#{$sidebar-width});
transform:translateX(-#{$site-navigation-width});
padding: 1em;
z-index: 9;
&.navigation-open {
@ -78,11 +78,11 @@
}
.navigation-toggle-wrapper {
width: 60px;
height: 60px;
width: 50px;
height: 50px;
/*border:1px solid red;*/
position: fixed;
top: $site-header-height;
top: 2px;
left: 0px;
z-index: 20;
h4.menu {
@ -98,26 +98,26 @@
}
}
.navigation-toggle-wrapper.navigation-open .middle {
width: 40px;
height: 40px;
top: 10%;
border-radius: 50%;
background-color: $hugo-pink;
border-color: $hugo-pink;
opacity: 0.3;
}
.navigation-toggle-wrapper.navigation-open .top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 40%;
border-radius: 5px;
background-color: $hugo-pink;
border-color: $hugo-pink;
}
.navigation-toggle-wrapper.navigation-open .middle {
width: 40px;
height: 40px;
top: 4%;
border-radius: 50%;
background-color: $hugo-pink;
border-color: $hugo-pink;
opacity: 0.3;
}
.navigation-toggle-wrapper.navigation-open .bottom {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 40%;
border-radius: 5px;
background-color: $hugo-pink;
@ -140,17 +140,17 @@
.top {
left: 15%;
top: 20%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.middle {
left: 15%;
top: 40%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.bottom {
left: 15%;
top: 60%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

View File

@ -51,6 +51,22 @@ main#homepage {
flex: 1 0 #{860px * .9 * .31};
max-width: 860px * .9 * .31;
margin-left: .2em;
}
section {
display:flex;
flex-direction:row;
align-items:center;
}
.homepage-card-image-wrapper {
display:block;
margin-left:auto;
margin-right:auto;
max-width:60px;
min-width:60px;
margin-right:1em;
}
.homepage-card-copy {
}
h2 {
font-size: 1em;

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M255.939,511.938C114.811,511.938 0,397.127 0,255.999C0,114.871 114.811,0.061 255.939,0.061C397.067,0.061 511.878,114.872 511.878,256C511.878,397.128 397.066,511.938 255.939,511.938Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<g transform="matrix(0.971234,0,0,1,3.04003,0)">
<path d="M136.506,383.997L122.376,383.997C113.154,383.997 105.681,376.524 105.681,367.302C105.681,358.08 113.154,350.607 122.376,350.607L136.506,350.607C159.756,350.607 179.788,334.819 185.212,312.211L227.418,136.345C236.461,98.666 269.841,72.352 308.591,72.352L322.721,72.352C331.943,72.352 339.416,79.825 339.416,89.047C339.416,98.269 331.943,105.742 322.721,105.742L308.591,105.742C285.341,105.742 265.309,121.53 259.885,144.138L217.679,320.004C208.635,357.682 175.256,383.997 136.506,383.997Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.644932,0,0,0.971786,87.792,130.707)">
<path d="M129.467,105.742L105.681,105.742C96.459,105.742 90.6,98.269 90.6,89.047C90.6,79.825 96.459,72.352 105.681,72.352L322.721,72.352C331.943,72.352 339.416,79.825 339.416,89.047C339.416,98.269 331.943,105.742 322.721,105.742L308.591,105.742C285.341,105.742 209.181,105.742 209.181,105.742C173.681,105.742 168.217,105.742 129.467,105.742Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g>
<path d="M345.654,288.717C339.133,282.196 328.567,282.196 322.046,288.717L300.459,310.304L278.873,288.717C272.352,282.196 261.786,282.196 255.265,288.717C248.744,295.233 248.744,305.808 255.265,312.325L276.852,333.912L255.266,355.498C248.745,362.014 248.745,372.59 255.266,379.106C258.527,382.367 262.799,383.998 267.07,383.998C271.341,383.998 275.614,382.367 278.874,379.106L300.461,357.519L322.048,379.106C325.309,382.367 329.581,383.998 333.852,383.998C338.123,383.998 342.396,382.367 345.656,379.106C352.177,372.59 352.177,362.014 345.656,355.498L324.069,333.911L345.656,312.324C352.176,305.808 352.176,295.232 345.654,288.717Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB