Commit 39b901de authored by radow's avatar radow
Browse files

Merge branch 'post-launch-feedback'

parents b7b8d897 e327284f
:root {
--brand: #800080;
--brand-off: #cc9c00;
--body-bg: #fff;
--body-fg: #222;
--body-always-light: #fff;
--brand-bg: var(--brand-off);
--brand-fg: var(--brand);
--light: #fff;
--dark: #222;
--body-bg: var(--light);
--body-fg: var(--dark);
--tint: #aaa;
line-height: 1.5;
......@@ -31,7 +34,7 @@ main {
}
a {
color: var(--brand);
color: var(--brand-fg);
}
strong {
......@@ -46,21 +49,13 @@ h1 {
margin-top: 0;
}
h2 small{
opacity: .7;
}
ol, ul {
padding-left: 1.5rem;
}
ol ol{
ol ol {
list-style-type: lower-alpha;
}
ul.no-dots{
list-style-type: none;
}
blockquote {
border-left: 0.5em solid var(--tint);
margin-left: 0;
......@@ -96,39 +91,28 @@ header {
box-shadow: 0 0 0.4em 0.1em rgba(0,0,0,0.2);
}
.txt-bottom{
position: absolute;
vertical-align:bottom;
margin-top: 10px;
bottom: 5px;
}
.txt-align-block{
text-align: justify;
}
.top-right{
.top-right {
position: absolute;
top: 2px;
right: 15px;
top: 0.4rem;
right: 1rem;
}
.float{
float:left;
.icon-link {
display: inline-block;
text-decoration: none;
}
.icon{
.icon-link img {
width: 1.5em;
min-height: 1.5em !important;
padding-top: 10px;
margin-left: 10px;
fill: #800080;
height: 1.5em;
}
footer {
background-color: var(--body-fg);
color: var(--tint);
}
footer nav a:hover {
color: var(--brand-bg);
}
.logo {
display: flex;
......@@ -142,9 +126,8 @@ footer {
height: 10vw;
min-height: 3rem;
max-height: 6rem;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding: 0.7rem;
padding-left: 0;
}
nav {
......@@ -165,7 +148,7 @@ nav a {
text-transform: uppercase;
}
nav a:hover {
color: var(--brand);
color: var(--brand-fg);
}
.tiles {
......@@ -180,6 +163,9 @@ nav a:hover {
grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
}
.tiles-mid {
grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr));
}
.tiles-big {
grid-template-columns: repeat(auto-fill, minmax(min(25em, 100%), 1fr));
}
......@@ -193,20 +179,19 @@ nav a:hover {
}
.card {
display: flex;
width: 100%;
display: flex !important;
position: relative;
flex-direction: column;
border-top: 0.5em solid var(--brand);
text-decoration: none;
box-shadow: 6px 6px 3px 0 rgba(0, 0, 0, 1);
}
a.card {
box-shadow: 0.4rem 0.4rem 0.2rem 0 rgba(0,0,0,1);
}
a.card:hover {
box-shadow: 6px 6px 4px 1px rgba(0,0,0,1);
box-shadow: 0.4rem 0.4rem 0.3rem 0.1rem rgba(0,0,0,1);
}
.card-header {
width: 100%;
font-size: inherit;
margin: 0;
padding: 0.5em 1em;
......@@ -216,7 +201,7 @@ a.card:hover {
.card-body {
padding: 0 1em;
}
.card img {
.card-img {
min-height: 10em;
}
.card .badge {
......@@ -226,14 +211,6 @@ a.card:hover {
box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
}
.slice {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr));
grid-gap: 1.5rem;
margin: 0px;
padding: 0px;
}
.row {
display: grid;
grid-gap: 2em;
......@@ -260,6 +237,12 @@ a.card:hover {
border-radius: 0.6em;
}
.pronoun {
display: inline-block;
margin-left: 0.7rem;
opacity: 0.7;
}
.link-lite {
color: inherit;
text-decoration: none;
......@@ -274,39 +257,27 @@ a.card:hover {
font-size: 150%;
padding: 1em 2em;
margin: 0 auto;
text: center;
}
#filters label {
cursor: pointer;
margin-bottom: 6px;
}
#filter-full-game:not(:checked) ~ .tiles [data-category="full game"],
#filter-jam:not(:checked) ~ .tiles [data-category="jam"],
#filter-prototype:not(:checked) ~ .tiles [data-category="prototype"] {
#filter-all:not(:checked) ~ #filter-full-game:not(:checked) ~ .tiles [data-category="full game"],
#filter-all:not(:checked) ~ #filter-jam:not(:checked) ~ .tiles [data-category="jam"],
#filter-all:not(:checked) ~ #filter-prototype:not(:checked) ~ .tiles [data-category="prototype"] {
display: none !important;
}
#filter-all:checked ~ .tiles [data-category="prototype"],
#filter-all:checked ~ .tiles [data-category="jam"],
#filter-all:checked ~ .tiles [data-category="full game"] {
display: inherit !important;
}
#filter-full-game:not(:checked) ~ #filters [for="filter-full-game"],
#filter-jam:not(:checked) ~ #filters [for="filter-jam"],
#filter-all:not(:checked) ~ #filters [for="filter-all"],
#filter-prototype:not(:checked) ~ #filters [for="filter-prototype"] {
opacity: 0.7;
background-color: var(--brand)!important;
}
#filter-all:checked ~ #filters [for="filter-all"],
#filter-full-game:checked ~ #filters [for="filter-full-game"],
#filter-jam:checked ~ #filters [for="filter-jam"],
#filter-all:checked ~ #filters [for="filter-all"],
#filter-prototype:checked ~ #filters [for="filter-prototype"] {
background-color: var(--brand-off)!important;
background-color: var(--brand-off);
color: var(--dark)
}
#filter-all:focus-visible ~ #filters [for="filter-all"],
#filter-full-game:focus-visible ~ #filters [for="filter-full-game"],
#filter-jam:focus-visible ~ #filters [for="filter-jam"],
#filter-all:focus-visible ~ #filters [for="filter-all"],
#filter-prototype:focus-visible ~ #filters [for="filter-prototype"] {
outline: 2px dotted var(--body-fg);
}
......@@ -318,7 +289,7 @@ a.card:hover {
.mt-1 {margin-top: 0.5rem !important}
.mt-2 {margin-top: 1rem !important}
.mt-3 {margin-top: 2rem !important}
.p-2 {padding: 1rem !important; }
.p-2 {padding: 1rem !important}
.h-100 {height: 100% !important}
.w-100 {width: 100% !important}
.flex-grow-1 {flex-grow: 1 !important}
......@@ -326,8 +297,8 @@ a.card:hover {
.img-border {border: 2px solid var(--body-fg)}
.bg-body {background-color: var(--body-bg); color: var(--body-fg)}
.bg-inverse {background-color: var(--body-fg); color: var(--body-bg)}
.bg-brand {background-color: var(--brand); color: var(--body-always-light)}
.bg-brand-off {background-color: var(--brand-off); color: var(--body-always-light)}
.bg-brand {background-color: var(--brand); color: var(--light)}
.bg-brand-off {background-color: var(--brand-off); color: var(--dark)}
.visually-hidden {
position: absolute !important;
width: 0 !important;
......@@ -351,12 +322,10 @@ a.card:hover {
@media (prefers-color-scheme: dark) {
:root {
--brand: #800080;
--body-bg: #222;
--body-fg: #fff;
--body-bg: var(--dark);
--body-fg: var(--light);
--brand-bg: var(--brand);
--brand-fg: var(--brand-off);
--tint: #555;
}
a {
color: var(--brand-off);
}
}
\ No newline at end of file
}
+++
title = "Interview:"
title = "Interview"
subtitle = "test"
date = "2020-02-21"
category = "blog"
......
......@@ -4,7 +4,6 @@
{{ define "main" }}
<div class="row mt-2 mb-3">
<div class="col-md-4">
{{ if isset .Params.Links "link1" }}
<a href="{{ .Params.Links.link1 }}" class="btn btn-block bg-inverse mb-1">{{ .Params.Links.title1 }}</a>
......@@ -19,7 +18,7 @@
<a href="{{ .Params.Links.link4 }}" class="btn btn-block bg-inverse mb-1">{{ .Params.Links.title4 }}</a>
{{ end }}
</div>
<div class="col-md-8 bg-body p-2">
<h1>{{ .Title }}</h1>
{{ .Content }}
......
......@@ -3,16 +3,16 @@
{{ end }}
{{ define "main" }}
<input type="radio" form="filters" name="game-filter" class="visually-hidden" id="filter-all" checked>
<input type="radio" form="filters" name="game-filter" class="visually-hidden" id="filter-full-game">
<input type="radio" form="filters" name="game-filter" class="visually-hidden" id="filter-jam">
<input type="radio" form="filters" name="game-filter" class="visually-hidden" id="filter-prototype">
<input type="radio" form="filters" name="game-filter" class="visually-hidden" id="filter-all" checked>
<form id="filters" aria-label="Filters" class="text-center mt-2">
<label for="filter-all" class="btn bg-brand-off">All</label>
<label for="filter-full-game" class="btn bg-brand">full game</label>
<label for="filter-jam" class="btn bg-brand">jam</label>
<label for="filter-prototype" class="btn bg-brand">prototype</label>
<label for="filter-all" class="btn bg-brand mb-1">All</label>
<label for="filter-full-game" class="btn bg-brand mb-1">full game</label>
<label for="filter-jam" class="btn bg-brand mb-1">jam</label>
<label for="filter-prototype" class="btn bg-brand mb-1">prototype</label>
</form>
<ul class="tiles mt-2 mb-3">
......
{{ define "main" }}
<div class="mt-2 mb-3 text-center">
<div class="container bg-body mb-3">
<div class="home-banner">
{{ .Content }}
</div>
<div class="bg-body mt-2 mb-3">
<div class="home-banner">
{{ .Content }}
</div>
</div>
<ul class="slice no-dots mt-2 mb-3">
<li >
{{ range first 1 (where (where .Site.RegularPages "Params.category" "full game") "Params.featured" true) }}
{{ partial "front_card.html" . }}
{{ end }}
</li>
<li >
{{ range first 1 (where .Site.Pages "Params.category" "mission") }}
{{ partial "front_card.html" . }}
{{ end }}
</li>
<li >
{{ range first 1 (where (where .Site.Pages "Params.category" "blog") "Params.featured" true) }}
{{ partial "front_card.html" . }}
{{ end }}
</li>
</ul>
<div class="tiles tiles-mid mt-2 mb-3">
{{ range first 1 (where (where .Site.RegularPages "Params.category" "full game") "Params.featured" true) }}
{{ partial "front_card.html" . }}
{{ end }}
{{ range first 1 (where .Site.Pages "Params.category" "mission") }}
{{ partial "front_card.html" . }}
{{ end }}
{{ range first 1 (where (where .Site.Pages "Params.category" "blog") "Params.featured" true) }}
{{ partial "front_card.html" . }}
{{ end }}
</div>
{{ end }}
......@@ -4,7 +4,6 @@
{{ define "main" }}
<div class="row mt-2 mb-3">
<div class="col-md-4">
{{ if isset .Params.Links "link1" }}
<a href="{{ .Params.Links.link1 }}" class="btn btn-block bg-inverse mb-1">{{ .Params.Links.title1 }}</a>
......
<a href="{{ .RelPermalink }}" class="card bg-inverse h-100">
<h2 class="card-header">{{ .Title }}</h2>
{{ $banner := .Resources.GetMatch "banner-slice.*" }}
{{ $bannerslice := $banner.Resize "400x600" }}
<img src="{{ $bannerslice.RelPermalink }}" alt="{{ $bannerslice.Title }}" class="flex-grow-1 img-cover">
{{ if isset .Params "category" }}
<span class="badge bg-brand">#{{ .Params.category }}</span>
{{ end }}
</a>
\ No newline at end of file
<a href="{{ .RelPermalink }}" class="card bg-inverse">
<h2 class="card-header">{{ .Title }}</h2>
{{ $banner := .Resources.GetMatch "banner-slice.*" }}
{{ $bannerslice := $banner.Resize "400x600" }}
<img src="{{ $bannerslice.RelPermalink }}" alt="{{ $bannerslice.Title }}" class="card-img flex-grow-1 img-cover">
{{ if isset .Params "category" }}
<span class="badge bg-brand">#{{ .Params.category }}</span>
{{ end }}
</a>
......@@ -13,7 +13,7 @@
{{ end }}
{{ end }}
<img src="{{ $thumbnail.RelPermalink }}" alt="{{ $banner.Title }}" class="flex-grow-1 img-cover">
<img src="{{ $thumbnail.RelPermalink }}" alt="{{ $banner.Title }}" class="card-img flex-grow-1 img-cover">
{{ if isset .Params "category" }}
<span class="badge bg-{{ if eq .Params.category "full game" }}brand{{ else if eq .Params.category "jam" }}inverse{{ else }}body{{ end }}">#{{ .Params.category }}</span>
......
......@@ -5,47 +5,48 @@
{{ define "main" }}
<div class="row mt-2 mb-3">
<div class="col-md-4">
<div class="bg-body p-2">
<h1>Factsheet</h1>
<ul>
<li>Developer: Purple Sloth Studio e.G.</li>
{{ if isset .Params.Facts "release" }}
<li>Release Date: {{ .Params.Facts.release}}</li>
<div class="bg-body p-2">
<h1>Factsheet</h1>
<ul>
<li>Developer: Purple Sloth Studio e.G.</li>
{{ if isset .Params.Facts "release" }}
<li>Release Date: {{ .Params.Facts.release }}</li>
{{ end }}
{{ if isset .Params.Facts "plat1" }}
<li>Platforms:
<ul>
<li>{{ .Params.Facts.plat1 }}</li>
{{ if isset .Params.Facts "plat2" }}
<li>{{ .Params.Facts.plat2 }}</li>
{{ end }}
{{ if isset .Params.Facts "plat1" }}
<li>Platforms:
<ul>
<li>{{ .Params.Facts.plat1}}</li>
{{ if isset .Params.Facts "plat2" }}
<li>{{ .Params.Facts.plat2}}</li>
{{end}}
{{ if isset .Params.Facts "plat3" }}
<li>{{ .Params.Facts.plat3}}</li>
{{end}}
</ul>
</li>
{{ if isset .Params.Facts "plat3" }}
<li>{{ .Params.Facts.plat3 }}</li>
{{ end }}
</ul>
</li>
{{ end }}
<li>Website: <a href="https://purplesloth.studio/games/chronescher/">purplesloth.studio</a></li>
</ul>
</div>
<div class="bg-body p-2">
<h1>Contact</h1>
<li>Website: <a href="https://purplesloth.studio/games/chronescher/">purplesloth.studio</a></li>
</ul>
</div>
<br>
<div class="bg-body p-2">
<h1>Contact</h1>
<h3>Inquiries</h3>
{{ if isset .Params.Contact "address" }}
<a href="mailto:{{ .Params.Contact.address }}">{{ .Params.Contact.address }}</a>
{{ else }}
<a href="mailto:Info@purplesloth.studio">info@purplesloth.studio</a>
{{ end }}
<h3>Twitter</h3>
<a href="https://twitter.com/studio_sloth">@studio_sloth</a>
<h3>Web</h3>
<a href="https://purplesloth.studio/">purplesloth.studio/</a>
<h2>Inquiries</h2>
{{ if isset .Params.Contact "address" }}
<a href="mailto:{{ .Params.Contact.address }}">{{ .Params.Contact.address }}</a>
{{ else }}
<a href="mailto:Info@purplesloth.studio">info@purplesloth.studio</a>
{{ end }}
</div>
<h2>Twitter</h2>
<a href="https://twitter.com/studio_sloth">@studio_sloth</a>
<h2>Web</h2>
<a href="https://purplesloth.studio/">purplesloth.studio/</a>
</div>
<br>
{{ if isset .Params.Links "de" }}
<a href="{{ .Params.Links.de }}" class="btn btn-block btn-big bg-brand mb-1">Deutsch</a>
{{ end }}
......@@ -56,50 +57,53 @@
<a href="{{ .Params.Links.gamepage }}" class="btn btn-block btn-big bg-brand mb-1">Game Page</a>
{{ end }}
</div>
<div class="col-md-8">
<div class="bg-body p-2">
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ if eq .Params.lang "en" }}
<h2>Logo & Title</h2>
<ul class="tiles mb-3">
{{ range .Resources.Match "logos/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="w-100 img-cover"></a></li>
{{ end }}
</ul>
{{ range .Resources.Match "logos/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="w-100 img-cover"></a></li>
{{ end }}
</ul>
<h2>Images</h2>
<ul class="tiles mb-3">
{{ range .Resources.Match "screenshots/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="h-100 w-100 img-cover img-border"></a></li>
{{ end }}
</ul>
{{range (where .Site.Pages "Type" "=" "aboutPPSen")}}
{{ .Content }}
{{ range .Resources.Match "screenshots/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="h-100 w-100 img-cover img-border"></a></li>
{{ end }}
{{end}}
</ul>
{{ range (where .Site.Pages "Type" "=" "aboutPPSen") }}
{{ .Content }}
{{ end }}
{{ end }}
{{ if eq .Params.lang "de" }}
<h2>Logo & Titel</h2>
<ul class="tiles mb-3">
{{ range .Resources.Match "logos/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="w-100 img-cover"></a></li>
{{ end }}
</ul>
{{ range .Resources.Match "logos/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="w-100 img-cover"></a></li>
{{ end }}
</ul>
<h2>Bilder</h2>
<ul class="tiles mb-3">
{{ range .Resources.Match "screenshots/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="h-100 w-100 img-cover img-border"></a></li>
{{ end }}
</ul>
{{range (where .Site.Pages "Type" "=" "aboutPPSde")}}
{{ .Content }}
{{ range .Resources.Match "screenshots/*" }}
{{ $thumbnail := .Resize "400x" }}
<li><a href="{{ .RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" class="h-100 w-100 img-cover img-border"></a></li>
{{ end }}
{{end}}
</ul>
{{ range (where .Site.Pages "Type" "=" "aboutPPSde") }}
{{ .Content }}
{{ end }}
{{ end }}
</div>
</div>
</div>
{{ end }}
\ No newline at end of file
{{ end }}
......@@ -6,29 +6,30 @@
<ul class="tiles tiles-big mt-2 mb-3">
{{ range .Pages }}
<li class="card bg-body">
<h2 class="card-header">{{ .Params.name }}&nbsp;&nbsp;&nbsp;<small>{{ .Params.pronoun }}</small></h2>
<div class="card-body txt-align-block">
{{ .Content }}
<br><br>
<span class = "txt-bottom"><strong>Part of Resorts: </strong>{{ .Params.resorts }}</span>
<div class = "top-right">
{{ if isset .Params "link" }}
<a href="{{ .Params.link }}">
<picture class="float">
<source srcset="{{ "/gfx/webdark.svg" | relURL }}" media="(prefers-color-scheme:dark)">
<img src="{{ "/gfx/weblight.svg" | relURL }}" class="icon" alt="">
</picture>
<h2 class="card-header bg-inverse">{{ .Params.name }} <small class="pronoun">{{ .Params.pronoun }}</small></h2>
<div class="top-right">
{{ if isset .Params "link" }}
<a href="{{ .Params.link }}" class="icon-link">
<picture>
<source srcset="{{ "/gfx/weblight.svg" | relURL }}" media="(prefers-color-scheme: dark)">
<img src="{{ "/gfx/webdark.svg" | relURL }}" alt="website">
</picture>
</a>
{{end}}
{{ if isset .Params "twitter" }}
<a href="{{ .Params.twitter }}">
<picture class="float">
<source srcset="{{ "/gfx/twitterdark.svg" | relURL }}" media="(prefers-color-scheme:dark)">
<img src="{{ "/gfx/twitterlight.svg" | relURL }}" class="icon" alt="">
</picture>
{{ end }}
{{ if isset .Params "twitter" }}
<a href="{{ .Params.twitter }}" class="icon-link">
<picture>
<source srcset="{{ "/gfx/twitterlight.svg" | relURL }}" media="(prefers-color-scheme: dark)">
<img src="{{ "/gfx/twitterdark.svg" | relURL }}" alt="twitter">
</picture>
</a>
{{end}}
</div>
{{ end }}
</div>
<div class="card-body flex-grow-1">
{{ .Content }}
</div>
<div class="card-body mb-1">
<strong>Part of Resorts: </strong>{{ .Params.resorts }}
</div>
</li>