feat: add css customization

assets/css/custom.css

@@ -0,0 +1,39 @@
+:root {
+
+    /* Set sans-serif & mono fonts */
+    --sans-font: "Droid Sans", 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;
+    --header-title-color: #fff;
+    --nav-a-color: #fff;
+    --nav-a-accent-bg: #666;
+    --bg-header-elements: #b4b4b438;
+    --footer-text-color: #fff;
+  
+}

assets/css/style.css

@@ -5,7 +5,7 @@
   --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;
+  --base-fontsize: 1rem;
 
   /* Major third scale progression - see https://type-scale.com/ */
   --header-scale: 1.25;
@@ -35,6 +35,7 @@
   --nav-a-accent-bg: #666;
   --bg-header-elements: #b4b4b438;
   --footer-text-color: #fff;
+  --bg-album-card: #dad9d9;
 
 }
 
@@ -147,6 +148,7 @@ a.album-info:hover {
 
 ul > li {
   list-style-type: none;
+  font-size: smaller;
   margin: 0.1rem;
 }
 
@@ -163,11 +165,16 @@ main.album-list {
   flex: 25%;
   /* border: 1px solid black; */
   min-height: 250px;
-  margin: 1rem;
+  margin: 0.2rem;
   background-repeat: no-repeat;
   background-position: left;
   background-size: 250px;
   padding-left: 255px;
+  padding-top: 0.1rem;
+  padding-right: 0.1rem;
+  padding-bottom: 0.1rem;
+  background-color: var(--bg-album-card);
+  border-radius: 5px;
 }
 
 
@@ -192,7 +199,7 @@ main.album-list {
   }
 }
 
-a.album-band:link, a.album-band:visited {
+a.album-artist:link, a.album-artist:visited {
   text-decoration: none;
   font-size: large;
   font-weight: bold;
@@ -203,7 +210,7 @@ a.album-band:link, a.album-band:visited {
   color: var(--link-color);
 }
 
-a.album-band:hover {
+a.album-artist:hover {
   color: var(--accent)
 }
 
@@ -221,7 +228,7 @@ a.album-title:hover {
 }
 
 p.album-genres {
-  font-size: smaller;
+  font-size: small;
   margin: 0.5rem;
 }
 
@@ -254,6 +261,16 @@ section.record > div > h1 {
   margin-bottom: 1rem;
 }
 
+section.record > div > h1.album-title {
+  font-size: xx-large;
+}
+
+section.record img,
+section.record-pictures img {
+  max-width: 250px;
+}
+
+
 section.record-pictures {
   flex: 100%;
   padding: 1rem;
@@ -267,17 +284,13 @@ section.record-pictures summary {
   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 {
+a.record-artist:link, a.record-artist:visited {
   text-decoration: none;
   font-size: large;
   font-weight: bold;
@@ -286,7 +299,7 @@ a.record-band:link, a.record-band:visited {
   color: var(--link-color);
 }
 
-a.record-band:hover {
+a.record-artist:hover {
   color: var(--accent)
 }