mirror of
https://github.com/Brandon-Rozek/website-theme.git
synced 2024-11-25 01:26:31 -05:00
Layout change #6
This commit is contained in:
koirand
parent
a821794a91
commit
1f9e6368c9
10 changed files with 210 additions and 182 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 }}
|
||||||
|
|
|
||||||
|
|
@ -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 }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
© {{ .Site.Params.publicationYear }} {{ .Site.Params.Author }}.
|
© {{ .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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
</div>
|
||||||
|
<!-- author -->
|
||||||
|
<h2><a class="author" href="/">{{ .Site.Params.Author }}</a></h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue