Landing page (#64)

* Implement landing page

* Fix links

* Fix responsiveness

* Fix body style

* Remove wrong margin

* Add backdrop blur
Add footer

* Clean up

* Don't show about pages and such in main RSS feed.

* Hide OSC for now

* Make SS14 logo a link to the main website.

* Make background image cover

---------

Co-authored-by: Pieter-Jan Briers <[email protected]>

assets/scss/landing_page_trailer.scss

@@ -0,0 +1,60 @@
+#trailer-landing-page {
+	display: block;
+	background-image: none;
+	height: fit-content;
+	min-height: 100vh
+}
+
+.trailer-header
+{
+	position: relative;
+	height: fit-content;
+	min-height: 100vh;
+}
+.trailer-header::before
+{
+	content: "";
+	position: absolute;
+	top: 0; left: 0;
+	width: 100%; height: 100%;
+	background-image: url('/images/home/gallery-bar.webp');
+	background-size: cover;
+	filter: grayscale(100%);
+}
+
+.trailer-header > *
+{
+	position: relative;
+}
+
+.logo-link {
+	filter: brightness(1.5);
+}
+
+.trailer-header-logos {
+	background-color: #00000040;
+	box-shadow: 0 0 6px 4px #00000040;
+	max-width: 1000px;
+	backdrop-filter: blur(2px);
+}
+
+.trailer-header-logos > li {
+	display: flex;
+	list-style: none;
+	justify-content: center;
+	flex: 1 0 25%;
+}
+
+@media (max-width: 700px) {
+	.trailer-header-logos > li {
+		flex: revert !important;
+	}
+
+	.trailer-header-logos {
+		flex-direction: column;
+	}
+
+	.trailer-header:before {
+		background-position-x: 415px;
+	}
+}

assets/scss/main.scss

@@ -65,6 +65,7 @@ $fa-font-path: "/fonts/fontawesome";
 @import "toc.scss";
 @import "media.scss";
 @import "serverBrowser.scss";
+@import "landing_page_trailer.scss";
 
 @import "fonts/fira_code.scss";
 @import "fonts/montserrat.scss";

config.yml

@@ -4,6 +4,9 @@ title: "Space Station 14"
 ignoreFiles: ["\\.ts$", "tsconfig.json$"]
 mainSections: ["post"]
 
+params:
+  mainFeedSections: ["post", "updates"]
+
 # PYGMENTS (Syntax Highlighting) settings!
 # I couldn't get Chroma to parse C# at all.
 PygmentsUseClassic: true

content/landing_page/trailer.md

@@ -0,0 +1,6 @@
++++
+title = "Links"
+description = "A collection of links related to space station 14"
+# This is a section page so have to force-override the layout to be single page.
+layout = "trailer"
++++

layouts/home.xml

@@ -0,0 +1,71 @@
+{{- /* Deprecate site.Author.email in favor of site.Params.author.email */}}
+{{- $authorEmail := "" }}
+{{- with site.Params.author }}
+  {{- if reflect.IsMap . }}
+    {{- with .email }}
+      {{- $authorEmail = . }}
+    {{- end }}
+  {{- end }}
+{{- else }}
+  {{- with site.Author.email }}
+    {{- $authorEmail = . }}
+    {{- warnf "The author key in site configuration is deprecated. Use params.author.email instead." }}
+  {{- end }}
+{{- end }}
+
+{{- /* Deprecate site.Author.name in favor of site.Params.author.name */}}
+{{- $authorName := "" }}
+{{- with site.Params.author }}
+  {{- if reflect.IsMap . }}
+    {{- with .name }}
+      {{- $authorName = . }}
+    {{- end }}
+  {{- else }}
+    {{- $authorName  = . }}
+  {{- end }}
+{{- else }}
+  {{- with site.Author.name }}
+    {{- $authorName = . }}
+    {{- warnf "The author key in site configuration is deprecated. Use params.author.name instead." }}
+  {{- end }}
+{{- end }}
+
+{{- $pctx := . }}
+{{- if .IsHome }}{{ $pctx = .Site }}{{ end }}
+{{- $pages := slice }}
+{{- if or $.IsHome $.IsSection }}
+{{- $pages = (where $pctx.RegularPages "Section" "in" .Site.Params.mainFeedSections) }}
+{{- else }}
+{{- $pages = $pctx.Pages }}
+{{- end }}
+{{- $limit := .Site.Config.Services.RSS.Limit }}
+{{- if ge $limit 1 }}
+{{- $pages = $pages | first $limit }}
+{{- end }}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo</generator>
+    <language>{{ site.Language.LanguageCode }}</language>{{ with $authorEmail }}
+    <managingEditor>{{.}}{{ with $authorName }} ({{ . }}){{ end }}</managingEditor>{{ end }}{{ with $authorEmail }}
+    <webMaster>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</webMaster>{{ end }}{{ with .Site.Copyright }}
+    <copyright>{{ . }}</copyright>{{ end }}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" }}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end }}
+    {{- range $pages }}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Summary | transform.XMLEscape | safeHTML }}</description>
+    </item>
+    {{- end }}
+  </channel>
+</rss>

