modify demos menu styles

This commit is contained in:
Leon Chen
2016-10-07 12:14:37 -04:00
parent acd5e93c96
commit 0c9db5e74f
2 changed files with 47 additions and 11 deletions
+21 -4
View File
@@ -17,6 +17,7 @@
li {
color: $color-2;
border-left: 2px solid white;
margin-bottom: 3px;
}
li.active {
@@ -25,7 +26,9 @@
a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
&:hover {
color: $color-1;
@@ -35,14 +38,19 @@
fill: $color-1;
}
}
}
.github-logo {
fill: $color-2;
margin: 3px 8px 3px 0;
span.menu-item-heading {
margin-right: 10px;
}
span.menu-item-subheading {
color: #999999;
font-size: 0.8em;
}
}
}
.menu-list.github,
.menu-list.contact {
li {
padding: 5px 10px;
@@ -55,9 +63,18 @@
background-color: none;
transition: color 0.2s ease-in;
.github-logo {
fill: $color-1;
transition: fill 0.2s ease-in;
}
&:hover {
color: $color-1-light;
background: none;
.github-logo {
fill: $color-1-light;
}
}
}
}
+26 -7
View File
@@ -4,19 +4,38 @@
Demos
</p>
<ul class="menu-list">
<li v-bind:class="{ 'active': currentView === 'home' }"><a href="#/">Home</a></li>
<li v-bind:class="{ 'active': currentView === 'mnist-cnn' }"><a href="#/mnist-cnn">Basic Convnet - MNIST</a></li>
<li v-bind:class="{ 'active': currentView === 'mnist-vae' }"><a href="#/mnist-vae">Convolutional VAE - MNIST</a></li>
<li v-bind:class="{ 'active': currentView === 'resnet50' }"><a href="#/resnet50">Residual Network (50-layer) - ImageNet</a></li>
<li v-bind:class="{ 'active': currentView === 'home' }">
<a href="#/">Home</a>
</li>
<li v-bind:class="{ 'active': currentView === 'mnist-cnn' }">
<a href="#/mnist-cnn">
<span class="menu-item-heading">Basic Convnet</span>
<span class="menu-item-subheading">MNIST</span>
</a>
</li>
<li v-bind:class="{ 'active': currentView === 'mnist-vae' }">
<a href="#/mnist-vae">
<span class="menu-item-heading">Convolutional VAE</span>
<span class="menu-item-subheading">MNIST</span>
</a>
</li>
<li v-bind:class="{ 'active': currentView === 'resnet50' }">
<a href="#/resnet50">
<span class="menu-item-heading">Residual Network (50-layer)</span>
<span class="menu-item-subheading">ImageNet</span>
</a>
</li>
</ul>
<p class="menu-label">
Links
</p>
<ul class="menu-list">
<ul class="menu-list github">
<li>
<a href="https://github.com/transcranial/keras-js" target="_blank">
<svg height="24" width="24" class="github-logo" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
GitHub repo
<span class="menu-item-heading">
<svg height="24" width="24" class="github-logo" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
GitHub repo
</span>
</a>
</li>
</ul>