<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-custom>
amp-sidebar {color:{{ color }};font-family:sans-serif;line-height:20px;}
amp-sidebar a{color:{{ link }};text-decoration:none;line-height:16px;}
amp-sidebar a:hover{color:{{ hover }}}
amp-sidebar {
background-color:{{ bg }};
width: 250px;
padding-right: 10px;
}
.amp-sidebar-image {
line-height: 100px;
vertical-align:middle;
}
.amp-close-image {
top: 15px;
left: 225px;
cursor: pointer;
}
li {
margin-bottom: 20px;
list-style: none;
}
button {
margin-left: 20px;
}
.toggle {
background-color: {{ hambg }};
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: {{ hamtext }};
border:1px solid #000;
background-image: url(images/button_bg.jpg);
}
.toggle:hover {
color:{{ hamtexthover }}
background-color: {{ hamhoverbg }};
border:1px solid #000000;
background-image: url(images/button_bg_over.jpg);
}
</style>
<!-- begin Side Nav -->
<amp-sidebar id='sidebar'
layout="nodisplay"
side="{{ side }}">
<amp-img class='amp-close-image'
src="http://mooseloose.com/images/moose.png"
width="20"
height="20"
alt="close sidebar"
on="tap:sidebar.close"
role="button"
tabindex="0"></amp-img>
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/">ABOUT</a></li>
<li>
<amp-fit-text width="220"
height="14"
layout="responsive"
max-font-size="24">
<li><a href="/">MISSION</a></li>
</amp-fit-text>
</li>
<li>
<amp-fit-text width="220"
height="20"
layout="responsive"
max-font-size="24">
Donec mattis justo at AMP dolor sagittis varius iaculis ligula pretium. Morbi ornare Moose Loose purus sit amet AMP augue iaculis a volutpat mauris lobortis.
</amp-fit-text>
</li>
<li>
<amp-img class='amp-sidebar-image'
src="http://mooseloose.com/images/moose.png"
width="150"
height="150"
alt="an image">
</amp-img>
</li>
<li><a href="/">PORTFOLIO</a></li>
<li><a href="/">CONTACT</a></li>
</ul>
</amp-sidebar>
<!-- End Side Nav -->
<button class="toggle" on='tap:sidebar.toggle'>MENU</button>
|