heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

category menu

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-27 16:13:14 -04:00
parent dbb82f6904
commit a37f605d31
8 changed files with 116 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
archetypes/default.md
View File

@@ -1,2 +1,5 @@
+++
+++
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
description: ""
---

2
archetypes/posts.md
View File

@@ -1,7 +1,7 @@
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
description: ""
description: ""
categories: []
featuredImage: ""
draft: true

5
layouts/_default/li.html
View File

@@ -9,9 +9,8 @@
<h2 class="card-title">{{ .Title }}</h2>
<p class="card-text">{{ .Description }}</p>
<div class="card-subtext muted-text">
<p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p style="margin: 0 1em 0 0;">|</p>
<p style="margin: 0 1em 0 0;">#{{ .Params.categories }}</p>
<p>Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p>{{ range .Params.categories }}#{{ . }} {{ end }}</p>
</div>
</article>
</a>

5
layouts/_default/list.html
View File

@@ -2,10 +2,11 @@
<html lang="{{ .Site.LanguageCode }}" dir="ltr">
{{ partial "head.html" . }}
<body class="list-body">
{{ partial "nav-bar.html" . }}
<main class="card-container side-gutter">
<header class="list-header">
<p class="list-header-subtext">Code It, Break It, Quick, Rewrite It</p>
<h1 class="list-header-title">Technologic</h1>
<p class="list-header-subtext">{{ .Description }}</p>
<h1 class="list-header-title">{{ .Title }}</h1>
</header>
{{ range .Paginator.Pages }}
{{ .Render "li" }}

5
layouts/_default/single-li.html
View File

@@ -10,9 +10,8 @@
<h2 class="card-title">{{ .Title }}</h2>
<p class="card-text">{{ .Description }}</p>
<div class="card-subtext muted-text">
<p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p style="margin: 0 1em 0 0;">|</p>
<p style="margin: 0 1em 0 0;">#{{ .Params.categories }}</p>
<p>Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p>{{ range .Params.categories }}#{{ . }} {{ end }}</p>
</div>
</article>
</a>

2
layouts/_default/single.html
View File

@@ -6,7 +6,7 @@
<main class="content side-padding">
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ .Title }}</h1>
<h1 class="post-title">{{ .Title }}</h1>
<p class="post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
</header>
{{ if isset .Params "featuredimage" }}

14
layouts/partials/nav-bar.html
View File

@@ -1,3 +1,13 @@
<nav class="nav-bar">
<h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1>
<nav class="nav-bar side-padding">
<h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1>
<div class="hamburger-menu">
<input type="checkbox" />
<span></span>
<span></span>
<ul class="hamburger-menu-view">
{{ range $key, $value := .Site.Taxonomies.categories }}
<li><a href="{{ $.Site.BaseURL }}categories/{{ $key | urlize }}">{{ $key | humanize }}</a></li>
{{ end }}
</ul>
</div>
</nav>

106
static/css/style.css
View File

@@ -19,8 +19,12 @@ strong {
font-weight: normal
}
.nav-bar {
max-width: 48rem;
width: 100%;
padding: 0.7em 0;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-header {
margin: 0;
@@ -28,6 +32,70 @@ strong {
.nav-text {
text-decoration: none;
}
.hamburger-menu {
display: block;
position: relative;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.hamburger-menu input {
display: block;
width: 33px;
height: 33px;
position: absolute;
top: -9px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
.hamburger-menu span {
display: block;
width: 33px;
height: 4px;
position: relative;
background: #3A3B3C;
border-radius: 3px;
z-index: 1;
transform-origin: center;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
.hamburger-menu span:first-of-type {
margin-bottom: 5px;
}
.hamburger-menu input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(3.2px , 3.2px);
}
.hamburger-menu input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(3.2px , -3.2px);
}
.hamburger-menu input ~ ul {
display: none;
text-align: center;
padding: 3em 0 0 0;
transition: all 1s cubic-bezier(0.77,0.2,0.05,1.0);
}
.hamburger-menu > ul > li > a {
text-decoration: none;
font-size: 2em;
line-height: 1.7;
color: white;
}
.hamburger-menu input:checked ~ ul {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.post {
margin: 0 0 1em 0;
line-height: 1.5;
@@ -62,13 +130,13 @@ strong {
padding: 2em 0;
margin-bottom: 2em;
width: 100%;
max-width: 46rem;
max-width: 48rem;
border-radius: 0.3rem;
transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
box-shadow: 0 0.7rem 1.4rem 0 rgba(0,0,0,0.25), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.22);
}
.list-header {
margin: 8em 0 6em 0;
margin: 6em 0;
text-align: center;
}
.list-header-title {
@@ -95,7 +163,7 @@ strong {
border-radius: 0.3rem;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);
box-shadow: 0 0.4rem 0.8rem 0 rgba(0,0,0,0.16), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.19), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23);
}
.home-card {
padding: 0.8em;
@@ -103,7 +171,7 @@ strong {
font-weight: bold;
text-align: center;
color: white;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../img/city.jpg) center center no-repeat;
background: url(../img/grey-cloud.jpg) center center;
object-fit: cover;
}
.blog-card {
@@ -151,12 +219,21 @@ strong {
justify-content: flex-start;
font-size: 0.8em;
}
.card-subtext > p {
margin: 0;
}
.card-subtext > p + p {
margin-left: 1em;
padding-left: 1em;
word-spacing: 0.5em;
border-left: thin solid #7A7B7C;
}
.end-nav {
width: 100%;
max-width: 46rem;
max-width: 47rem;
}
.pagination-nav {
margin: 3em 0 2em 0;
margin: 2em 0;
display: flex;
align-items: center;
justify-content: space-between;
@@ -166,10 +243,13 @@ strong {
.button {
padding: 0.5em 0.6em;
background-color: #FFF;
text-decoration: none;
border-radius: 0.3rem;
box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.12), 0 0.04rem 0.08rem rgba(0,0,0,0.24);
transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1);
box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.16), 0 0.15rem 0.3rem rgba(0,0,0,0.23);
}
.button:hover {
box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24);
transform: scale(0.97);
}
.button:active {
@@ -270,9 +350,6 @@ footer {
body {
font-size: 1.125rem;
}
.list-header {
margin: 8em 0 6em 0;
}
.list-header-title {
font-weight: normal;
font-size: 4.2em;
@@ -316,9 +393,6 @@ footer {
.post-title {
font-size: 2.5em;
}
.pagination-nav {
margin: 4em 0 2em 0;
}
.button {
border-radius: 0.2rem;
}