wgroeneveld
/
jefklakscodex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
themes/jefklak-creative-portfolio/assets/js/codex.js
View File

@ -44,13 +44,6 @@ document.addEventListener("DOMContentLoaded",function() {
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() {
const mainHeight = document.querySelector('main div').clientHeight
const sidebarHeight = document.querySelector('.sidebar-content').clientHeight

2
themes/jefklak-creative-portfolio/assets/sass/_bootstrap-minimal.sass
View File

@ -45,7 +45,7 @@ code
@media (min-width: 1200px)
padding-left: 5rem
width: 73%
width: 75%
&-content
@media (min-width: 1200px)

15
themes/jefklak-creative-portfolio/assets/sass/_codex.sass
View File

@ -233,10 +233,6 @@ article
text-align: left !important
main
float: left
@media (min-width: 768px)
width: 75%
ul li
list-style-type: circle
@ -256,17 +252,6 @@ a:hover, .link:hover
color: var(--textlink)
background-color: #d1d3bd
.img-inactive
display: block
width: 100%
.img-active
display: none
width: 100%
.pages
color: var(--accent)

121
themes/jefklak-creative-portfolio/assets/sass/_sidebar.sass
View File

@ -1,32 +1,42 @@
.sidebar
padding: 0
height: 100%
float: left
min-height: 1px
overflow: auto
vertical-align: top
display: inline-block
padding-left: 10px
background-color: var(--bgdark)
$navpercentage: 24%
@media (min-width: 768px)
width: 25%
#all
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
width: 100%
width: unset
position: unset
&-fixed
position: fixed
bottom: 0px
width: 50%
@media (min-width: 768px)
width: calc(25% - 5px)
&-fixed
@media screen and (min-width: 767px)
padding-left: 1.1em
padding-right: 1.1em
position: fixed
bottom: 0
left: 0
width: $navpercentage
&-menu
list-style-type: none
padding-left: 20px
padding-left: 0
margin-bottom: 40px
li
@ -43,23 +53,11 @@
&:hover
border: 1px solid var(--accent)
background: $bglight
&:before, a
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
border-top: 1px solid var(--accent)
@ -69,6 +67,10 @@
margin-bottom: 1rem
overflow: hidden
img
@media (min-width: 768px)
width: 100%
p
margin: 0
@ -80,64 +82,23 @@
-moz-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
top: -50px
right: 20px
width: 25px
@media (min-width: 768px)
top: -60px
right: 35px
width: 40px
top: -60px
right: 35px
width: 40px
&-header img
float: right
&-heading
font-weight: bold
font-size: 1.1rem
font-size: 1.1em
letter-spacing: 0.1em
text-transform: uppercase
padding-top: 10px
padding-left: 10px
margin-top: 0
&-date
&-description
color: var(--textlinkdark)
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
themes/jefklak-creative-portfolio/layouts/404.html
View File

@ -1,6 +1,5 @@
{{ define "main" }}
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<article>
<h1>Page not found</h1>

16
themes/jefklak-creative-portfolio/layouts/_default/baseof.html
View File

@ -14,17 +14,13 @@
<img src="/img/rss.png" alt="get RSS feed" class="no-border" />
</a>
{{ end }}
<a name="top" id="top"></a>
<div id="all">
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
{{ partial "sidebar.html" . }}
<a name="top" id="top"></a>
<main>
{{ block "main" . }}
{{ end }}
</main>
</div>
</div>
{{ partial "sidebar.html" . }}
<main>
{{ block "main" . }}
{{ end }}
</main>
</div>
{{ partial "scripts.html" . }}
<a name="bottom" id="bottom"></a>

1
themes/jefklak-creative-portfolio/layouts/_default/single.html
View File

@ -1,7 +1,6 @@
{{ define "main" }}
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<article class="h-entry" data-pagefind-body>
<header>

15
themes/jefklak-creative-portfolio/layouts/_default/terms.html
View File

@ -6,13 +6,9 @@
{{ partial "icons" . }}
<a name="top" id="top"></a>
<div id="all">
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
{{ partial "sidebar.html" . }}
<main>
{{ partial "sidebar.html" . }}
<main>
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<a class="h-card" rel="me" href="https://jefklakscodex.com/" style="border: none">
@ -52,13 +48,10 @@
</article>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
{{ partial "scripts.html" . }}
{{ partial "scripts.html" . }}
{{ partial "footer.html" . }}
</body>

1
themes/jefklak-creative-portfolio/layouts/about/list.html
View File

@ -1,6 +1,5 @@
{{ define "main" }}
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<article>
<h1>{{ .Title }}</h1>

2
themes/jefklak-creative-portfolio/layouts/partials/gamegrid.html
View File

@ -1,6 +1,4 @@
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
</a>

3
themes/jefklak-creative-portfolio/layouts/partials/mobile_nav_toggle.html
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>

46
themes/jefklak-creative-portfolio/layouts/partials/portfolio-block.html
View File

@ -1,39 +1,38 @@
<article class="box-masonry">
<a href="{{ .Permalink }}" title="{{ .Params.title }}" class="box-masonry-image">
{{ $thumb := "/img/logo.png" | absURL }}
{{ if .Params.image }}
{{ $thumb = .Params.image | absURL }}
{{ else if .Params.howlongtobeat_id }}
{{ $thumb = (printf "%scover.jpg" .Page.Permalink) | absURL }}
{{ else }}
{{- $thumb := "/img/logo.png" | absURL -}}
{{- if .Params.image -}}
{{- $thumb = .Params.image | absURL -}}
{{- else if .Params.howlongtobeat_id -}}
{{- $thumb = (printf "%scover.jpg" .Page.Permalink) | absURL -}}
{{- else -}}
<!-- taken from head-meta.html in brainabking -->
{{ $perm := .Permalink }}
{{ $base := .Site.BaseURL }}
{{ $match := findRE `!\[(.*)\]\((.+).(jpg|png|gif)` .RawContent 1 }}
{{ range $match }}
{{ $relthumb := replaceRE `!\[(.*)\]\(` "" . }}
{{ if hasPrefix $relthumb "/" }}
{{ $thumb = printf "%s%s" $base $relthumb }}
{{ else }}
{{ $thumb = printf "%s%s" $perm $relthumb }}
{{ end }}
{{ end }}
{{ end }}
{{- $perm := .Permalink -}}
{{- $base := .Site.BaseURL -}}
{{- $match := findRE `!\[(.*)\]\((.+).(jpg|png|gif)` .RawContent 1 -}}
{{- range $match -}}
{{- $relthumb := replaceRE `!\[(.*)\]\(` "" . -}}
{{- if hasPrefix $relthumb "/" -}}
{{- $thumb = printf "%s%s" $base $relthumb -}}
{{- else -}}
{{- $thumb = printf "%s%s" $perm $relthumb -}}
{{- end -}}
{{- end -}}
{{- end -}}
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Title }}" style="display: block; max-width: 100%">
</a>
<div class="box-masonry-text">
<h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
{{ if .Date }}
{{ .Date.Format (.Site.Params.dateFormat | default "02/01/2006") | $.Scratch.Set "subtitle" }}
{{- if .Date -}}
{{- .Date.Format (.Site.Params.dateFormat | default "02/01/2006") | $.Scratch.Set "subtitle" -}}
<span class="sidebar-date" style="float: right;">
<svg class='icon icon-inline'>
<use xlink:href='#cal1'></use>
</svg>
{{ $.Scratch.Get "subtitle" }}
{{- $.Scratch.Get "subtitle" -}}
</span>
{{ end }}
{{- end -}}
<div class="box-masonry-description">
<p>
{{ if isset .Params "score" }}<strong>{{ partial "scorelabel" . }} |</strong>{{ end }}
@ -41,5 +40,4 @@
</p>
</div>
</div> <!-- box-masonry-text -->
</article>

15
themes/jefklak-creative-portfolio/layouts/partials/portfolio.html
View File

@ -1,30 +1,27 @@
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
</a>
{{ if eq .Paginator.PageNumber 1 }}
{{- if eq .Paginator.PageNumber 1 -}}
<article>
{{ .Content }}
</article>
{{ end }}
{{- end -}}
<h3>Featured: <em>{{ .Title }}</em>
<span class='pages'>(Page {{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }})</span> &raquo;
</h3>
<section>
{{ range (.Paginate .Pages).Pages }}
{{ if and (gt (len .Content) 1) (ne .Params.ignore true) }}
{{- range (.Paginate .Pages).Pages -}}
{{- if and (gt (len .Content) 1) (ne .Params.ignore true) -}}
{{ partial "portfolio-block.html" . }}
{{ end }}
{{ end }}
{{- end -}}
{{- end -}}
</section>
<div style="text-align: center;">
{{- template "_internal/pagination.html" . }}
</div>
<hr/>
</div>

129
themes/jefklak-creative-portfolio/layouts/partials/sidebar.html
View File

@ -1,109 +1,108 @@
<nav class="sidebar sidebar-offcanvas">
<nav class="sidebar">
<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>
{{ $thumb := "" }}
{{ if .Params.image }}
{{ $thumb = .Params.image }}
{{ else }}
{{ if .Params.howlongtobeat_id }}
{{ $thumb = (printf "%scover.jpg" .Page.Permalink) }}
{{ end }}
{{ end }}
{{ if ne $thumb "" }}
{{- $thumb := "" -}}
{{- if .Params.image -}}
{{- $thumb = .Params.image -}}
{{- else -}}
{{- if .Params.howlongtobeat_id -}}
{{- $thumb = (printf "%scover.jpg" .Page.Permalink) -}}
{{- end -}}
{{- end -}}
{{- if ne $thumb "" -}}
<div class="sidebar-game-info">
<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"/>
{{ if ne .CurrentSection.Params.platform .Params.platform }}
{{ $platform := .CurrentSection.Title }}
{{ with .CurrentSection.Params.platform }}
{{- if ne .CurrentSection.Params.platform .Params.platform -}}
{{- $platform := .CurrentSection.Title -}}
{{- with .CurrentSection.Params.platform -}}
<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/>
{{ end }}
{{ end }}
{{- end -}}
{{- end -}}
{{ with .Params.game_genre }}
{{ $tag := replaceRE `\s` "-" . }}
{{- with .Params.game_genre -}}
{{- $tag := replaceRE `\s` "-" . -}}
&nbsp;Genre: <a href="/tags/{{ $tag | lower }}">{{ . }}</a><br/>
{{ end }}
{{ with .Params.game_release_year }}
{{- end -}}
{{- with .Params.game_release_year -}}
&nbsp;Release year: {{ . }}<br/>
{{ end }}
{{ with .Params.game_developer }}
{{- end -}}
{{- 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/>
{{ end }}
{{ with .Params.howlongtobeat_id }}
{{- end -}}
{{- with .Params.howlongtobeat_id -}}
&nbsp;<a href="https://howlongtobeat.com/game?id={{ . }}" target="_blank" rel="noopener" class="external">How long to beat</a>
{{ end }}
{{ with .Params.howlongtobeat_hrs }}
{{- end -}}
{{- with .Params.howlongtobeat_hrs -}}
: <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}<br/>
{{ end }}
{{- end -}}
</p>
</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 }}
{{ $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 }}
{{ $related := append $backlinks $forwardlinks }}
{{ if and .Params.Date $related }}
{{- $related := append $backlinks $forwardlinks -}}
{{- if and .Params.Date $related -}}
<div class="sidebar-header">
<span>Related Posts</span>
<img src="/img/gob_purse.gif" alt="related articles" />
</div>
<ul class="sidebar-menu">
{{ range first 5 $related }}
{{- range first 5 $related | uniq -}}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
<span class="sidebar-date">
{{ if isset .Params "Description" }}
<span class="sidebar-description">
{{- if isset .Params "Description" -}}
{{ .Description }}
{{ else }}
{{- else -}}
{{ .Summary }}
{{ end }}
{{- end -}}
</span>
</li>
{{ end }}
{{- end -}}
</ul>
<hr/>
{{ end }}
{{- end -}}
<div class="sidebar-header">
<span>Recent Codex Entries</span>
<img src="/img/gob_letter.gif" alt="latest articles" />
</div>
<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>
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
<span class="sidebar-date">
{{ if .Description }}
<span class="sidebar-description">
{{- if .Description -}}
{{ .Description }}
{{ else if .Summary }}
{{- else if .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.
{{ end }}
{{- end -}}
</span>
</li>
{{ end }}
{{- end -}}
</ul>
<div class="sidebar-header">
@ -111,17 +110,17 @@
<img src="/img/gob_waypoint.gif" alt="More information" />
</div>
<ul class="sidebar-menu">
{{ range .Site.Params.navlinks }}
{{- range .Site.Params.navlinks -}}
<li><a href="{{ .url }}">{{ .name }}</a></li>
{{ end }}
{{- end -}}
</ul>
<div class="copyright">
<p class="credit">
{{ with .Site.Params.copyright }}
{{- with .Site.Params.copyright -}}
{{ . | safeHTML }}
{{ end }}
{{- end -}}
</p>
</div>
</div>

2
themes/jefklak-creative-portfolio/layouts/platforms/single.html
View File

@ -1,7 +1,5 @@
{{ define "main" }}
<div class="content-column">
{{ partial "mobile_nav_toggle.html" . }}
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
</a>