rework sidebar into a css grid
This commit is contained in:
parent
b2e8c815c3
commit
16c906b0e4
|
@ -44,13 +44,6 @@ document.addEventListener("DOMContentLoaded",function() {
|
||||||
|
|
||||||
const box = new SimpleLightbox('.lbox', { /* options */ });
|
const box = new SimpleLightbox('.lbox', { /* options */ });
|
||||||
|
|
||||||
function enableSidebarMenuForMobile() {
|
|
||||||
document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
|
|
||||||
document.querySelector('.row-offcanvas').classList.toggle('active')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
enableSidebarMenuForMobile();
|
|
||||||
|
|
||||||
function scrollThenFixSidebar() {
|
function scrollThenFixSidebar() {
|
||||||
const mainHeight = document.querySelector('main div').clientHeight
|
const mainHeight = document.querySelector('main div').clientHeight
|
||||||
const sidebarHeight = document.querySelector('.sidebar-content').clientHeight
|
const sidebarHeight = document.querySelector('.sidebar-content').clientHeight
|
||||||
|
|
|
@ -45,7 +45,7 @@ code
|
||||||
|
|
||||||
@media (min-width: 1200px)
|
@media (min-width: 1200px)
|
||||||
padding-left: 5rem
|
padding-left: 5rem
|
||||||
width: 73%
|
width: 75%
|
||||||
|
|
||||||
&-content
|
&-content
|
||||||
@media (min-width: 1200px)
|
@media (min-width: 1200px)
|
||||||
|
|
|
@ -233,10 +233,6 @@ article
|
||||||
text-align: left !important
|
text-align: left !important
|
||||||
|
|
||||||
main
|
main
|
||||||
float: left
|
|
||||||
@media (min-width: 768px)
|
|
||||||
width: 75%
|
|
||||||
|
|
||||||
ul li
|
ul li
|
||||||
list-style-type: circle
|
list-style-type: circle
|
||||||
|
|
||||||
|
@ -256,17 +252,6 @@ a:hover, .link:hover
|
||||||
color: var(--textlink)
|
color: var(--textlink)
|
||||||
background-color: #d1d3bd
|
background-color: #d1d3bd
|
||||||
|
|
||||||
|
|
||||||
.img-inactive
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
.img-active
|
|
||||||
display: none
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
.pages
|
.pages
|
||||||
color: var(--accent)
|
color: var(--accent)
|
||||||
|
|
||||||
|
|
|
@ -1,32 +1,42 @@
|
||||||
.sidebar
|
$navpercentage: 24%
|
||||||
padding: 0
|
|
||||||
height: 100%
|
|
||||||
float: left
|
|
||||||
min-height: 1px
|
|
||||||
overflow: auto
|
|
||||||
vertical-align: top
|
|
||||||
display: inline-block
|
|
||||||
padding-left: 10px
|
|
||||||
background-color: var(--bgdark)
|
|
||||||
|
|
||||||
@media (min-width: 768px)
|
#all
|
||||||
width: 25%
|
display: grid
|
||||||
|
grid-template-columns: $navpercentage 1fr
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px)
|
||||||
|
grid-template-columns: 100%
|
||||||
|
|
||||||
|
nav
|
||||||
|
grid-row: 2
|
||||||
|
main
|
||||||
|
grid-row: 1
|
||||||
|
|
||||||
|
.sidebar
|
||||||
|
padding-left: 1.1em
|
||||||
|
padding-right: 1.1em
|
||||||
|
background-color: var(--bgdark)
|
||||||
|
border-right: 5px solid var(--accent)
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px)
|
||||||
|
font-size: 0.8em
|
||||||
|
|
||||||
&-scrolling
|
&-scrolling
|
||||||
width: 100%
|
width: unset
|
||||||
position: unset
|
position: unset
|
||||||
|
|
||||||
&-fixed
|
&-fixed
|
||||||
position: fixed
|
@media screen and (min-width: 767px)
|
||||||
bottom: 0px
|
padding-left: 1.1em
|
||||||
width: 50%
|
padding-right: 1.1em
|
||||||
|
position: fixed
|
||||||
@media (min-width: 768px)
|
bottom: 0
|
||||||
width: calc(25% - 5px)
|
left: 0
|
||||||
|
width: $navpercentage
|
||||||
|
|
||||||
&-menu
|
&-menu
|
||||||
list-style-type: none
|
list-style-type: none
|
||||||
padding-left: 20px
|
padding-left: 0
|
||||||
margin-bottom: 40px
|
margin-bottom: 40px
|
||||||
|
|
||||||
li
|
li
|
||||||
|
@ -43,23 +53,11 @@
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border: 1px solid var(--accent)
|
border: 1px solid var(--accent)
|
||||||
|
background: $bglight
|
||||||
|
|
||||||
&:before, a
|
&:before, a
|
||||||
color: var(--textlink)
|
color: var(--textlink)
|
||||||
|
|
||||||
&-content
|
|
||||||
background-color: var(--bgdark)
|
|
||||||
border-right: 5px solid var(--accent)
|
|
||||||
padding-top: 30px
|
|
||||||
padding-left: 10px
|
|
||||||
@media (min-width: 992px)
|
|
||||||
padding-left: 20px
|
|
||||||
padding-right: 20px
|
|
||||||
|
|
||||||
&-offcanvas
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
left: -46% !important
|
|
||||||
|
|
||||||
hr
|
hr
|
||||||
border-top: 1px solid var(--accent)
|
border-top: 1px solid var(--accent)
|
||||||
|
|
||||||
|
@ -69,6 +67,10 @@
|
||||||
margin-bottom: 1rem
|
margin-bottom: 1rem
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
|
img
|
||||||
|
@media (min-width: 768px)
|
||||||
|
width: 100%
|
||||||
|
|
||||||
p
|
p
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
|
@ -80,64 +82,23 @@
|
||||||
-moz-transform: rotate(-45deg)
|
-moz-transform: rotate(-45deg)
|
||||||
-o-transform: rotate(-45deg)
|
-o-transform: rotate(-45deg)
|
||||||
-ms-transform: rotate(-45deg)
|
-ms-transform: rotate(-45deg)
|
||||||
top: -50px
|
top: -60px
|
||||||
right: 20px
|
right: 35px
|
||||||
width: 25px
|
width: 40px
|
||||||
|
|
||||||
@media (min-width: 768px)
|
|
||||||
top: -60px
|
|
||||||
right: 35px
|
|
||||||
width: 40px
|
|
||||||
|
|
||||||
&-header img
|
&-header img
|
||||||
float: right
|
float: right
|
||||||
|
|
||||||
&-heading
|
&-heading
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
font-size: 1.1rem
|
font-size: 1.1em
|
||||||
letter-spacing: 0.1em
|
letter-spacing: 0.1em
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
padding-top: 10px
|
padding-top: 10px
|
||||||
padding-left: 10px
|
padding-left: 10px
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
|
||||||
|
&-description
|
||||||
&-date
|
|
||||||
color: var(--textlinkdark)
|
color: var(--textlinkdark)
|
||||||
font-size: 0.7rem
|
font-size: 0.7rem
|
||||||
|
|
||||||
|
|
||||||
.row-offcanvas
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
position: relative
|
|
||||||
transition: all 0.25s ease-out
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
&-right
|
|
||||||
.sidebar-offcanvas
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
right: -50%
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
&-left
|
|
||||||
.sidebar-offcanvas
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
left: -48%
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
|
|
||||||
&-right.active
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
right: 50%
|
|
||||||
&-left.active
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
left: 50%
|
|
||||||
|
|
||||||
.sidebar-offcanvas
|
|
||||||
@media screen and (max-width: 767px)
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
width: 50%
|
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
<article>
|
<article>
|
||||||
<h1>Page not found</h1>
|
<h1>Page not found</h1>
|
||||||
|
|
||||||
|
|
|
@ -14,17 +14,13 @@
|
||||||
<img src="/img/rss.png" alt="get RSS feed" class="no-border" />
|
<img src="/img/rss.png" alt="get RSS feed" class="no-border" />
|
||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
<a name="top" id="top"></a>
|
||||||
<div id="all">
|
<div id="all">
|
||||||
<div class="container-fluid">
|
{{ partial "sidebar.html" . }}
|
||||||
<div class="row row-offcanvas row-offcanvas-left">
|
<main>
|
||||||
{{ partial "sidebar.html" . }}
|
{{ block "main" . }}
|
||||||
<a name="top" id="top"></a>
|
{{ end }}
|
||||||
<main>
|
</main>
|
||||||
{{ block "main" . }}
|
|
||||||
{{ end }}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{{ partial "scripts.html" . }}
|
{{ partial "scripts.html" . }}
|
||||||
<a name="bottom" id="bottom"></a>
|
<a name="bottom" id="bottom"></a>
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<article class="h-entry" data-pagefind-body>
|
<article class="h-entry" data-pagefind-body>
|
||||||
<header>
|
<header>
|
||||||
|
|
|
@ -6,13 +6,9 @@
|
||||||
{{ partial "icons" . }}
|
{{ partial "icons" . }}
|
||||||
<a name="top" id="top"></a>
|
<a name="top" id="top"></a>
|
||||||
<div id="all">
|
<div id="all">
|
||||||
<div class="container-fluid">
|
{{ partial "sidebar.html" . }}
|
||||||
<div class="row row-offcanvas row-offcanvas-left">
|
<main>
|
||||||
{{ partial "sidebar.html" . }}
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<a class="h-card" rel="me" href="https://jefklakscodex.com/" style="border: none">
|
<a class="h-card" rel="me" href="https://jefklakscodex.com/" style="border: none">
|
||||||
|
@ -52,13 +48,10 @@
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ partial "scripts.html" . }}
|
{{ partial "scripts.html" . }}
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<article>
|
<article>
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
|
|
||||||
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
||||||
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
<div class="small-navbar visible-xs">
|
|
||||||
<button type="button" data-toggle="offcanvas" class="btn btn-ghost pull-left"> » Menu</button>
|
|
||||||
</div>
|
|
|
@ -1,39 +1,38 @@
|
||||||
<article class="box-masonry">
|
<article class="box-masonry">
|
||||||
|
|
||||||
<a href="{{ .Permalink }}" title="{{ .Params.title }}" class="box-masonry-image">
|
<a href="{{ .Permalink }}" title="{{ .Params.title }}" class="box-masonry-image">
|
||||||
{{ $thumb := "/img/logo.png" | absURL }}
|
{{- $thumb := "/img/logo.png" | absURL -}}
|
||||||
{{ if .Params.image }}
|
{{- if .Params.image -}}
|
||||||
{{ $thumb = .Params.image | absURL }}
|
{{- $thumb = .Params.image | absURL -}}
|
||||||
{{ else if .Params.howlongtobeat_id }}
|
{{- else if .Params.howlongtobeat_id -}}
|
||||||
{{ $thumb = (printf "%scover.jpg" .Page.Permalink) | absURL }}
|
{{- $thumb = (printf "%scover.jpg" .Page.Permalink) | absURL -}}
|
||||||
{{ else }}
|
{{- else -}}
|
||||||
<!-- taken from head-meta.html in brainabking -->
|
<!-- taken from head-meta.html in brainabking -->
|
||||||
{{ $perm := .Permalink }}
|
{{- $perm := .Permalink -}}
|
||||||
{{ $base := .Site.BaseURL }}
|
{{- $base := .Site.BaseURL -}}
|
||||||
{{ $match := findRE `!\[(.*)\]\((.+).(jpg|png|gif)` .RawContent 1 }}
|
{{- $match := findRE `!\[(.*)\]\((.+).(jpg|png|gif)` .RawContent 1 -}}
|
||||||
{{ range $match }}
|
{{- range $match -}}
|
||||||
{{ $relthumb := replaceRE `!\[(.*)\]\(` "" . }}
|
{{- $relthumb := replaceRE `!\[(.*)\]\(` "" . -}}
|
||||||
{{ if hasPrefix $relthumb "/" }}
|
{{- if hasPrefix $relthumb "/" -}}
|
||||||
{{ $thumb = printf "%s%s" $base $relthumb }}
|
{{- $thumb = printf "%s%s" $base $relthumb -}}
|
||||||
{{ else }}
|
{{- else -}}
|
||||||
{{ $thumb = printf "%s%s" $perm $relthumb }}
|
{{- $thumb = printf "%s%s" $perm $relthumb -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Title }}" style="display: block; max-width: 100%">
|
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Title }}" style="display: block; max-width: 100%">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="box-masonry-text">
|
<div class="box-masonry-text">
|
||||||
<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
|
<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
|
||||||
{{ if .Date }}
|
{{- if .Date -}}
|
||||||
{{ .Date.Format (.Site.Params.dateFormat | default "02/01/2006") | $.Scratch.Set "subtitle" }}
|
{{- .Date.Format (.Site.Params.dateFormat | default "02/01/2006") | $.Scratch.Set "subtitle" -}}
|
||||||
<span class="sidebar-date" style="float: right;">
|
<span class="sidebar-date" style="float: right;">
|
||||||
<svg class='icon icon-inline'>
|
<svg class='icon icon-inline'>
|
||||||
<use xlink:href='#cal1'></use>
|
<use xlink:href='#cal1'></use>
|
||||||
</svg>
|
</svg>
|
||||||
{{ $.Scratch.Get "subtitle" }}
|
{{- $.Scratch.Get "subtitle" -}}
|
||||||
</span>
|
</span>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
<div class="box-masonry-description">
|
<div class="box-masonry-description">
|
||||||
<p>
|
<p>
|
||||||
{{ if isset .Params "score" }}<strong>{{ partial "scorelabel" . }} |</strong>{{ end }}
|
{{ if isset .Params "score" }}<strong>{{ partial "scorelabel" . }} |</strong>{{ end }}
|
||||||
|
@ -41,5 +40,4 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- box-masonry-text -->
|
</div> <!-- box-masonry-text -->
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -1,30 +1,27 @@
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
|
|
||||||
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
||||||
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
||||||
</a>
|
</a>
|
||||||
{{ if eq .Paginator.PageNumber 1 }}
|
{{- if eq .Paginator.PageNumber 1 -}}
|
||||||
<article>
|
<article>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
|
|
||||||
<h3>Featured: <em>{{ .Title }}</em>
|
<h3>Featured: <em>{{ .Title }}</em>
|
||||||
<span class='pages'>(Page {{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }})</span> »
|
<span class='pages'>(Page {{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }})</span> »
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
{{ range (.Paginate .Pages).Pages }}
|
{{- range (.Paginate .Pages).Pages -}}
|
||||||
{{ if and (gt (len .Content) 1) (ne .Params.ignore true) }}
|
{{- if and (gt (len .Content) 1) (ne .Params.ignore true) -}}
|
||||||
{{ partial "portfolio-block.html" . }}
|
{{ partial "portfolio-block.html" . }}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
{{- template "_internal/pagination.html" . }}
|
{{- template "_internal/pagination.html" . }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,109 +1,108 @@
|
||||||
<nav class="sidebar sidebar-offcanvas">
|
<nav class="sidebar">
|
||||||
<div class="sidebar-content sidebar-scrolling">
|
<div class="sidebar-content sidebar-scrolling">
|
||||||
|
<a name="menu" id="menu"></a>
|
||||||
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }} Home">{{ .Site.Title }}</a></h1>
|
<h1 class="sidebar-heading"><a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }} Home">{{ .Site.Title }}</a></h1>
|
||||||
|
|
||||||
{{ $thumb := "" }}
|
{{- $thumb := "" -}}
|
||||||
{{ if .Params.image }}
|
{{- if .Params.image -}}
|
||||||
{{ $thumb = .Params.image }}
|
{{- $thumb = .Params.image -}}
|
||||||
{{ else }}
|
{{- else -}}
|
||||||
{{ if .Params.howlongtobeat_id }}
|
{{- if .Params.howlongtobeat_id -}}
|
||||||
{{ $thumb = (printf "%scover.jpg" .Page.Permalink) }}
|
{{- $thumb = (printf "%scover.jpg" .Page.Permalink) -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ if ne $thumb "" }}
|
{{- if ne $thumb "" -}}
|
||||||
<div class="sidebar-game-info">
|
<div class="sidebar-game-info">
|
||||||
<p style="position: relative;">
|
<p style="position: relative;">
|
||||||
<img src="{{ $thumb | absURL }}" alt="game cover image" alt="game cover" class="img-responsive img-inactive" style="border: 1px solid black"/>
|
<img src="{{ $thumb | absURL }}" alt="game cover image" alt="game cover" class="img-responsive img-inactive" style="border: 1px solid black"/>
|
||||||
|
{{- if ne .CurrentSection.Params.platform .Params.platform -}}
|
||||||
{{ if ne .CurrentSection.Params.platform .Params.platform }}
|
{{- $platform := .CurrentSection.Title -}}
|
||||||
{{ $platform := .CurrentSection.Title }}
|
{{- with .CurrentSection.Params.platform -}}
|
||||||
{{ with .CurrentSection.Params.platform }}
|
|
||||||
<img src="/img/{{ lower . }}.jpg" alt="{{ $platform }}" alt="platform" class="sidebar-game-platform img-responsive"/>
|
<img src="/img/{{ lower . }}.jpg" alt="{{ $platform }}" alt="platform" class="sidebar-game-platform img-responsive"/>
|
||||||
Played on: <a href="/games/{{ lower . }}">{{ $platform }}</a><br/>
|
Played on: <a href="/games/{{ lower . }}">{{ $platform }}</a><br/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
|
|
||||||
{{ with .Params.game_genre }}
|
{{- with .Params.game_genre -}}
|
||||||
{{ $tag := replaceRE `\s` "-" . }}
|
{{- $tag := replaceRE `\s` "-" . -}}
|
||||||
Genre: <a href="/tags/{{ $tag | lower }}">{{ . }}</a><br/>
|
Genre: <a href="/tags/{{ $tag | lower }}">{{ . }}</a><br/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ with .Params.game_release_year }}
|
{{- with .Params.game_release_year -}}
|
||||||
Release year: {{ . }}<br/>
|
Release year: {{ . }}<br/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ with .Params.game_developer }}
|
{{- with .Params.game_developer -}}
|
||||||
Developer: <a href="https://www.mobygames.com/search/quick?sFilter=1&offset=0&q={{ . }}&p=-1&sC=on" target="_blank" rel="noopener" class="external">{{ . }}</a><br/>
|
Developer: <a href="https://www.mobygames.com/search/quick?sFilter=1&offset=0&q={{ . }}&p=-1&sC=on" target="_blank" rel="noopener" class="external">{{ . }}</a><br/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ with .Params.howlongtobeat_id }}
|
{{- with .Params.howlongtobeat_id -}}
|
||||||
<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" rel="noopener" class="external">How long to beat</a>
|
<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" rel="noopener" class="external">How long to beat</a>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
{{ with .Params.howlongtobeat_hrs }}
|
{{- with .Params.howlongtobeat_hrs -}}
|
||||||
: <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}<br/>
|
: <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}<br/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
|
|
||||||
|
{{- $currRellink := substr .RelPermalink 0 -1 -}}
|
||||||
|
{{- $currContent := .Content -}}
|
||||||
|
{{- $backlinks := slice -}}
|
||||||
|
{{- $forwardlinks := slice -}}
|
||||||
|
{{- range (where (where .Site.Pages.ByDate.Reverse ".Section" "in" (slice "articles" "games")) ".Params.ignore" "!=" "true") -}}
|
||||||
|
{{- $found := findRE $currRellink .Content 1 -}}
|
||||||
|
{{- if $found -}}
|
||||||
|
{{- $backlinks = $backlinks | append . -}}
|
||||||
|
{{- else -}}
|
||||||
|
{{- $rellink := substr .RelPermalink 0 -1 -}}
|
||||||
|
{{- $found = findRE $rellink $currContent 1 -}}
|
||||||
|
{{- if $found -}}
|
||||||
|
{{- $forwardlinks = $forwardlinks | append . -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
{{ $currRellink := substr .RelPermalink 0 -1 }}
|
{{- $related := append $backlinks $forwardlinks -}}
|
||||||
{{ $currContent := .Content }}
|
{{- if and .Params.Date $related -}}
|
||||||
{{ $backlinks := slice }}
|
|
||||||
{{ $forwardlinks := slice }}
|
|
||||||
{{ range (where (where .Site.Pages.ByDate.Reverse ".Section" "in" (slice "articles" "games")) ".Params.ignore" "!=" "true") }}
|
|
||||||
{{ $found := findRE $currRellink .Content 1 }}
|
|
||||||
{{ if $found }}
|
|
||||||
{{ $backlinks = $backlinks | append . }}
|
|
||||||
{{ else }}
|
|
||||||
{{ $rellink := substr .RelPermalink 0 -1 }}
|
|
||||||
{{ $found = findRE $rellink $currContent 1 }}
|
|
||||||
{{ if $found }}
|
|
||||||
{{ $forwardlinks = $forwardlinks | append . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ $related := append $backlinks $forwardlinks }}
|
|
||||||
{{ if and .Params.Date $related }}
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>Related Posts</span>
|
<span>Related Posts</span>
|
||||||
<img src="/img/gob_purse.gif" alt="related articles" />
|
<img src="/img/gob_purse.gif" alt="related articles" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
{{ range first 5 $related }}
|
{{- range first 5 $related | uniq -}}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
||||||
<span class="sidebar-date">
|
<span class="sidebar-description">
|
||||||
{{ if isset .Params "Description" }}
|
{{- if isset .Params "Description" -}}
|
||||||
{{ .Description }}
|
{{ .Description }}
|
||||||
{{ else }}
|
{{- else -}}
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
<hr/>
|
<hr/>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>Recent Codex Entries</span>
|
<span>Recent Codex Entries</span>
|
||||||
<img src="/img/gob_letter.gif" alt="latest articles" />
|
<img src="/img/gob_letter.gif" alt="latest articles" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
{{ range first 5 (where (where .Site.Pages.ByDate.Reverse ".Section" "in" (slice "articles" "games")) ".Params.ignore" "!=" "true") }}
|
{{- range first 5 (where (where .Site.Pages.ByDate.Reverse ".Section" "in" (slice "articles" "games")) ".Params.ignore" "!=" "true") -}}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
||||||
<span class="sidebar-date">
|
<span class="sidebar-description">
|
||||||
{{ if .Description }}
|
{{- if .Description -}}
|
||||||
{{ .Description }}
|
{{ .Description }}
|
||||||
{{ else if .Summary }}
|
{{- else if .Summary -}}
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
{{ else }}
|
{{- else -}}
|
||||||
A {{ .Params.game_genre }} game by {{ .Params.game_developer }} in {{ .Params.game_release_year }} that takes about {{ .Params.howlongtobeat_hrs }} hour(s) to beat.
|
A {{ .Params.game_genre }} game by {{ .Params.game_developer }} in {{ .Params.game_release_year }} that takes about {{ .Params.howlongtobeat_hrs }} hour(s) to beat.
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
|
@ -111,17 +110,17 @@
|
||||||
<img src="/img/gob_waypoint.gif" alt="More information" />
|
<img src="/img/gob_waypoint.gif" alt="More information" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="sidebar-menu">
|
<ul class="sidebar-menu">
|
||||||
{{ range .Site.Params.navlinks }}
|
{{- range .Site.Params.navlinks -}}
|
||||||
<li><a href="{{ .url }}">{{ .name }}</a></li>
|
<li><a href="{{ .url }}">{{ .name }}</a></li>
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
<p class="credit">
|
<p class="credit">
|
||||||
{{ with .Site.Params.copyright }}
|
{{- with .Site.Params.copyright -}}
|
||||||
{{ . | safeHTML }}
|
{{ . | safeHTML }}
|
||||||
{{ end }}
|
{{- end -}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="content-column">
|
<div class="content-column">
|
||||||
{{ partial "mobile_nav_toggle.html" . }}
|
|
||||||
|
|
||||||
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
||||||
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
||||||
</a>
|
</a>
|
||||||
|
|
Loading…
Reference in New Issue