added scss and layouts

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) <year> <owner>. All rights reserved.
+Copyright (c) 2022 Beet Box. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

assets/sass/cards.scss

@@ -0,0 +1,81 @@
+@mixin shadow {
+	box-shadow: 0px 4px 8px black;
+}
+
+.shadow {
+	@include shadow
+}
+
+.float-on-hover {
+	transition: (all 0.25s cubic-bezier(0.2,0.1,0.47,1));
+	&:hover {
+		transform: (translateY(-10px));
+	}
+}
+
+article {
+	display: flex;
+	background-color: $dark;
+	border-radius: 10px;
+}
+
+article.card {
+	height: 420px;
+	flex: 1 1 305px;
+	flex-direction: column;
+	overflow: hidden;
+
+	div.article-info-container, div.article-image {
+		overflow: hidden;
+		flex: 1;
+	}
+
+	div.article-info {
+		box-sizing: border-box;
+		padding: 25px;
+		height: 200px;
+		display: flex;
+		flex-direction: column;
+
+		a.article-title {
+			flex: 2;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			text-decoration: none;
+			color: $font-color;
+		}
+	}
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+img.small-image {
+ width: 400px;
+}
+
+.article-link {
+	text-decoration: none;
+	color: $font-color;
+}
+
+article.card-alternate {
+	justify-content: space-evenly;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 40px;
+
+	div {
+		padding: 16px;
+	}
+	img {
+		width: 250px;
+		height: 250px;
+		border-radius: 50%;
+	}
+	p {
+		max-width: 500px;
+	}
+}

assets/sass/code.scss

@@ -0,0 +1,22 @@
+code {
+	background: $dark;
+	border-radius: .4rem;
+	margin: 0 .2rem;
+	padding: .2rem .5rem;
+	white-space: nowrap;
+}
+
+pre {
+	background-color: $background-color !important;
+	max-width: 100%;
+
+	& > code {
+		@include shadow;
+		display: block;
+		padding: 1rem 1.5rem;
+		white-space: pre;
+		max-width: 100%;
+		overflow-x: auto;
+		border-left: .3rem solid $beetbox-purple;
+	}
+}

assets/sass/colors.scss

@@ -0,0 +1,13 @@
+$background-color: #1f2835;
+$font-color: #f8f8ff;
+$top-bar: #f8f8ffcc;
+
+$beetbox-red: #9e0008;
+$beetbox-pink: #d93370;
+$beetbox-purple: #ac65cb;
+$beetbox-green: #003f56;
+$beetbox-blue: #5fcfd0;
+
+$dark: #111;
+$visited-link: #e4cdef;
+

assets/sass/main.scss

@@ -0,0 +1,130 @@
+@import 'colors.scss';
+@import 'cards.scss';
+@import 'code.scss';
+
+@mixin screen-max($max) {
+	@media (max-width: $max - 1) {
+		@content
+	}
+}
+
+body {
+	background-color: $background-color;
+	color: $font-color;
+	margin: 0px;
+	overflow-y: scroll;
+}
+
+header {
+	background-color: $top-bar;
+	box-shadow: 0px 5px 10px black;
+	.spread {
+		gap: 24px;
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		@include screen-max(1000px){justify-content: center;}
+		ul {
+			margin: 0px;
+			padding: 0px;
+			list-style-type: none;
+			a {
+				text-align: center;
+				margin: auto;
+				font-weight: bold;
+				text-decoration: none;
+				color: $background-color;
+			}
+		}
+	}
+	nav {
+		max-width: 1400px;
+		margin: 0px auto;
+		padding: 8px;
+		flex-wrap: wrap;
+		a {
+			@include screen-max(1000px){flex-basis: 100%;}
+		}
+		img {
+			max-width: 300px;
+			display: block;
+			@include screen-max(1000px){margin: auto; flex-basis: 100%;}
+		}
+	}
+}
+
+a {
+	color: $beetbox-blue;
+}
+
+a:visited, a:hover {
+	color: $visited-link;
+}
+
+.content-wrapper, .article-meta {
+	max-width: 820px;
+	margin: auto;
+	padding: 4px;
+}
+
+.center-text {
+	text-align: center;
+	flex-basis: 100%;
+}
+
+.break {
+	flex-basis: 100%;
+	height: 0px;
+}
+
+a, p, span, li, h2, code {
+	font-size: 1.25rem;
+}
+
+p {
+	text-align: justify;
+}
+
+img {
+	 object-fit: cover;
+}
+
+.small-text {
+	font-size: 1rem;
+}
+
+.article-meta {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 4px 8px;
+	flex-wrap: wrap;
+	h1 {
+		font-size: 2rem;
+	}
+	img {
+		border-radius: 8px;
+	}
+	img.large-image {
+		width: 100%;
+		max-height: 500px;
+	}
+}
+
+section {
+	max-width: 1000px;
+	margin: 16px auto;
+	padding: 8px;
+}
+
+section.article-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 40px;
+}
+
+.fill-wh {
+	width: 100%;
+	height: 100%
+}

