Redoing the site theme. Now using FairyFloss

layouts/_default/list.html

@@ -2,11 +2,14 @@
 	{{ .Title }}
 {{ end }}
 {{ define "main" }}
-		<section id="list">
+<main class="main-content">
+	{{ .Content  }}
+	<section id="list">
 		{{- range .Data.Pages }}
-				<section class="list-item">
+		<section class="list-item">
-					{{ .Date.Format "2006-01-02" }} <a href="{{- .Permalink }}">{{ .Title }}</a>
+			{{ .Date.Format "2006-01-02" }} <a href="{{- .Permalink }}">{{ .Title }}</a>
-				</section>
-		{{- end }}
 		</section>
+	{{- end }}
+	</section>
+</main>
 {{ end }}

layouts/healing-music/list.html

@@ -4,7 +4,6 @@
 {{ define "main" }}
 	<main class="main-content">
 		{{ .Content }}
-	</main>
 		<section id="list">
 		{{- range .Data.Pages }}
 				<section class="list-item">
@@ -12,4 +11,5 @@
 				</section>
 		{{- end }}
 		</section>
+	</main>
 {{ end }}

layouts/index.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
+<div class="main-content">
 	{{ .Content }}
     {{ $currentPage := . }}
     {{ range .Site.Menus.social }}
     <a class="{{if or ($currentPage.IsMenuCurrent "social" .) ($currentPage.HasMenuCurrent "social" .) }} active{{end}} button" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a><br>
     {{ end }}
+<div>
 {{ end }}

static/css/style.css

@@ -1,44 +1,65 @@
 :root {
-	--base03: #002b36;
+	/* --base03: #002b36; */
-	--base02: #073642;
+	/* --base02: #073642; */
-	--base01: #586e75;
+	/* --base01: #586e75; */
-	--base00: #657b83;
+	/* --base00: #657b83; */
-	--base0: #839496;
+	/* --base0: #839496; */
-	--base1: #93a1a1;
+	/* --base1: #93a1a1; */
-	--base2: #eee8d5;
+	/* --base2: #eee8d5; */
-	--base3: #fdf6e3;
+	/* --base3: #fdf6e3; */
-	--yellow: #b58900;
+	/* --yellow: #b58900; */
-	--orange: #cb4b16;
+	/* --orange: #cb4b16; */
-	--red: #dc322f;
+	/* --red: #dc322f; */
-	--magenta: #d33682;
+	/* --magenta: #d33682; */
-	--violet: #6c71c4;
+	/* --violet: #6c71c4; */
-	--blue: #268bd2;
+	/* --blue: #268bd2; */
-	--cyan: #2aa198;
+	/* --cyan: #2aa198; */
-	--green: #859900;
+	/* --green: #859900; */
 
-	--background: var(--base3);
+	--black:          #42395D;
-	--color: var(--base02);
+	--dark-grey:      #75507B;
-	--highlight: var(--base2);
+	--red:            #A8757B;
-	--accent: var(--base01);
+	--light-red:      #FFB8D1;
+	--green:          #FF857F;
+	--light-green:    #F1568E;
+	--brown:          #E6C000;
+	--yellow:         #D5A425;
+	--blue:           #AE81FF;
+	--light-blue:     #C5A3FF;
+	--magenta:        #716799;
+	--light-magenta:  #8077A8;
+	--cyan:           #C2FFDF;
+	--light-cyan:     #C2FFFF;
+	--light-grey:     #F8F8F2;
+	--white:          #F8F8F0;
+
+	--background: var(--magenta);
+	--color: var(--light-grey);
+	--highlight: var(--brown);
+	--accent: var(--light-green);
 }
 
 body {
 	display: flex;
 	flex-direction: column;
+	justify-content: center;
 	font-size: 1.8em;
 	font-family: serif;
 	background-color: var(--background);
 	color: var(--color);
-	width: 99vw;
+	/* width: 99vw; */
 }
 
 .main-content {
 	max-width: 40em;
 	margin: auto;
+	background-color: var(--light-magenta);
+	padding: 1em;
+	border-radius: 1em;
 }
 
 a, a:visited {
-	color: var(--blue);
+	color: var(--cyan);
 }
 
 #navbar {
@@ -46,7 +67,8 @@ a, a:visited {
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: flex-end;
-	margin-top: 10px;
+	margin-top: 1em;
+	margin-bottom: 1em;
 	padding: 10px 0px;
 	border-width: 0 0 1px 0;
 	border-color: var(--accent);
@@ -110,14 +132,21 @@ h1, h2 {
 h1 {
 	font-size: 3em;
 	text-align: center;
+	margin: auto;
+	padding: 0.5em;
+	border-color: var(--brown);
+	border-style: double;
+	border-width: 0.1em;
+	box-shadow: 0.1em 0.1em 0.2em var(--accent);
+	border-radius: 1em;
 }
 
 h2 {
 	font-size: 2.5em;
 	text-align: right;
-	border-width: 0 0 4px 0;
+	border-width: 0 0 0.2em 0;
-	border-style: dashed;
+	border-style: double;
-	border-color: var(--accent);
+	border-color: var(--highlight);
 }
 
 h3 {