diff options
author | Joseph Hutchinson <hutch7995@gmail.com> | 2018-04-27 23:13:14 +0300 |
---|---|---|
committer | Joseph Hutchinson <hutch7995@gmail.com> | 2018-04-27 23:13:14 +0300 |
commit | a37f605d31c32ef227a6699656d4d8acf0c9d37e (patch) | |
tree | 28efef1f00aabe7b7990e5c8dc4dd1a00fce0b46 | |
parent | dbb82f69041dcf6cfbe0e778e272a5fa04960c7d (diff) |
category menu
-rw-r--r-- | archetypes/default.md | 7 | ||||
-rw-r--r-- | archetypes/posts.md | 2 | ||||
-rw-r--r-- | layouts/_default/li.html | 5 | ||||
-rw-r--r-- | layouts/_default/list.html | 5 | ||||
-rw-r--r-- | layouts/_default/single-li.html | 5 | ||||
-rw-r--r-- | layouts/_default/single.html | 2 | ||||
-rw-r--r-- | layouts/partials/nav-bar.html | 14 | ||||
-rw-r--r-- | static/css/style.css | 106 |
8 files changed, 116 insertions, 30 deletions
diff --git a/archetypes/default.md b/archetypes/default.md index ac36e06..14cfada 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,2 +1,5 @@ -+++ -+++ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: {{ .Date }} +description: "" +--- diff --git a/archetypes/posts.md b/archetypes/posts.md index ea07ee8..83c5d90 100644 --- a/archetypes/posts.md +++ b/archetypes/posts.md @@ -1,7 +1,7 @@ --- title: "{{ replace .TranslationBaseName "-" " " | title }}" date: {{ .Date }} -description: "" +description: "" categories: [] featuredImage: "" draft: true diff --git a/layouts/_default/li.html b/layouts/_default/li.html index 1a0e1b0..36492e0 100644 --- a/layouts/_default/li.html +++ b/layouts/_default/li.html @@ -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>
\ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e2e1017..bee1cce 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -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" }} diff --git a/layouts/_default/single-li.html b/layouts/_default/single-li.html index 7288dda..a8c9b44 100644 --- a/layouts/_default/single-li.html +++ b/layouts/_default/single-li.html @@ -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>
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a170b81..8eff257 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -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" }} diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html index 38a8012..b95004a 100644 --- a/layouts/partials/nav-bar.html +++ b/layouts/partials/nav-bar.html @@ -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>
\ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index cd3e639..a1ff2ca 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; } |