From 1f9e6368c912514ddba43f3bc805f8a620fb7100 Mon Sep 17 00:00:00 2001 From: koirand Date: Sat, 23 Mar 2019 16:18:03 +0900 Subject: [PATCH] Layout change #6 --- layouts/404.html | 22 +++--- layouts/_default/baseof.html | 13 ++-- layouts/_default/list.html | 45 ++++++------ layouts/_default/single.html | 17 ++--- layouts/index.html | 52 ++++++++------ layouts/partials/footer.html | 10 +-- layouts/partials/head.html | 74 +++++++++---------- layouts/partials/header.html | 13 ++-- static/css/style.css | 136 ++++++++++++++++++++--------------- static/js/search.js | 10 +-- 10 files changed, 210 insertions(+), 182 deletions(-) diff --git a/layouts/404.html b/layouts/404.html index 8f9d5d6..ecaf7d0 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,14 +1,14 @@ - {{ partial "head.html" . }} - - {{ partial "header.html" . }} -
-
-

404 page not found.

-

Go Home

-
-
- {{ partial "footer.html" . }} - + {{ partial "head.html" . }} + + {{ partial "header.html" . }} +
+
+

404 page not found.

+

Go Home

+
+
+ {{ partial "footer.html" . }} + diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 53a3b4e..0ab5755 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,12 +1,7 @@ - {{ partial "head.html" . }} - - {{ partial "header.html" . }} -
- {{ block "main" . }}{{ end }} -
- {{ partial "footer.html" . }} - + {{ partial "head.html" . }} + + {{ block "main" . }}{{ end }} + - diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 3394cf1..e6c17b9 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,22 +1,27 @@ {{ define "main"}} -
-
- - -
-
- {{ range $index, $value := .Pages.GroupByDate .Site.Params.listPageDateFormat }} - {{ if (ne $index 0) }} -
- {{ end }} -

{{ .Key }}

- {{ range .Pages }} -

{{ .Title }}

- {{ end }} - {{ end }} -
- - - - + {{ partial "header.html" . }} + + + +
+ +
+ {{ range $index, $value := .Pages.GroupByDate .Site.Params.listPageDateFormat }} + {{ if (ne $index 0) }} +
+ {{ end }} +

{{ .Key }}

+ {{ range .Pages }} +

{{ .Title }}

+ {{ end }} + {{ end }} +
+ {{ partial "footer.html" . }} + + + + {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 499c41b..5b3b513 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,10 +1,11 @@ {{ define "main"}} -
-

{{ .Title }}

-

{{ .Date.Format .Site.Params.singlePageDateFormat }}

-
- {{ .Content }} -
-
+

{{ .Title }}

+ {{ partial "header.html" . }} + +

{{ .Date.Format .Site.Params.singlePageDateFormat }}

+ +
+ {{ .Content }} +
+ {{ partial "footer.html" . }} {{ end }} - diff --git a/layouts/index.html b/layouts/index.html index a53c488..3fefac0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,26 +1,32 @@ - {{- partial "head.html" . -}} - -
-
-
- - -
-

{{ .Site.Params.Author }}

-

- {{ .Site.Params.discription }} -

- -
-
- {{- partial "footer.html" . -}} - + {{- partial "head.html" . -}} + +
+
+
+ +
+ avatar + avatar-border +
+ +

{{ .Site.Params.Author }}

+
+ +

+ {{ .Site.Params.discription }} +

+ + +
+
+ {{- partial "footer.html" . -}} + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index fa176f5..a35c5a4 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,9 +1,9 @@ {{- range .Site.Params.custom_js -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 21bf1bb..32fa0f8 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,45 +1,45 @@ - - {{ if eq .Title .Site.Title }} - {{ .Site.Title }} - {{ else }} - {{ .Title }} - {{ .Site.Title }} - {{ end }} - - - - - - + + {{ if eq .Title .Site.Title }} + {{ .Site.Title }} + {{ else }} + {{ .Title }} - {{ .Site.Title }} + {{ end }} + + + + + + - - - - + + + + - - {{ range .Site.Params.custom_css }} - - {{ end }} + + {{ range .Site.Params.custom_css }} + + {{ end }} - {{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates */}} - {{- template "_internal/opengraph.html" . -}} - {{- template "_internal/google_news.html" . -}} - {{- template "_internal/schema.html" . -}} - {{- template "_internal/twitter_cards.html" . -}} + {{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates */}} + {{- template "_internal/opengraph.html" . -}} + {{- template "_internal/google_news.html" . -}} + {{- template "_internal/schema.html" . -}} + {{- template "_internal/twitter_cards.html" . -}} - - {{ `` | safeHTML }} + + {{ `` | safeHTML }} - {{ `` | safeHTML }} + {{ `` | safeHTML }} - - {{- if and (not .Site.IsServer) .Site.GoogleAnalytics -}} - {{ template "_internal/google_analytics_async.html" . }} - {{- end -}} + + {{- if and (not .Site.IsServer) .Site.GoogleAnalytics -}} + {{ template "_internal/google_analytics_async.html" . }} + {{- end -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5594d64..1c5c5cc 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,6 +1,9 @@
-
- - -
-
\ No newline at end of file + +
+ + +
+ +

{{ .Site.Params.Author }}

+ diff --git a/static/css/style.css b/static/css/style.css index 8401c4e..204a209 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,5 +1,9 @@ +/* General */ body { + min-height:100vh; margin: 0; + padding: 20px; + box-sizing:border-box; background-color: #EFEFEF; color: #707070; text-align: center; @@ -7,20 +11,6 @@ body { line-height: 1.5; } -header { - padding: 30px 0; -} - -footer { - font-size: 12px; -} - -hr.separator { - width: 10px; - margin: 30px auto; - border: solid 1px #C9C9C9; -} - a:link { color: #707070; } @@ -37,19 +27,6 @@ a:active { color: #707070; } -div.profile { - min-height: calc(100vh - 42px); - display: flex; - justify-content: center; - align-items: center; -} - -div.profile-body { - width: 60vw; - max-width: 400px; - min-width: 300px; -} - .author { color: #C39F59; } @@ -58,12 +35,13 @@ div.profile-body { color: #869D38; } -div.avatar { +/* Header */ +header .avatar { position: relative; height: 100px; } -div.avatar img { +header .avatar img { position: absolute; width: 100px; margin: 0 auto; @@ -71,25 +49,44 @@ div.avatar img { right: 0; } -div.avatar img.avatar-mask { +header .avatarMask { clip-path: circle(48px at center); -webkit-clip-path: circle(48px at center); } -div.main { - display: flex; - justify-content: center; - min-height: calc(100vh - 202px); - min-width: 300px; - margin: 0 10px; +header a.author:link { + color: #C39F59; } -div.markdown-body { - width: 90vw; - max-width: 800px; +header a.author:visited { + color: #C39F59; +} + +header a.author:hover { + color: #C39F59; +} + +header a.author:active { + color: #C39F59; +} + +/* Footer */ +footer { + font-size: 12px; + box-sizing:border-box; +} + +/* Top page */ +#profileContainer { + min-height: calc(100vh - 100px); + display: flex; + justify-content: center; + align-items: center; +} + +#profile { + max-width: 600px; min-width: 300px; - margin: 40px auto; - text-align: left; } nav ul { @@ -101,14 +98,15 @@ nav ul { list-style: none; } -div.searchBoxContainer { +/* Contents List */ +#searchBox { position: relative; width: 300px; height: 30px; - margin: 10px auto 50px auto; + margin: 20px auto; } -input.searchBox { +#searchBox #searchBoxInput { position: absolute; width: 100%; padding: 0 35px 0 15px; @@ -125,17 +123,25 @@ input.searchBox { box-sizing: border-box; } -input.searchBox::placeholder { +#searchBox #searchBoxInput::placeholder { color: #c9c9c9; } -div.searchResults { +#searchBox #searchBoxIcon { + position: absolute; + height: 20px; + width: 20px; + top: 5px; + right: 10px; +} + +#searchResults { display: none; position: absolute; max-width: 600px; min-width: 300px; margin: 0 auto; - top: 210px; + top: 240px; left: 0; right: 0; padding: 5px; @@ -146,27 +152,39 @@ div.searchResults { box-sizing: border-box; } -div.searchResultPage { +#searchResults .searchResultPage { padding: 20px } -div.searchResultTitle { +#searchResults .searchResultTitle { font-weight: bold; margin: 5px 0; } -div.searchResultBody { +#searchResults .searchResultBody { font-size: 14px; } -img.searchBoxIcon { - position: absolute; - height: 20px; - width: 20px; - top: 5px; - right: 10px; -} - -mark { +#searchResults mark { background-color: #dddfdf; } + +#contentsList { + padding: 20px; +} + +#contentsList hr.separator { + width: 10px; + margin: 30px auto; + border: solid 1px #C9C9C9; +} + +/* Page */ +div.markdown-body { + width: 90vw; + max-width: 800px; + min-width: 300px; + margin: 0 auto; + padding: 20px; + text-align: left; +} diff --git a/static/js/search.js b/static/js/search.js index 0dc81f6..7c2a250 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -26,12 +26,12 @@ function initSearch () { function initUI () { // Clear query when clear icon is clicked $('#searchBoxIcon').click(function () { - $('#searchBox').val('') - $('#searchBox').trigger('keyup') + $('#searchBoxInput').val('') + $('#searchBoxInput').trigger('keyup') }) // Event when chenging query - $('#searchBox').keyup(function () { + $('#searchBoxInput').keyup(function () { var $searchResults = $('#searchResults') var query = $(this).val().trim() @@ -56,7 +56,7 @@ function initUI () { }) // Emit keyup event for when the query is already setted with browser back etc. - $('#searchBox').trigger('keyup') + $('#searchBoxInput').trigger('keyup') } /** @@ -65,7 +65,7 @@ function initUI () { */ function renderResults (results) { var $searchResults = $('#searchResults') - var query = $('#searchBox').val() + var query = $('#searchBoxInput').val() var SUMMARY_INCLUDE = 50 var MAX_PAGES = 10