big changes to background and overriding css

8 files changed, 356 insertions, 25 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..4eedec5
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,281 @@
+*, *:before, *:after {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    font-size: 26px;
+    font-size: 1.6rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    color: #313a3d;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 16px;
+    line-height: 1.6;
+}
+
+header#banner {
+    margin: 25px 0;
+}
+
+header#banner a {
+    color: #313a3d;
+    text-decoration: none;
+}
+
+header#banner a:hover {
+    text-decoration: underline;
+}
+
+header#banner h2 {
+    display: inline;
+    font-size: 21px;
+    font-size: 2.1rem;
+    margin: 0 8px 0 0;
+}
+
+header#banner nav {
+    display: inline-block;
+}
+
+header#banner nav ul {
+    list-style-type: none;
+    font-size: 1.05em;
+    text-transform: lowercase;
+    margin: 0;
+    padding: 0;
+}
+
+header#banner nav ul li {
+    display: inline;
+    margin: 0 3px;
+}
+
+header#banner nav ul li a {
+    color: #454545;
+}
+
+main#content a {
+    color: #007dfa;
+    text-decoration: none;
+}
+
+main#content a:hover {
+    text-decoration: underline;
+}
+
+main#content h1,
+main#content h2,
+main#content h3,
+main#content h4,
+main#content h5,
+main#content h6 {
+    margin-bottom: 0;
+    line-height: 1.15;
+}
+
+main#content h3 {
+    font-size: 19px;
+    font-size: 1.9rem;
+}
+
+main#content h1 + p,
+main#content h2 + p,
+main#content h3 + p,
+main#content h4 + p,
+main#content h5 + p,
+main#content h6 + p {
+    margin-top: 5px;
+}
+
+main#content p {
+    color: #394548;
+    margin: 16px 0;
+}
+
+main#content hr {
+    height: 1px;
+    border: 0;
+    background: #d8d8d8;
+}
+
+main#content abbr {
+    cursor: help;
+}
+
+/* index.html styles */
+main#content ul#posts {
+    list-style-type: none;
+    font-size: 16px;
+    font-size: 1.6rem;
+    margin-top: 0;
+    padding: 0;
+}
+
+main#content ul#posts li {
+    margin: 5px 0;
+    padding: 0;
+}
+
+main#content ul#posts small {
+    font-size: 0.8em;
+    color: #767676;
+    margin-left: 10px;
+}
+
+main#content ul#posts li a {
+    text-decoration: none;
+}
+
+main#content ul#posts li a:hover {
+    color: #369aff;
+}
+
+main#content ul#posts li a:hover small {
+    color: inherit;
+}
+
+/* single.html styles */
+main#content header#post-header h1 {
+    display: block;
+    font-size: 23px;
+    font-size: 2.3rem;
+    font-weight: 600;
+    line-height: 1.15;
+}
+
+main#content header#post-header > div {
+    display: block;
+    font-size: 0.85em;
+    color: #767676;
+}
+
+main#content #toc {
+    border: 1px solid #b1b1b1;
+    border-radius: 1px;
+    line-height: 26px;
+    margin: 16px 0;
+    padding: 9px 14px;
+}
+
+main#content #toc h4 {
+    font-size: 1.06em;
+    color: #3d3d3d;
+    margin: 0;
+}
+
+main#content #toc nav#TableOfContents {
+    margin-top: 4px;
+}
+
+main#content #toc nav#TableOfContents > ul, main#content #toc nav#TableOfContents > ol {
+    margin-left: -40px;
+}
+
+main#content #toc ul, main#content #toc ol {
+    font-size: 0.98em;
+    margin: 0;
+    padding: 0 0 0 40px;
+}
+
+main#content #toc ul {
+    list-style-type: none;
+}
+
+main#content #toc ol {
+    counter-reset: item;
+}
+
+main#content #toc ol li {
+    display: block;
+}
+
+main#content #toc ol li:before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+}
+
+main#content img {
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+main#content figure {
+    margin: 16px 0;
+}
+
+main#content figure img {
+    display: block;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+main#content figure figcaption {
+    font-size: 0.92em;
+    font-style: italic;
+    line-height: 22px;
+    text-align: center;
+    margin-top: 6px;
+    padding: 0 10px;
+}
+
+main#content figure figcaption h4 {
+    font-style: normal;
+    display: inline;
+    margin: 0;
+}
+
+main#content figure figcaption p {
+    display: inline;
+    margin: 0;
+    padding-left: 8px;
+}
+
+main#content blockquote {
+    font-style: italic;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 50px;
+    padding-left: 15px;
+    border-left: 3px solid #ccc;
+}
+
+main#content code,
+main#content pre {
+    font-family: 'Menlo', monospace;
+}
+
+main#content code {
+    font-size: 0.96em;
+    padding: 0 5px;
+}
+
+main#content pre {
+    display: block;
+    overflow-x: auto;
+    font-size: 14px;
+    font-size: 1.4rem;
+    white-space: pre;
+    margin: 20px 0;
+    padding: 1.5rem 1.5rem;
+    line-height: 1.4;
+}
+
+main#content pre code {
+    padding: 0;
+}
+
+main#content section.footnotes {
+    font-size: 0.9em;
+}
+
+footer#footer {
+    font-size: 14px;
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: #b3b3b3;
+    margin: 40px 0;
+}
diff --git a/assets/css/min770px.css b/assets/css/min770px.css
new file mode 100644
index 0000000..cee3767
--- /dev/null
+++ b/assets/css/min770px.css
@@ -0,0 +1,54 @@
+@media (min-width: 770px) {
+body {
+    width: 600px;
+    line-height: 1.5;
+    background: #b5b5b5;
+    font-size: 20px;
+}
+
+main#content hr {
+    width: 108%;
+    margin-left: -3.8%;
+}
+
+/* index.html styles */
+header#banner h2 {
+    font-size: 25px;
+    font-size: 2.5rem;
+}
+
+main#content h3 {
+    font-size: 20px;
+    font-size: 2rem;
+}
+
+main#content ul#posts {
+    font-size: 18px;
+    font-size: 1.8rem;
+}
+
+/* single.html styles */
+main#content header#post-header h1 {
+    font-size: 24px;
+    font-size: 2.4rem;
+}
+
+main#content img {
+    max-width: 108%;
+    margin-left: -3.8%;
+}
+
+main#content figure {
+    margin-left: -3.8%;
+}
+
+main#content figure img {
+    max-width: 108%;
+}
+
+main#content pre {
+    width: 108%;
+    margin-left: -3.8%;
+    padding: 1.5rem 2.2rem;
+}
+}
diff --git a/config.toml b/config.toml
index 69cf5d4..245b143 100644
--- a/config.toml
+++ b/config.toml
@@ -9,7 +9,7 @@ pygmentsUseClasses = true
 [params]
   description = "An intentionally quiet and unassuming (and empty) blog"
   copyright = "Copyright © 2022 Yulqen"
