feat: ✨ init theme

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YOUR_NAME_HERE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

archetypes/default.md

@@ -0,0 +1,2 @@
++++
++++

assets/css/style.css

@@ -0,0 +1,285 @@
+:root {
+
+  /* Set sans-serif & mono fonts */
+  --sans-font: "fira_sansregular", -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
+  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
+  /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
+  --base-fontsize: 1.15rem;
+
+  /* Major third scale progression - see https://type-scale.com/ */
+  --header-scale: 1.25;
+
+  /* Line height is set to the "Golden ratio" for optimal legibility */
+  --line-height: 1.618;
+
+  /* Default (light) theme */
+  /* inverted both becase I prefer dark theme by default */
+  --bg: #212121;
+  --bg-transparent: #2f2f2f41;
+  --bg-album-transparent: #2f2f2fe5;
+  --bg-genres: #0d517e;
+  --accent-bg: #2B2B2B;
+  --text: #000000;
+  --text-light: #ABABAB;
+  --border: #666;
+  --accent: #0099ff;
+  --accent-light: #FFECB3;
+  --code: #F06292;
+  --preformatted: #CCC;
+  --disabled: #111;
+  --link-genres: #fff;
+  --link-color: #0d517e;
+
+}
+
+/* main body */
+html {
+  /* Set the font globally */
+  font-family: var(--sans-font);
+  font-size: var(--base-fontsize);
+}
+
+/* Reset some default styles */
+body, h1, h2, h3, p, ul, li {
+  margin: 0;
+  padding: 0;
+}
+
+/* Basic styling */
+body {
+  font-family: Arial, sans-serif;
+}
+
+header {
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+}
+
+nav ul {
+  list-style-type: none;
+}
+
+nav li {
+  display: inline;
+  margin-right: 20px;
+}
+
+nav a {
+  text-decoration: none;
+  color: #fff;
+}
+
+main {
+  padding: 1rem;
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+/* On screens that are 992px wide or less, go from four columns to two columns */
+@media screen and (max-width: 992px) {
+  main {
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
+  }
+
+}
+
+/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  main {
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+  }
+}
+
+
+/* common */
+
+a.genres:link, a.genres:visited {
+  text-decoration: none;
+  padding: 0.3rem;
+  background-color: var(--bg-genres);
+  color: var(--link-genres);
+  transition: all 0.3s ease;
+  display: inline-block;
+  margin: 0.1rem;
+}
+
+a.genres:hover {
+  background-color: var(--accent);
+}
+
+a.album-info:link, a.album-info:visited {
+  text-decoration: none;
+  padding: 0.3rem;
+  border: 1px solid var(--bg-genres);
+  border-radius: 5px;
+  color: var(--bg-genres);
+  transition: all 0.3s ease;
+  display: inline-block;
+  font-size: smaller;
+}
+
+a.album-info:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+ul > li {
+  list-style-type: none;
+  margin: 0.1rem;
+}
+
+/* album list page */
+
+main.album-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* Create four equal columns */
+.album-card {
+  flex: 25%;
+  /* border: 1px solid black; */
+  min-height: 250px;
+  margin: 1rem;
+  background-repeat: no-repeat;
+  background-position: left;
+  background-size: 250px;
+  padding-left: 255px;
+}
+
+
+/* On screens that are 992px wide or less, go from four columns to two columns */
+@media screen and (max-width: 992px) {
+  .album-card {
+    flex: 50%;
+  }
+
+}
+
+/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .row {
+    flex-direction: column;
+  }
+  .album-card {
+    background-position: top;
+    padding-left: 0;
+    padding-top: 255px;
+    min-height: auto;
+  }
+}
+
+a.album-band:link, a.album-band:visited {
+  text-decoration: none;
+  font-size: large;
+  font-weight: bold;
+  transition: color 0.3s ease;
+  display: block;
+  border-bottom: 1px solid black;
+  text-transform: uppercase;
+  color: var(--link-color);
+}
+
+a.album-band:hover {
+  color: var(--accent)
+}
+
+a.album-title:link, a.album-title:visited {
+  text-decoration: none;
+  font-size: x-large;
+  font-weight: bold;
+  transition: color 0.3s ease;
+  display: block;
+  color: var(--link-color);
+}
+
+a.album-title:hover {
+  color: var(--accent)
+}
+
+p.album-genres {
+  font-size: smaller;
+  margin: 0.5rem;
+}
+
+
+/* album display page */
+
+section.record {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+section.record > div {
+  flex: 25%;
+  margin: 1rem;
+  /* border: 1px solid black; */
+}
+
+section.record > div > p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+section.record > div > ul > li {
+  list-style-type: none;
+}
+
+section.record > div > h1 {
+  border-bottom: 1px solid var(--link-color);
+  margin-bottom: 1rem;
+}
+
+section.record-pictures {
+  flex: 100%;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+}
+
+section.record-pictures summary {
+  margin-bottom: 1rem;
+  font-size: larger;
+}
+
+section.record-pictures img {
+  max-width: 250px;
+}
+
+section.content {
+  flex: 100%;
+  padding: 1rem;
+  border: 1px solid var(--border);
+}
+
+a.record-band:link, a.record-band:visited {
+  text-decoration: none;
+  font-size: large;
+  font-weight: bold;
+  transition: color 0.3s ease;
+  text-transform: uppercase;
+  color: var(--link-color);
+}
+
+a.record-band:hover {
+  color: var(--accent)
+}
+
+/* footer */
+
+footer {
+  background-color: #333;
+  color: #fff;
+  padding: 2rem;
+  font-size: smaller;
+
+}
+

hugo.toml

@@ -0,0 +1 @@
+# Theme config.

layouts/_default/baseof.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="{{ .Site.Params.description }}">
+        <meta name="author" content="{{ .Site.Params.author }}">
+        {{ with .OutputFormats.Get "rss" -}}
+        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+        {{ end -}}
+
+        {{ hugo.Generator }}
+
+        {{ $title := print .Title " · " .Site.Title }}
+        {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
+        <title>{{ $title }}</title>
+
+        <style>
+        {{ $woff_police := resources.Get "fonts/firasans-regular-webfont.woff" }}
+        {{ $woff2_police := resources.Get "fonts/firasans-regular-webfont.woff2" }}
+        @font-face {
+            font-family: 'fira_sansregular';
+            src: url('{{ $woff2_police.Permalink }}') format('woff2'),
+                url('{{ $woff_police.Permalink }}') format('woff');
+        }
+        </style>
+        {{ $main_style := resources.Get "css/simple.css" }}
+        {{ $custom_style := resources.Get "css/style.css" }}
+        {{- /* <link rel="stylesheet" href="{{ $main_style.Permalink }}" />  */ -}}
+        <link rel="stylesheet" href="{{ $custom_style.Permalink }}" />
+    </head>
+    <body>
+    <!-- Begin page content -->
+
+    {{- block "main" . }}{{- end }}
+
+    {{- partial "footer.html" . -}}
+    <!-- End page content -->
+    </body>
+</html>

layouts/_default/list.html

@@ -0,0 +1,40 @@
+{{ define "body_class" }} post-template {{ end }}
+
+{{ define "main" }}
+
+{{- partial "header.html" . -}}
+
+
+<main class="album-list">
+    {{ range .Pages }}
+
+    <section class="album-card" style="background-image: url('{{ .Site.BaseURL }}/{{ if .Params.cover }}{{ .Params.cover }}{{ else }}default.png{{ end }}')">
+            {{ if .Params.band }}
+            <a href="/band/{{ .Params.band | urlize }}" class="album-band">{{ .Params.band }}</a>
+            {{ end }}
+            <a href="{{ .Page.Permalink }}" class="album-title">{{ .Title }}</a>
+            {{ if .Params.genres }}
+            <p class="album-genres">
+                {{ range .Params.genres }}
+                <a href="/genres/{{ . | urlize }}" class="genres">{{ . }}</a>
+                {{ end }}
+            </p>
+            {{ end }}
+            <ul>
+                {{ if .Params.label }}
+                <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z"></path></svg> Label : <a href="/label/{{ .Params.label | urlize }}" class="album-info">{{ .Params.label }}</a></li>
+                {{ end }}
+                {{ if .Params.year }}
+                <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"></path></svg> Year : <a href="/year/{{ .Params.year }}" class="album-info">{{ .Params.year }}</a></li>
+                {{ end }}
+                {{ if .Params.format }}
+                <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg> Format : <a href="/format/{{ .Params.format | urlize }}" class="album-info">{{ .Params.format }}</a></li>
+                {{ end }}
+            </ul>
+    </section>
+
+
+    {{ end }}
+
+</main>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,74 @@
+{{ define "body_class" }} post-template {{ end }}
+
+{{ define "main" }}
+
+{{- partial "header.html" . -}}
+
+<main class="record">
+    <article>
+        <section class="record">
+            <div>
+                <h1>{{ .Page.Title }}</h1>
+                <a href="/band/{{ .Params.band | urlize }}" class="record-band">{{ .Params.band }}</a>
+                {{ if .Params.description }}
+                <p>
+                {{ .Params.description | markdownify }}
+                </p>
+                {{ end }}
+            </div>
+
+            <div style="text-align: center;">
+                {{ if .Params.cover }}
+                <a href="/{{ .Params.cover | urlize }}">
+                {{ end }}
+                <img src="/{{ if .Params.cover }}{{ .Params.cover }}{{ else }}default.png{{ end }}" alt="{{ .Title }}" title="{{ .Title }}" />
+                {{ if .Params.cover }}
+                </a>
+                {{ end }}
+            </div>
+        </section>
+
+
+        <section class="record">
+            <div>
+                <h1>Record informations</h1>
+                <ul>
+                    {{ if .Params.label }}
+                    <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z"></path></svg> Label : <a href="/label/{{ .Params.label | urlize }}" class="album-info">{{ .Params.label }}</a></li>
+                    {{ end }}
+                    {{ if .Params.year }}
+                    <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z"></path></svg> Year : <a href="/year/{{ .Params.year | urlize }}" class="album-info">{{ .Params.year }}</a></li>
+                    {{ end }}
+                    {{ if .Params.format }}
+                    <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg> Disc format : <a href="/format/{{ .Params.format | urlize }}" class="album-info">{{ .Params.format }}</a></li>
+                    {{ end }}
+                </ul>
+            </div>
+            <div>
+                <h1>Genres</h1>
+                {{ range .Params.genres }}
+                <a href="/genres/{{ . | urlize }}" class="genres">{{ . }}</a>
+                {{ end }}
+            </div>
+        </div>
+
+        {{ if .Params.pictures }}
+        <section class="record-pictures">
+            <details>
+                <summary><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"></path></svg> More pictures</summary>
+            {{ range .Params.pictures }}
+                <a href="/{{ . }}"><img src="/{{ . }}" alt="{{ . }}" title="{{ . }}" /></a>
+            {{ end }}
+            </details>
+        </section>
+        {{ end }}
+
+        {{ if .Content }}
+        <section class="content">
+            {{ .Content }}
+        </section>
+        {{ end }}
+    </article>
+</main>
+
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,3 @@
+<footer>
+    <p>&copy; 2023 {{ .Site.Title }} - Using Hugo theme Vinyl Records Library</p>
+</footer>

layouts/partials/header.html

@@ -0,0 +1,11 @@
+<header>
+    <h1>{{ .Site.Title }}</h1>
+    <nav>
+        <ul>
+            <li><a href="{{ .Site.BaseURL }}">Home</a></li>
+            <li><a href="band/">Bands</a></li>
+            <li><a href="genres/">Genres</a></li>
+            <li><a href="#">still don't know</a></li>
+        </ul>
+    </nav>
+</header>

theme.toml

@@ -0,0 +1,21 @@
+# theme.toml template for a Hugo theme
+# See https://github.com/gohugoio/hugoThemes#themetoml for an example
+
+name = "Vinyl Library"
+license = "MIT"
+licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
+description = ""
+homepage = "http://example.com/"
+tags = []
+features = []
+min_version = "0.116.1"
+
+[author]
+  name = ""
+  homepage = ""
+
+# If porting an existing theme
+[original]
+  name = ""
+  homepage = ""
+  repo = ""