layouts/_default/baseof.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+	<head>
+    <link rel="shortcut icon" href="/images/favicon.ico"/>
+
+		{{ with .OutputFormats.Get "rss" -}}
+			{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+		{{ end -}}
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
+		{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS }}
+		<link rel="stylesheet" href="{{ $style.Permalink }}" />
+		<title>
+			{{ block "title" . }} {{ .Site.Title }} {{ end }}
+		</title>
+	</head>
+	<body>
+		{{ partial "header.html" . }}
+		{{ block "headline" . }}
+		{{ end }}
+		{{ block "main" . }}
+		{{ end }}
+
+		{{ partial "footer.html" . }}
+		{{ block "footer" . }}
+		{{ end }}
+	</body>
+</html>

layouts/_default/list.html

@@ -0,0 +1,14 @@
+{{ define "main" }}
+	{{if not .IsHome }}
+		<h1 class="center-text">{{ .Title | markdownify | lower }}</h1>
+  {{ end }}
+  {{ .Content }}
+  <section class="article-list">
+     {{ $pages := .Pages }}
+     {{ if .IsHome }}{{ $pages = where .Site.RegularPages "Section" "not in" (default "[]" .Site.Params.excludedSections) }}{{ end }}
+     {{ range (where $pages "Section" "ne" "") }}
+		 {{ partial "article-card.html" . }}
+     {{ end }}
+   </section>
+{{ end }}
+

layouts/_default/single.html

@@ -0,0 +1,29 @@
+{{ define "main" }}
+<div class="article-meta">
+<h1 class="center-text">{{ .Title | markdownify }}</h1>
+{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }}
+<a class="center-text" href={{ printf "/%s/%s" "authors" (index $authors 0 | urlize) }}><h2 class="center-text">{{ index $authors 0 }}</h2></a>
+{{ if .Params.date }}<h2 class="small-text">{{ .Date.Format "Mon | Jan 2, 2006" }}</h2>{{ end }}
+{{ range (.GetTerms "tags") }}
+	<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+{{ end}}
+	<img class="shadow large-image" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
+</div>
+
+{{ if .Params.toc }}
+{{ .TableOfContents }}
+{{ end }}
+<div class="content-wrapper">
+  <main>
+    {{ .Content }}
+		{{ with .NextInSection }}
+		<p>Next: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
+		{{ end }}
+		{{ with .PrevInSection }}
+		<p>Previous: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
+		{{ end }}
+		<br>
+    <a href="/"> >> Home</a>
+  </main>
+</div>
+{{ end }}

layouts/_default/taxonomy.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+	<h1 class="center-text">{{ .Title | markdownify | lower }} tag</h1>
+	<div class="content-wrapper">
+	  {{ .Content }}
+	</div>
+  <section class="article-list">
+     {{ $pages := .Pages }}
+     {{ range (where $pages "Section" "ne" "") }}
+		 {{ partial "article-card.html" . }}
+     {{ end }}
+   </section>
+{{ end }}

layouts/_default/terms.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+	<h1 class="center-text">{{ .Title | markdownify | lower }}</h1>
+	<div class="content-wrapper">
+	  {{ .Content }}
+	</div>
+  <section class="article-list">
+     {{ $pages := .Pages }}
+     {{ range (where $pages "Section" "ne" "") }}
+		 {{ partial "article-card.html" . }}
+     {{ end }}
+   </section>
+{{ end }}

layouts/authors/list.html

@@ -0,0 +1,23 @@
+{{ define "main" }}
+	<section>
+		{{if not .IsHome }}
+			<div class="article-meta">
+				<h1 class="center-text">{{ .Params.name }}</h1>
+				<p class="center-text">{{ .Params.bio }}</p>
+				<a class="small-text" href={{ .Params.projects}}>Projects</a>
+				<span> | </span>
+				<a class="small-text" href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
+				<div class="break"></div>
+				<img class="shadow small-image" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
+			</div>
+	  {{ end }}
+	  {{ .Content }}
+	  <h2>Posts:</h2>
+	</section>
+  <section class="article-list">
+     {{ range .Data.Pages }}
+			 {{ partial "article-card.html" . }}
+     {{ end }}
+   </section>
+{{ end }}
+

layouts/authors/terms.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+<h1 class="center-text">Authors</h1>
+
+<section>
+	{{ range .Data.Pages }}
+		{{ partial "article-card-alternate.html" . }}
+	{{ end }}
+</section>
+{{ end }}

layouts/games/list.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+<div class="article-meta">
+<h1 class="center-text">{{ .Title | markdownify }}</h1>
+{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }}
+<a class="center-text" href={{ printf "/%s/%s" "authors" (index $authors 0 | urlize) }}><h2 class="center-text">{{ index $authors 0 }}</h2></a>
+{{ if .Params.date }}<h2 class="small-text">{{ .Date.Format "Mon | Jan 2, 2006" }}</h2>{{ end }}
+{{ range (.GetTerms "tags") }}
+	<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+{{ end }}
+	<div class="break"></div>
+		<h2 class="small-text">Platforms:</h2>
+		<span class="margin small-text">{{ delimit .Params.platforms " · " }}</span>
+	<img class="shadow" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
+</div>
+
+{{ if .Params.toc }}
+{{ .TableOfContents }}
+{{ end }}
+<div class="content-wrapper">
+  <main>
+    {{ .Content }}
+    {{ if gt (len .Data.Pages) 0 }}
+    	<h2>Devlogs:</h2>
+	    <section class="article-list">
+		    {{ range .Data.Pages }}
+		    	{{ partial "article-card.html" . }}
+		    {{ end }}
+	    </section>
+    {{ end }}
+    <a href="/"> >> Home</a>
+  </main>
+</div>
+{{ end }}

layouts/partials/article-card-alternate.html

@@ -0,0 +1,12 @@
+<a class="article-link" href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
+<article class="card-alternate shadow float-on-hover">
+	<div>
+			<img class="shadow" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
+	</div>
+	<div>
+		<h2>{{ .Params.name }}</h2>
+		<p>{{ .Params.bio }}</p>
+	</div>
+</article>
+</a>
+	

layouts/partials/article-card.html

@@ -0,0 +1,19 @@
+<article class="shadow float-on-hover card">
+	<div class="article-image">
+		<a href=" {{ .Permalink }}">
+		<img class="fill-wh" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/></a>
+	</div>
+	<div class="article-info-container">
+		<div class="article-info">
+			{{ range first 1 (.GetTerms "tags") }}
+				<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+			{{ end }}
+			<a href="{{ .Permalink }}" class="article-title fill-wh">
+				<h2>{{ .Title | markdownify }}</h2>
+				{{ if ne .Kind "term"}}
+					<span class="date">{{ .Date.Format "2006/01/02" }}</span>
+				{{ end }}
+			</a>
+		</div>
+	</div>
+</article>

layouts/partials/footer.html

@@ -0,0 +1,4 @@
+<footer>
+	<hr/>
+	<p class="center-text small-text">{{ $.Site.Copyright | safeHTML }}</p>
+</footer>

layouts/partials/header.html

@@ -0,0 +1,12 @@
+<header>
+	<nav class="spread">
+		<a href="/"><img src="/images/logo.svg"/></a>
+		<ul class="spread">
+			<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
+			<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>
+			<li><a href="/games" title="Games">Games</a></li>
+			<li><a href="/authors" title="Authors">Authors</a></li>
+			<li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li>
+		</ul>
+	</nav>
+</header>