Add sidebar

parent 2bcefc03
......@@ -4,25 +4,29 @@
{{ partial "header" . }}
{{ partial "cpt" . }}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<div class="post-feed">
{{ partial "post-list" . }}
</div>
<main class="site-main outer" role="main">
<div id="site-main" class="inner">
<div id="sidebar">
{{ partial "sidebar" . }}
</div>
<div id="main-content" class="post-feed">
{{ partial "post-list" . }}
</div>
<nav class="pagination" role="navigation">
{{if .Paginator.HasPrev}}
<a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
{{end}}
<span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
{{if .Paginator.HasNext}}
<a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
{{end}}
</nav>
</div>
<nav id="pagination" class="pagination" role="navigation">
{{if .Paginator.HasPrev}}
<a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
{{end}}
<span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
{{if .Paginator.HasNext}}
<a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
{{end}}
</nav>
</div>
</main>
{{ partial "footer" . }}
</div>{{ partial "js" . }}
{{ partial "cptjs" . }}
{{ partial "sidebarjs" . }}
</body></html>
<div class="side-content">
<h3>Tags:</h3>
{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
{{ $currentTagCount := len $taxonomy.Pages }}
<div class="sidelink"><a class="shadow" href="/tags/{{ $name | urlize }}">{{ $name }} ({{$currentTagCount}})</a></div>
{{ end }}
<h3>Categories:</h3>
{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
{{ $currentCatCount := len $taxonomy.Pages }}
<div class="sidelink"><a class="shadow" href="/tags/{{ $name | urlize }}">{{ $name }} ({{$currentCatCount}})</a></div>
{{ end }}
</div>
<div id="side-button" onClick="toggleSidebar();">
<div class="bar-button"></div>
</div>
<script language="javascript">
function toggleSidebar() {
var widthpad = parseInt($("#sidebar").css("padding-left"))+parseInt($("#sidebar").css("padding-right"));
if(parseInt($("#sidebar").css("width"))==widthpad) {
$("#sidebar").css("width", "100%");
} else {
$("#sidebar").css("width", "0px");
}
}
</script>
......@@ -14,6 +14,128 @@
color: red;
}
#sidebar {
min-width: 250px;
z-index: 1000;
margin-top: -70px;
margin-left: 20px;
padding-bottom: 40px;
text-align: center;
}
#side-button {
display: none;
}
.side-content {
padding-top: 10px;
height: 100%;
background-color: white;
border-radius: 5px;
background-size: cover;
box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
background: #fff 50%;
transition: all .5s ease;
}
.sidelink {
padding: 1px;
border: 1px solid grey;
margin-top: 3px;
margin-left: 10px;
margin-right:10px;
border-radius: 7px;
background-size: cover;
background-color: white;
box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
background: #fff 80%;
}
.sidelink a {
text-decoration: none;
color: grey;
}
.sidelink:hover {
box-shadow: 0px 0px 0px rgba(39,44,49,.06), 0px 0px 0px rgba(39,44,49,.03);
background: #fff 0%;
background-color: #e8e8e8;
}
.inner {
max-width: 1400px;
}
@media (min-width: 1005px) {
#sidebar {
grid-area: sidebar;
}
#site-main {
display: grid;
grid-template-areas:
"content sidebar"
"navigation navigation";
}
#main-content {
grid-area: content;
}
#pagination {
grid-area: navigation;
}
}
@media (max-width: 1005px) {
#side-button {
position: fixed;
top: 10px;
right: 10px;
display: block;
z-index: 2000;
border: 1px solid grey;
padding: 2px;
background-color: white;
border-radius: 5px;
}
.bar-button {
border-bottom: 18px double grey;
border-top: 6px solid grey;
content:"";
height: 30px;
width: 40px;
}
#sidebar {
position: fixed;
display: block;
margin-left: 5px;
bottom: -33px;
top: 5px;
right: 0px;
z-index: 1000;
overflow-x: hidden;
margin-top: 0px;
width: 0;
min-width: 0;
transition: .5s;
padding-left: 5px;
padding-right: 5px;
}
}
@media (max-width: 1005px) and (min-width: 901px) {
.post-feed {
margin-top: -40px !important;
}
}
@media (max-width: 900px) {
#capetown {
......@@ -35,5 +157,10 @@
.cpthead {
float: left;
}
}
@media (max-width: 650px){
.post-feed {
padding-top: 10vw;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment