Layout change #6

This commit is contained in:
koirand 2019-03-23 16:18:03 +09:00
parent a821794a91
commit 1f9e6368c9
10 changed files with 210 additions and 182 deletions

View file

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="main"> <div class="main">
<div> <div>
<h1>404 page not found.</h1> <h1>404 page not found.</h1>
<p><a href="/">Go Home</a></p> <p><a href="/">Go Home</a></p>
</div> </div>
</div> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</body> </body>
</html> </html>

View file

@ -1,12 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
{{ partial "header.html" . }} {{ block "main" . }}{{ end }}
<div class="main"> </body>
{{ block "main" . }}{{ end }}
</div>
{{ partial "footer.html" . }}
</body>
</html> </html>

View file

@ -1,22 +1,27 @@
{{ define "main"}} {{ define "main"}}
<div> {{ partial "header.html" . }}
<div class="searchBoxContainer"> <!-- search box -->
<input type="text" id="searchBox" class="searchBox" placeholder="Search..." /> <div id="searchBox">
<img id="searchBoxIcon" class="searchBoxIcon" src="/img/search.png" /> <input type="text" id="searchBoxInput" placeholder="Search..." />
</div> <img id="searchBoxIcon" src="/img/search.png" />
<div id="searchResults" class="searchResults"></div> </div>
{{ range $index, $value := .Pages.GroupByDate .Site.Params.listPageDateFormat }} <!-- search results -->
{{ if (ne $index 0) }} <div id="searchResults"></div>
<hr class="separator"> <!-- contents -->
{{ end }} <div id="contentsList">
<p class="date">{{ .Key }}</p> {{ range $index, $value := .Pages.GroupByDate .Site.Params.listPageDateFormat }}
{{ range .Pages }} {{ if (ne $index 0) }}
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p> <hr class="separator">
{{ end }} {{ end }}
{{ end }} <p class="date">{{ .Key }}</p>
</div> {{ range .Pages }}
<script src="/js/jquery-3.3.1.min.js"></script> <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
<script src="/js/jquery.mark.es6.min.js"></script> {{ end }}
<script src="/js/fuse.min.js"></script> {{ end }}
<script src="/js/search.js"></script> </div>
{{ partial "footer.html" . }}
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.mark.es6.min.js"></script>
<script src="/js/fuse.min.js"></script>
<script src="/js/search.js"></script>
{{ end }} {{ end }}

View file

@ -1,10 +1,11 @@
{{ define "main"}} {{ define "main"}}
<div> <h1>{{ .Title }}</h1>
<h1>{{ .Title }}</h1> {{ partial "header.html" . }}
<p class="date">{{ .Date.Format .Site.Params.singlePageDateFormat }}</p> <!-- date -->
<div class="markdown-body"> <p class="date">{{ .Date.Format .Site.Params.singlePageDateFormat }}</p>
{{ .Content }} <!-- content -->
</div> <div class="markdown-body">
</div> {{ .Content }}
</div>
{{ partial "footer.html" . }}
{{ end }} {{ end }}

View file

@ -1,26 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<div class="profile"> <div id="profileContainer">
<div class="profile-body"> <div id="profile">
<div class="avatar"> <header>
<img class="avatar-mask" src="/img/{{ .Site.Params.avatar }}"> <!-- avator -->
<img src="/img/avatar-border.svg"> <div class="avatar">
</div> <img class="avatarMask" src="/img/{{ .Site.Params.avatar }}" alt="avatar">
<h1 class="author">{{ .Site.Params.Author }}</h1> <img src="/img/avatar-border.svg" alt="avatar-border">
<p> </div>
{{ .Site.Params.discription }} <!-- author -->
</p> <h1 class="author">{{ .Site.Params.Author }}</h1>
<nav> </header>
<ul> <!-- discription -->
{{ range .Site.Menus.main }} <p>
<li><a href="{{ .URL }}">{{ .Name }}</a></li> {{ .Site.Params.discription }}
{{ end }} </p>
</ul> <!-- navigation -->
</nav> <nav>
</div> <ul>
</div> {{ range .Site.Menus.main }}
{{- partial "footer.html" . -}} <li><a href="{{ .URL }}">{{ .Name }}</a></li>
</body> {{ end }}
</ul>
</nav>
</div>
</div>
{{- partial "footer.html" . -}}
</body>
</html> </html>

View file

@ -1,9 +1,9 @@
<footer> <footer>
<p> <p>
&copy; {{ .Site.Params.publicationYear }} {{ .Site.Params.Author }}. &copy; {{ .Site.Params.publicationYear }} {{ .Site.Params.Author }}.
Powered by <a href="https://gohugo.io/">Hugo</a> Powered by <a href="https://gohugo.io/">Hugo</a>
using the <a href="https://github.com/koirand/pulp/">pulp</a> theme. using the <a href="https://github.com/koirand/pulp/">pulp</a> theme.
</p> </p>
</footer> </footer>
{{- range .Site.Params.custom_js -}} {{- range .Site.Params.custom_js -}}
<script src="{{ . }}"></script> <script src="{{ . }}"></script>

View file

@ -1,45 +1,45 @@
<head> <head>
<title> <title>
{{ if eq .Title .Site.Title }} {{ if eq .Title .Site.Title }}
{{ .Site.Title }} {{ .Site.Title }}
{{ else }} {{ else }}
{{ .Title }} - {{ .Site.Title }} {{ .Title }} - {{ .Site.Title }}
{{ end }} {{ end }}
</title> </title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="{{ .Site.Author }}" /> <meta name="author" content="{{ .Site.Author }}" />
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
<!-- css --> <!-- css -->
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/markdown.css"> <link rel="stylesheet" href="/css/markdown.css">
<link rel="stylesheet" href="/css/syntax-highlight.css"> <link rel="stylesheet" href="/css/syntax-highlight.css">
<!-- custom css --> <!-- custom css -->
{{ range .Site.Params.custom_css }} {{ range .Site.Params.custom_css }}
<link rel="stylesheet" href="{{ . }}"> <link rel="stylesheet" href="{{ . }}">
{{ end }} {{ end }}
{{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/gohugoio/hugo/tree/master/tpl/tplimpl/embedded/templates */}} {{/* 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/opengraph.html" . -}}
{{- template "_internal/google_news.html" . -}} {{- template "_internal/google_news.html" . -}}
{{- template "_internal/schema.html" . -}} {{- template "_internal/schema.html" . -}}
{{- template "_internal/twitter_cards.html" . -}} {{- template "_internal/twitter_cards.html" . -}}
<!-- Polyfill for old browsers --> <!-- Polyfill for old browsers -->
{{ `<!--[if lte IE 9]> {{ `<!--[if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->` | safeHTML }} <![endif]-->` | safeHTML }}
{{ `<!--[if lt IE 9]> {{ `<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->` | safeHTML }} <![endif]-->` | safeHTML }}
<!-- Analytics --> <!-- Analytics -->
{{- if and (not .Site.IsServer) .Site.GoogleAnalytics -}} {{- if and (not .Site.IsServer) .Site.GoogleAnalytics -}}
{{ template "_internal/google_analytics_async.html" . }} {{ template "_internal/google_analytics_async.html" . }}
{{- end -}} {{- end -}}
</head> </head>

View file

@ -1,6 +1,9 @@
<header> <header>
<div class="avatar"> <!-- avator -->
<img class="avatar-mask" src="/img/{{ .Site.Params.avatar }}"> <div class="avatar">
<a href="/"><img src="/img/avatar-border.svg"></a> <img class="avatarMask" src="/img/{{ .Site.Params.avatar }}">
</div> <a href="/"><img src="/img/avatar-border.svg"></a>
</header> </div>
<!-- author -->
<h2><a class="author" href="/">{{ .Site.Params.Author }}</a></h2>
</header>

View file

@ -1,5 +1,9 @@
/* General */
body { body {
min-height:100vh;
margin: 0; margin: 0;
padding: 20px;
box-sizing:border-box;
background-color: #EFEFEF; background-color: #EFEFEF;
color: #707070; color: #707070;
text-align: center; text-align: center;
@ -7,20 +11,6 @@ body {
line-height: 1.5; 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 { a:link {
color: #707070; color: #707070;
} }
@ -37,19 +27,6 @@ a:active {
color: #707070; 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 { .author {
color: #C39F59; color: #C39F59;
} }
@ -58,12 +35,13 @@ div.profile-body {
color: #869D38; color: #869D38;
} }
div.avatar { /* Header */
header .avatar {
position: relative; position: relative;
height: 100px; height: 100px;
} }
div.avatar img { header .avatar img {
position: absolute; position: absolute;
width: 100px; width: 100px;
margin: 0 auto; margin: 0 auto;
@ -71,25 +49,44 @@ div.avatar img {
right: 0; right: 0;
} }
div.avatar img.avatar-mask { header .avatarMask {
clip-path: circle(48px at center); clip-path: circle(48px at center);
-webkit-clip-path: circle(48px at center); -webkit-clip-path: circle(48px at center);
} }
div.main { header a.author:link {
display: flex; color: #C39F59;
justify-content: center;
min-height: calc(100vh - 202px);
min-width: 300px;
margin: 0 10px;
} }
div.markdown-body { header a.author:visited {
width: 90vw; color: #C39F59;
max-width: 800px; }
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; min-width: 300px;
margin: 40px auto;
text-align: left;
} }
nav ul { nav ul {
@ -101,14 +98,15 @@ nav ul {
list-style: none; list-style: none;
} }
div.searchBoxContainer { /* Contents List */
#searchBox {
position: relative; position: relative;
width: 300px; width: 300px;
height: 30px; height: 30px;
margin: 10px auto 50px auto; margin: 20px auto;
} }
input.searchBox { #searchBox #searchBoxInput {
position: absolute; position: absolute;
width: 100%; width: 100%;
padding: 0 35px 0 15px; padding: 0 35px 0 15px;
@ -125,17 +123,25 @@ input.searchBox {
box-sizing: border-box; box-sizing: border-box;
} }
input.searchBox::placeholder { #searchBox #searchBoxInput::placeholder {
color: #c9c9c9; color: #c9c9c9;
} }
div.searchResults { #searchBox #searchBoxIcon {
position: absolute;
height: 20px;
width: 20px;
top: 5px;
right: 10px;
}
#searchResults {
display: none; display: none;
position: absolute; position: absolute;
max-width: 600px; max-width: 600px;
min-width: 300px; min-width: 300px;
margin: 0 auto; margin: 0 auto;
top: 210px; top: 240px;
left: 0; left: 0;
right: 0; right: 0;
padding: 5px; padding: 5px;
@ -146,27 +152,39 @@ div.searchResults {
box-sizing: border-box; box-sizing: border-box;
} }
div.searchResultPage { #searchResults .searchResultPage {
padding: 20px padding: 20px
} }
div.searchResultTitle { #searchResults .searchResultTitle {
font-weight: bold; font-weight: bold;
margin: 5px 0; margin: 5px 0;
} }
div.searchResultBody { #searchResults .searchResultBody {
font-size: 14px; font-size: 14px;
} }
img.searchBoxIcon { #searchResults mark {
position: absolute;
height: 20px;
width: 20px;
top: 5px;
right: 10px;
}
mark {
background-color: #dddfdf; 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;
}

View file

@ -26,12 +26,12 @@ function initSearch () {
function initUI () { function initUI () {
// Clear query when clear icon is clicked // Clear query when clear icon is clicked
$('#searchBoxIcon').click(function () { $('#searchBoxIcon').click(function () {
$('#searchBox').val('') $('#searchBoxInput').val('')
$('#searchBox').trigger('keyup') $('#searchBoxInput').trigger('keyup')
}) })
// Event when chenging query // Event when chenging query
$('#searchBox').keyup(function () { $('#searchBoxInput').keyup(function () {
var $searchResults = $('#searchResults') var $searchResults = $('#searchResults')
var query = $(this).val().trim() 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. // 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) { function renderResults (results) {
var $searchResults = $('#searchResults') var $searchResults = $('#searchResults')
var query = $('#searchBox').val() var query = $('#searchBoxInput').val()
var SUMMARY_INCLUDE = 50 var SUMMARY_INCLUDE = 50
var MAX_PAGES = 10 var MAX_PAGES = 10