rework sidebar into a css grid

This commit is contained in:
Wouter Groeneveld 2022-11-18 13:42:22 +01:00
parent b2e8c815c3
commit 16c906b0e4
15 changed files with 144 additions and 232 deletions

View File

@ -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

View File

@ -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)

View File

@ -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)

View File

@ -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%

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,3 +0,0 @@
<div class="small-navbar visible-xs">
<button type="button" data-toggle="offcanvas" class="btn btn-ghost pull-left"> &raquo;&nbsp;Menu</button>
</div>

View File

@ -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>

View File

@ -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> &raquo; <span class='pages'>(Page {{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }})</span> &raquo;
</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>

View File

@ -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"/>
&nbsp;Played on: <a href="/games/{{ lower . }}">{{ $platform }}</a><br/> &nbsp;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` "-" . -}}
&nbsp;Genre: <a href="/tags/{{ $tag | lower }}">{{ . }}</a><br/> &nbsp;Genre: <a href="/tags/{{ $tag | lower }}">{{ . }}</a><br/>
{{ end }} {{- end -}}
{{ with .Params.game_release_year }} {{- with .Params.game_release_year -}}
&nbsp;Release year: {{ . }}<br/> &nbsp;Release year: {{ . }}<br/>
{{ end }} {{- end -}}
{{ with .Params.game_developer }} {{- with .Params.game_developer -}}
&nbsp;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/> &nbsp;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 -}}
&nbsp;<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" rel="noopener" class="external">How long to beat</a> &nbsp;<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>

View File

@ -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>