css tweaks, added background image to header

.idea/discord.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="DISABLE" />
+  </component>
+</project>

_config.yml

@@ -11,5 +11,5 @@ defaults:
 
 collections:
   content:
-    output: false
+    output: true
-
+    permalink: /:name

_layouts/default.html

@@ -24,13 +24,15 @@
 			<source type="image/webp" srcset="/assets/img/lynnesoft-centred.png">
 			<img id="logo"
 					 src="/assets/img/lynnesoft-centred.png"
-					 alt="A cyan-purple parallelogram with an outline of the letter L in its bottom-left corner.">
+					 alt="A cyan-purple parallelogram with an outline of the letter L in its bottom-left corner."
+					height="442"
+					width="607">
 		</picture>
 
 		<nav>
 			<a href='/' {%- if page.title == "Home" %} class='current'{% endif -%}>Home</a>
 			{%- for html_page in site.content -%}
-				{%- unless html_page.url == '/' -%}
+				{%- unless html_page.url == '/index' -%}
 				<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>
 					{{ html_page.title }}
 				</a>

assets/style.css

@@ -5,7 +5,7 @@ body {
 	font-family: sans-serif;
 	margin: 0;
 	display: grid;
-	grid-template-columns: max(300px, 20%) auto;
+	grid-template-columns: max(325px, 15%) auto;
 	background: #ccc;
 }
 
@@ -21,7 +21,7 @@ h6 a {
 	color: inherit;
 	text-decoration: none;
 }
-h1, h2 {
+h1, h2, h3 {
 	font-weight: 400;
 }
 h1 {
@@ -42,8 +42,13 @@ main article {
 	font-size: 1.1em;
 }
 
+p {
+	line-height: 1.5em;
+}
+
 main article h1,
-main article h2 {
+main article h2,
+main article h3 {
 	border-left: 5px solid mediumpurple;
 	padding-left: 5px;
 	margin-left: -10px;
@@ -51,9 +56,26 @@ main article h2 {
 
 header {
 	/* sidebar */
-	/*background: #6c4e7b;*/
+	position: relative;
-	background: #333;
+}
-	z-index: 1;
+
+header::after {
+	/* will use webp with jpeg fallback when
+	https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
+	only for now :c */
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+	background: linear-gradient(to bottom, #333, #333 10%, 70%, transparent),
+	url("/assets/img/background.jpeg") no-repeat bottom center/cover,
+	#333;
+	/*background: linear-gradient(to bottom, #333 0%, #333 30%, transparent 80%, transparent 100%), url("/assets/img/background.jpeg") no-repeat bottom center/cover;*/
+	filter: saturate(33%);
+	content: "";
 }
 
 nav a {
@@ -69,12 +91,13 @@ nav a {
 	transition: 0.2s all;
 }
 nav a:hover {
-	background: #ffffff44;
+	background: #00000044;
 }
 
 #logo {
 	object-fit: contain;
 	display: block;
 	width: min(100%, 150px);
-	margin: 30px auto 80px auto;
+	height: auto;
+	margin: 30px auto 50px auto;
 }