layouts/landing_page/trailer.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="utf-8" />
+
+	{{ partial "meta.html" . }}
+
+	{{ if .Title }}<title>{{ .Title }} - SS14</title>{{ else }}<title>Space Station 14</title>{{ end }}
+	<link rel="canonical" href="{{ .Permalink }}" />
+	{{ range .AlternativeOutputFormats -}}
+	{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+	{{ end -}}
+
+	{{ partial "head_includes.html" }}
+</head>
+<body id="trailer-landing-page" lang="en">
+<div class="trailer-header d-flex flex-column w-100 justify-content-center align-items-center">
+	<a href="/">
+		<img id="logo" class="mb-5" src="/images/logo/ss14_logo_big_en.svg" alt="The large logo of Space Station 14" height="360" />
+	</a>
+	<ul class="d-flex flex-wrap trailer-header-logos align-items-baseline p-3 gap-5">
+		<li>
+			<a href="https://store.steampowered.com/app/1255460/Space_Station_14/" target="_blank">
+				<img class="mx-2 logo-link" src="/images/logo/steam.svg" alt="Steam logo" height="64">
+			</a>
+		</li>
+		<li>
+			<a href="https://discord.ss14.io/" target="_blank">
+				<img class="mx-2 logo-link" src="/images/logo/discord.svg" alt="Discord logo" height="64">
+			</a>
+		</li>
+		<li>
+			<a href="https://github.com/space-wizards/space-station-14" target="_blank">
+				<img class="mx-2 logo-link" src="/images/logo/GitHub_Lockup_Light.svg" alt="Github logo" height="50">
+			</a>
+		</li>
+		<li>
+			<a href="https://www.patreon.com/spacestation14" class="d-flex align-items-center align-self-center" target="_blank" style="filter: invert()">
+				<img class="ml-2 logo-link" src="/images/logo/PATREON_SYMBOL_1_BLACK_RGB.svg" alt="Patreon Symbol" height="50">
+				<img class="mr-2 logo-link" src="/images/logo/PATREON_WORDMARK_1_BLACK_RGB.svg" alt="Patreon Wordmark" width="200">
+			</a>
+		</li>
+<!-- 		<li style="margin-left: -30px;" class="align-self-center">
+			<a href="https://opencollective.com/space-station-14" target="_blank" style="margin: -26px 0 !important;">
+				<img class="mx-2 logo-link" src="/images/logo/opencollective-ar21.svg" style="filter: saturate(0%) brightness(2);" alt="Open Collective logo link" height="120">
+			</a>
+		</li> -->
+	</ul>
+</div>
+<footer class="h-6 bottom-links">
+	<ul class="m-2 p-0 d-flex flex-wrap justify-content-center">
+		<li><a href="https://github.com/space-wizards" title="Github"><i class="fab fa-github"></i> GitHub</a></li>
+		<li><a href="https://docs.spacestation14.io" title="Documentation"><i class="fas fa-file-alt"></i> Documentation</a></li>
+		<li><a href="https://store.steampowered.com/app/1255460/Space_Station_14/" title="Steam"><i class="fab fa-steam-symbol"></i> Steam</a></li>
+		<li><a href="https://www.patreon.com/spacestation14" title="Patreon"><i class="fab fa-patreon"></i> Patreon</a></li>
+		<li><a href="https://discord.ss14.io/" title="Discord"><i class="fab fa-discord"></i> Discord</a></li>
+		<li><a href="https://forum.ss14.io" title="SS14 Forums"><i class="fas fa-comments"></i> Forum</a></li>
+		<li><a href="https://lemmy.spacestation14.com" title="Lemmy"><i class="fas fa-stream"></i> Lemmy</a></li>
+		<li><a href="https://mastodon.gamedev.place/@spacestation14" rel="me" title="RSS"><i class="fab fa-mastodon"></i> Mastodon</a></li>
+		<li><a href="/about/contact/#email" title="Email"><i class="fas fa-envelope"></i> Email</a></li>
+		<li><a href="/index.xml" title="RSS"><i class="fas fa-rss"></i> RSS</a></li>
+	</ul>
+</footer>
+</body>
+</html>
+