styled code blocks, added header in blog

2 files changed, 28 insertions, 1 deletions

diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 9040dea..59fb599 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -8,6 +8,10 @@
       {{ end }}
     </h1>
 
+    {{ if .Params.headerImg }}
+      <img id="header-img" src="{{ .Params.headerImg }}" alt="{{ if .Params.headerAlt }}{{ .Params.headerAlt }}{{ else }}Header Image{{ end }}">
+    {{ end }}
+
     {{ .Content }}
 
     {{ if .Sections }}
diff --git a/static/css/styles.css b/static/css/styles.css
index 9b5a5ab..f4df2db 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -16,6 +16,9 @@
 
     --listitem-bg1: #232323;
     --listitem-bg2: #272727;
+
+    --codeblock-bg: #3f3f3f;
+    --codeblock-fg: #ffffff;
 }
 
 * {
@@ -47,8 +50,28 @@ a {
     color: var(--link-fg);
 }
 
-img {
+#header-img {
     width: 100%;
+    max-height: auto;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 30rem;
+}
+
+code {
+    background-color: var(--codeblock-bg);
+    color: var(--codeblock-fg);
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-family: monospace;
+}
+
+pre code {
+    overflow-x: auto;
+    display: block;
 }
 
 main:not(#site-home-page) {