-  dark = "auto"
+  dark = "off"
   highlight = true
 
 [menu]
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..bfc0cf0
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,3 @@
+# Toss!
+<img src="/img/poser_guy.png" alt="Me Me on a mountain" style="margin-left: 0px;">
+</div>
diff --git a/content/about/index.md b/content/about/index.md
index 3075228..9bb955f 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -1,24 +1,15 @@
 ---
-title: "About"
+title: "About This Web Site"
 date: 2021-05-17T19:45:46+01:00
 draft: false
 slug: "about"
 ---
 
-## About / Now
-
-My name Matthew Lemon and I am 46 years old (in 2021).
-
 Yulqen is a deliberate misspelling of an Autechre song I like.
 
-The image below I created many years ago in a computer program I'm not even sure exists now
-(actually, [it does](https://info.e-onsoftware.com/home) - called Vue). I have,
-at times been very interested in 3D modelling and photography amongst other
-hobbies.
-
 This is a test.
 
-I was a wedding photographer for a while.
+I was a wedding photographer for a short time.
 
 I currently live in Berwick-upon-Tweed.
 
@@ -28,6 +19,3 @@ I have [three cats that kill]({{< ref "blog/cats/cat_kills/" >}} "Cat Kill
 Log").
 
 
-<img src="poser_guy.png" alt="Me Me on a mountain" style="margin-left: 0px;">
-</div>
-
diff --git a/content/blog/sheer_golfing_artistry/index.md b/content/blog/sheer_golfing_artistry/index.md
deleted file mode 100644
index cb75f5d..0000000
--- a/content/blog/sheer_golfing_artistry/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "Sheer Golfing Artistry"
-date: 2021-05-25
-draft: false
----
-
-<video width=100% controls autoplay>
-    <source src="heinreich.mp4" type="video/webm">
-    Your browser does not support the video tag.
-</video>
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..95320cc
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+    <main aria-role="main">
+      <div class="homepage-content">
+        <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
+        {{.Content}}
+      </div>
+      <div>
+        {{ range first 10 .Site.RegularPages }}
+            {{ .Render "about"}}
+        {{ end }}
+      </div>
+    </main>
+{{ end }}
+
+
diff --git a/content/about/poser_guy.png b/static/img/poser_guy.png
index 5279dc8..5279dc8 100644
--- a/content/about/poser_guy.png
+++ b/static/img/poser_guy.png