redesign game overview using grid layout inspired by Chris Burnells /music page, thx!
This commit is contained in:
parent
b6edaceee0
commit
a79c7ad180
|
@ -21,7 +21,7 @@ That healthy cocktail left a lasting impression - and netted me the Codex (and g
|
||||||
|
|
||||||
> Stay Awhile and Listen!
|
> Stay Awhile and Listen!
|
||||||
|
|
||||||
- Looking for something specific? **[Browse the Appendix](/tags)**.
|
- **Looking for something** specific? Browse by [all games](/games) | [per platform](/platforms) | [the appendix](/tags).
|
||||||
- Want to stay up to date? **[Subscribe to the RSS feed](/index.xml)**.
|
- Want to stay up to date? **[Subscribe to the RSS feed](/index.xml)**.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
@ -3,6 +3,9 @@ image: "img/articles/warioland.gif"
|
||||||
date: "2018-05-27"
|
date: "2018-05-27"
|
||||||
title: "Wario Land: a Retrospective"
|
title: "Wario Land: a Retrospective"
|
||||||
game_platform: gbc
|
game_platform: gbc
|
||||||
|
game_name: "Wario Land 3"
|
||||||
|
game_release_year: 2000
|
||||||
|
game_developer: 'Nintendo'
|
||||||
tags:
|
tags:
|
||||||
- 'Super Mario Land 3: Super Wario Land'
|
- 'Super Mario Land 3: Super Wario Land'
|
||||||
- 'Wario Land II'
|
- 'Wario Land II'
|
||||||
|
|
|
@ -3,3 +3,6 @@ title: Games
|
||||||
ignore: true
|
ignore: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
This is the entire Codex game database, unfiltered.
|
||||||
|
|
||||||
|
Browse the Codex: [all games](/games) | [by platform](/platforms) | [the appendix](/tags).
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
title: "Alfred Chicken"
|
||||||
|
date: 2022-04-08
|
||||||
|
game_platform: gb
|
||||||
|
score: 3
|
||||||
|
cost: 13
|
||||||
|
howlongtobeat_id: 337
|
||||||
|
howlongtobeat_hrs: 3
|
||||||
|
game_name: 'Alfred Chicken'
|
||||||
|
game_genre: '2D Platformer'
|
||||||
|
game_release_year: 1993
|
||||||
|
game_developer: 'Twilight'
|
||||||
|
---
|
||||||
|
|
|
@ -5,6 +5,7 @@ score: 4
|
||||||
howlongtobeat_id: 67275
|
howlongtobeat_id: 67275
|
||||||
howlongtobeat_hrs: 8.5
|
howlongtobeat_hrs: 8.5
|
||||||
game_name: 'Irony Curtain'
|
game_name: 'Irony Curtain'
|
||||||
|
game_release_year: 2019
|
||||||
game_developer: 'Artifex Mundi'
|
game_developer: 'Artifex Mundi'
|
||||||
game_platform: 'switch'
|
game_platform: 'switch'
|
||||||
game_genre: 'adventure'
|
game_genre: 'adventure'
|
||||||
|
|
|
@ -5,7 +5,7 @@ howlongtobeat_id: 9390
|
||||||
howlongtobeat_hrs: 7.5
|
howlongtobeat_hrs: 7.5
|
||||||
game_name: Super Metroid
|
game_name: Super Metroid
|
||||||
game_platform: SNES
|
game_platform: SNES
|
||||||
game_year: 1994
|
game_release_year: 1994
|
||||||
score: 5
|
score: 5
|
||||||
game_developer: Nintendo
|
game_developer: Nintendo
|
||||||
game_genre: metroidvania
|
game_genre: metroidvania
|
||||||
|
|
|
@ -13,7 +13,7 @@ score: 2
|
||||||
howlongtobeat_hrs: 25.5
|
howlongtobeat_hrs: 25.5
|
||||||
game_name: 'Titan Quest'
|
game_name: 'Titan Quest'
|
||||||
game_genre: 'Hack and Slash'
|
game_genre: 'Hack and Slash'
|
||||||
game_release_year: '2006 (2018)'
|
game_release_year: 2006
|
||||||
game_developer: 'Iron Lore Entertainment'
|
game_developer: 'Iron Lore Entertainment'
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -4,4 +4,5 @@ aliases:
|
||||||
- /appendix
|
- /appendix
|
||||||
---
|
---
|
||||||
|
|
||||||
Browse [by platform](#byplatform), [by game/tag](#bytag), or by [by article](#byarticle).
|
The appendix [by platform](#byplatform), [by game/tag](#bytag), or by [by article](#byarticle).<br/>
|
||||||
|
See also: browse by [all games](/games) | [per platform](/platforms) | [the appendix](/tags).
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
|
@ -75,7 +75,7 @@ h3, .h3
|
||||||
margin-bottom: 2rem
|
margin-bottom: 2rem
|
||||||
|
|
||||||
h4, .h4
|
h4, .h4
|
||||||
font-size: 1.4rem
|
font-size: 1.2rem
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
|
|
||||||
ul, ol
|
ul, ol
|
||||||
|
@ -314,6 +314,7 @@ a:hover, .box-masonry h4 a:hover, .link:hover
|
||||||
|
|
||||||
.score
|
.score
|
||||||
border: none
|
border: none
|
||||||
|
width: 1em
|
||||||
&-on
|
&-on
|
||||||
opacity: 1
|
opacity: 1
|
||||||
&-off
|
&-off
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
|
||||||
|
.gamegrid
|
||||||
|
display: grid
|
||||||
|
margin-bottom: 2rem
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr))
|
||||||
|
column-gap: 1em
|
||||||
|
row-gap: 1.2em
|
||||||
|
|
||||||
|
*
|
||||||
|
margin-block-start: 0.6rem
|
||||||
|
|
||||||
|
.screenshot
|
||||||
|
max-inline-size: 100%
|
||||||
|
block-size: auto
|
||||||
|
height: 30vh
|
||||||
|
object-fit: cover
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0
|
|
@ -3,4 +3,5 @@
|
||||||
@import 'codex'
|
@import 'codex'
|
||||||
@import 'sidebar'
|
@import 'sidebar'
|
||||||
@import 'toot'
|
@import 'toot'
|
||||||
@import 'icons'
|
@import 'icons'
|
||||||
|
@import 'grid'
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
|
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ range $pages }}
|
{{ range $pages }}
|
||||||
{{ if in $allowedRssSections .Section }}
|
{{ if and (in $allowedRssSections .Section) (gt (len .Content) 1) }}
|
||||||
<item>
|
<item>
|
||||||
<title>{{ .Title }}</title>
|
<title>{{ .Title }}</title>
|
||||||
<link>{{ .Permalink }}</link>
|
<link>{{ .Permalink }}</link>
|
||||||
|
|
|
@ -27,33 +27,13 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="e-content">
|
<div class="e-content">
|
||||||
{{ .Content | safeHTML }}
|
{{ with .Content }}
|
||||||
|
{{ . | safeHTML }}
|
||||||
{{ if isset $.Params "score" }}
|
{{ else }}
|
||||||
<p>
|
<p>No detailed review yet. Check back soon! </p>
|
||||||
{{ $score := $.Params.score }}
|
|
||||||
<strong>Final verdict</strong>: {{ $score }}/5
|
|
||||||
{{ range after 0 (seq $score)}}
|
|
||||||
<img src="/img/random/4.gif" class="score score-on" title="Score: {{ $score }}/5" />
|
|
||||||
{{ end }}
|
|
||||||
{{ range after 0 (seq (sub 5 $score))}}
|
|
||||||
<img src="/img/random/4.gif" class="score score-off" title="Score: {{ $score }}/5" />
|
|
||||||
{{ end }}
|
|
||||||
{{ if eq $score 5 }}
|
|
||||||
It was amazing!
|
|
||||||
{{ else if eq $score 4 }}
|
|
||||||
I really liked it!
|
|
||||||
{{ else if eq $score 3 }}
|
|
||||||
I liked it.
|
|
||||||
{{ else if eq $score 2 }}
|
|
||||||
It was OK.
|
|
||||||
{{ else if eq $score 1 }}
|
|
||||||
I did not like it.
|
|
||||||
{{ else }}
|
|
||||||
Horrible.
|
|
||||||
{{ end}}
|
|
||||||
</p>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
{{ partial "score" . }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ if isset $.Params "played_on" }}
|
{{ if isset $.Params "played_on" }}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ partial "portfoliolite.html" . }}
|
||||||
|
{{ end }}
|
|
@ -39,8 +39,15 @@
|
||||||
<p>
|
<p>
|
||||||
{{ if .Description }}
|
{{ if .Description }}
|
||||||
{{ .Description }}
|
{{ .Description }}
|
||||||
{{ else }}
|
{{ else if .Summary }}
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
|
{{ else }}
|
||||||
|
<p>
|
||||||
|
A {{ .Params.game_genre }} game on the {{ .Params.game_platform }} By {{ .Params.game_developer }} in {{ .Params.game_release_year }} that takes about {{ .Params.howlongtobeat_hrs }} hour(s) to beat.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{{ partial "score" . }}
|
||||||
|
</p>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,9 @@
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
{{ range (.Paginate .Pages).Pages }}
|
{{ range (.Paginate .Pages).Pages }}
|
||||||
{{ partial "portfolio-block.html" . }}
|
{{ if gt (len .Content) 1 }}
|
||||||
|
{{ partial "portfolio-block.html" . }}
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
<article>
|
||||||
|
<a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
|
||||||
|
{{ $thumb := "/img/logo.png" | absURL }}
|
||||||
|
{{ if .Params.image }}
|
||||||
|
{{ $thumb = .Params.image | absURL }}
|
||||||
|
{{ else if .Params.howlongtobeat_id }}
|
||||||
|
{{ $thumb = printf "%s%d%s" "img/hltb/" .Params.howlongtobeat_id ".jpg" | 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 }}
|
||||||
|
<img loading="lazy" src="{{ $thumb }}" alt="thumbnail of {{ .Params.game_name }}" class="img-responsive img-inactive screenshot">
|
||||||
|
</a>
|
||||||
|
<h4><a href="{{ .Permalink }}">{{ .Params.game_name }}</a></h4>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
{{ .Params.game_developer }} ({{ .Params.game_release_year }})<br/>
|
||||||
|
{{ with .Params.howlongtobeat_hrs }}
|
||||||
|
<code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}.
|
||||||
|
{{ end }}
|
||||||
|
</p>
|
||||||
|
{{ .Scratch.Set "simplescore" 1 }}
|
||||||
|
{{ partial "score" . }}
|
||||||
|
</div>
|
||||||
|
</article>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<div class="col-xs-12 col-sm-8 col-md-9 content-column">
|
||||||
|
{{ partial "mobile_nav_toggle.html" . }}
|
||||||
|
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<a class="h-card" rel="me" href="{{ .Site.BaseURL }}" style="border: none">
|
||||||
|
<img src="/img/logo.png" class="logo" alt="jefklaks codex logo" />
|
||||||
|
</a>
|
||||||
|
<article>
|
||||||
|
{{ .Content }}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<h2>Game Codex »</h2>
|
||||||
|
|
||||||
|
<div class="gamegrid">
|
||||||
|
{{ range .Pages }}
|
||||||
|
{{ partial "portfoliolite-block.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,33 @@
|
||||||
|
{{ $simplescore := $.Scratch.Get "simplescore" }}
|
||||||
|
{{ if isset $.Params "score" }}
|
||||||
|
<p>
|
||||||
|
{{ $score := $.Params.score }}
|
||||||
|
{{ if eq $simplescore 1 }}
|
||||||
|
{{ else }}
|
||||||
|
<strong>Verdict</strong>: {{ $score }}/5
|
||||||
|
{{ end }}
|
||||||
|
{{ range after 0 (seq $score)}}
|
||||||
|
<img src="/img/random/4.gif" class="score score-on" title="Score: {{ $score }}/5" />
|
||||||
|
{{ end }}
|
||||||
|
{{ range after 0 (seq (sub 5 $score))}}
|
||||||
|
<img src="/img/random/4.gif" class="score score-off" title="Score: {{ $score }}/5" />
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if eq $simplescore 1 }}
|
||||||
|
{{ else }}
|
||||||
|
{{ if eq $score 5 }}
|
||||||
|
It was amazing!
|
||||||
|
{{ else if eq $score 4 }}
|
||||||
|
I really liked it!
|
||||||
|
{{ else if eq $score 3 }}
|
||||||
|
I liked it.
|
||||||
|
{{ else if eq $score 2 }}
|
||||||
|
It was OK.
|
||||||
|
{{ else if eq $score 1 }}
|
||||||
|
I did not like it.
|
||||||
|
{{ else }}
|
||||||
|
Horrible.
|
||||||
|
{{ end}}
|
||||||
|
{{ end }}
|
||||||
|
</p>
|
||||||
|
{{ end }}
|
|
@ -36,7 +36,11 @@
|
||||||
<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> hours<br/>
|
: <code>{{ . }}</code> hr{{ if gt . 1}}s{{ end }}<br/>
|
||||||
|
{{ end }}
|
||||||
|
{{ $name := .Params.game_name }}
|
||||||
|
{{ with .Params.cost }}
|
||||||
|
<a href="https://www.pricecharting.com/search-products?q={{ $name }}&type=prices">Game Value</a>: <code>€{{ . }}</code><br/>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -68,7 +72,7 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<span>New Posts</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">
|
||||||
|
@ -76,10 +80,12 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
||||||
<span class="sidebar-date">
|
<span class="sidebar-date">
|
||||||
{{ if isset .Params "Description" }}
|
{{ if .Description }}
|
||||||
{{ .Description }}
|
{{ .Description }}
|
||||||
{{ else }}
|
{{ else if .Summary }}
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
|
{{ else }}
|
||||||
|
A {{ .Params.game_genre }} game on the {{ .Params.game_platform }} 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>
|
||||||
|
|
|
@ -15,28 +15,19 @@
|
||||||
{{ .Content | safeHTML }}
|
{{ .Content | safeHTML }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Codex entries »</h2>
|
Browse the Codex: <a href="/games">all games</a> | <a href="/platforms">by platform</a> | <a href="/tags">the appendix</a><br/>
|
||||||
|
|
||||||
<ul>
|
<h2>Games »</h2>
|
||||||
|
|
||||||
|
<div class="gamegrid">
|
||||||
{{ $targetplatform := .Params.platform | lower }}
|
{{ $targetplatform := .Params.platform | lower }}
|
||||||
{{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }}
|
{{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }}
|
||||||
{{ $platform := .Params.game_platform | lower }}
|
{{ $platform := .Params.game_platform | lower }}
|
||||||
{{ if eq $targetplatform $platform }}
|
{{ if eq $targetplatform $platform }}
|
||||||
<li>
|
{{ partial "portfoliolite-block.html" . }}
|
||||||
<a href="{{ .Permalink }}">
|
|
||||||
{{ if .Params.game_name }}
|
|
||||||
{{ .Params.game_name }}
|
|
||||||
{{ else }}
|
|
||||||
{{ .Title }}
|
|
||||||
{{ end }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
<a href="/platforms">Browse all platforms »</a><br/>
|
|
||||||
<a href="/tags">Browse the appendix »</a>
|
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue