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!
|
||||
|
||||
- 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)**.
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ image: "img/articles/warioland.gif"
|
|||
date: "2018-05-27"
|
||||
title: "Wario Land: a Retrospective"
|
||||
game_platform: gbc
|
||||
game_name: "Wario Land 3"
|
||||
game_release_year: 2000
|
||||
game_developer: 'Nintendo'
|
||||
tags:
|
||||
- 'Super Mario Land 3: Super Wario Land'
|
||||
- 'Wario Land II'
|
||||
|
|
|
|||
|
|
@ -3,3 +3,6 @@ title: Games
|
|||
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_hrs: 8.5
|
||||
game_name: 'Irony Curtain'
|
||||
game_release_year: 2019
|
||||
game_developer: 'Artifex Mundi'
|
||||
game_platform: 'switch'
|
||||
game_genre: 'adventure'
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ howlongtobeat_id: 9390
|
|||
howlongtobeat_hrs: 7.5
|
||||
game_name: Super Metroid
|
||||
game_platform: SNES
|
||||
game_year: 1994
|
||||
game_release_year: 1994
|
||||
score: 5
|
||||
game_developer: Nintendo
|
||||
game_genre: metroidvania
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ score: 2
|
|||
howlongtobeat_hrs: 25.5
|
||||
game_name: 'Titan Quest'
|
||||
game_genre: 'Hack and Slash'
|
||||
game_release_year: '2006 (2018)'
|
||||
game_release_year: 2006
|
||||
game_developer: 'Iron Lore Entertainment'
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ aliases:
|
|||
- /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
|
||||
|
||||
h4, .h4
|
||||
font-size: 1.4rem
|
||||
font-size: 1.2rem
|
||||
font-weight: 700
|
||||
|
||||
ul, ol
|
||||
|
|
@ -314,6 +314,7 @@ a:hover, .box-masonry h4 a:hover, .link:hover
|
|||
|
||||
.score
|
||||
border: none
|
||||
width: 1em
|
||||
&-on
|
||||
opacity: 1
|
||||
&-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 'sidebar'
|
||||
@import 'toot'
|
||||
@import 'icons'
|
||||
@import 'icons'
|
||||
@import 'grid'
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
|
||||
{{ end }}
|
||||
{{ range $pages }}
|
||||
{{ if in $allowedRssSections .Section }}
|
||||
{{ if and (in $allowedRssSections .Section) (gt (len .Content) 1) }}
|
||||
<item>
|
||||
<title>{{ .Title }}</title>
|
||||
<link>{{ .Permalink }}</link>
|
||||
|
|
|
|||
|
|
@ -27,33 +27,13 @@
|
|||
</header>
|
||||
|
||||
<div class="e-content">
|
||||
{{ .Content | safeHTML }}
|
||||
|
||||
{{ if isset $.Params "score" }}
|
||||
<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>
|
||||
{{ with .Content }}
|
||||
{{ . | safeHTML }}
|
||||
{{ else }}
|
||||
<p>No detailed review yet. Check back soon! </p>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "score" . }}
|
||||
</div>
|
||||
|
||||
{{ if isset $.Params "played_on" }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "portfoliolite.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -39,8 +39,15 @@
|
|||
<p>
|
||||
{{ if .Description }}
|
||||
{{ .Description }}
|
||||
{{ else }}
|
||||
{{ else if .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 }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
</h3>
|
||||
|
||||
{{ range (.Paginate .Pages).Pages }}
|
||||
{{ partial "portfolio-block.html" . }}
|
||||
{{ if gt (len .Content) 1 }}
|
||||
{{ partial "portfolio-block.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<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>
|
||||
{{ end }}
|
||||
{{ 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 }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
{{ end }}
|
||||
|
||||
<div class="sidebar-header">
|
||||
<span>New Posts</span>
|
||||
<span>Recent Codex Entries</span>
|
||||
<img src="/img/gob_letter.gif" alt="latest articles" />
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
|
|
@ -76,10 +80,12 @@
|
|||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a><br/>
|
||||
<span class="sidebar-date">
|
||||
{{ if isset .Params "Description" }}
|
||||
{{ if .Description }}
|
||||
{{ .Description }}
|
||||
{{ else }}
|
||||
{{ else if .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 }}
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -15,28 +15,19 @@
|
|||
{{ .Content | safeHTML }}
|
||||
</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 }}
|
||||
{{ range sort (where .Site.Pages ".Section" "in" (slice "games" "articles")) ".Params.game_name" "asc" }}
|
||||
{{ $platform := .Params.game_platform | lower }}
|
||||
{{ if eq $targetplatform $platform }}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}">
|
||||
{{ if .Params.game_name }}
|
||||
{{ .Params.game_name }}
|
||||
{{ else }}
|
||||
{{ .Title }}
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ partial "portfoliolite-block.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<a href="/platforms">Browse all platforms »</a><br/>
|
||||
<a href="/tags">Browse the appendix »</a>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue