From 356de5f9dd675a981c1d860239aa929765eb5c5b Mon Sep 17 00:00:00 2001 From: rhetenor Date: Thu, 13 Feb 2025 22:20:25 +0100 Subject: [PATCH] Work on style and finish blog --- Makefile | 4 +- src/blog/2.md | 4 - src/blog/3.md | 2 - src/blog/end_blog.html | 2 + src/blog/start_blog.html | 3 + src/pages/blog.html | 12 +++ src/pages/links.html | 2 +- src/side.html | 1 - src/styles/aside.css | 10 ++- src/styles/main.css | 163 ++++++++++++++++++++++++++++++++++++++- src/styles/style.css | 5 +- 11 files changed, 195 insertions(+), 13 deletions(-) delete mode 100644 src/blog/2.md delete mode 100644 src/blog/3.md create mode 100644 src/blog/end_blog.html create mode 100644 src/blog/start_blog.html diff --git a/Makefile b/Makefile index 6978fbc..0ea7508 100644 --- a/Makefile +++ b/Makefile @@ -25,11 +25,13 @@ template: $(SRC_DIR)/start.html $(SRC_DIR)/nav.html $(SRC_DIR)/side.html | mkdis cp -r $(SRC_DIR)/styles $(DIST_DIR) cat $(SRC_DIR)/start.html $(SRC_DIR)/nav.html $(SRC_DIR)/side.html > dist/template.html -$(PAGES_DIR)/blog.html: $(BLOG_PAGES) +$(PAGES_DIR)/blog.html: $(BLOG_PAGES) $(BLOG_DIR)/start_blog.html $(BLOG_DIR)/end_blog.html pandoc -f markdown -t html $^ -o $@ + cat $(BLOG_DIR)/start_blog.html $@ $(BLOG_DIR)/end_blog.html | tee $@ $(DIST_DIR)/%.html: $(PAGES_DIR)/%.html | template mkdist cat $(DIST_DIR)/template.html $(PAGES_DIR)/$*.html $(SRC_DIR)/end.html > $@ clean: rm -rf dist + rm -rf $(PAGES_DIR)/blog.html diff --git a/src/blog/2.md b/src/blog/2.md deleted file mode 100644 index 7dda38e..0000000 --- a/src/blog/2.md +++ /dev/null @@ -1,4 +0,0 @@ -# lol -another test - -** with an even better english blogpost ** oO diff --git a/src/blog/3.md b/src/blog/3.md deleted file mode 100644 index 14e6419..0000000 --- a/src/blog/3.md +++ /dev/null @@ -1,2 +0,0 @@ -i dont care about this - diff --git a/src/blog/end_blog.html b/src/blog/end_blog.html new file mode 100644 index 0000000..69ba09c --- /dev/null +++ b/src/blog/end_blog.html @@ -0,0 +1,2 @@ + + diff --git a/src/blog/start_blog.html b/src/blog/start_blog.html new file mode 100644 index 0000000..8cff026 --- /dev/null +++ b/src/blog/start_blog.html @@ -0,0 +1,3 @@ +
+

$ mount /dev/blog

+
diff --git a/src/pages/blog.html b/src/pages/blog.html index 7ebec6c..9e9b1af 100644 --- a/src/pages/blog.html +++ b/src/pages/blog.html @@ -1,3 +1,6 @@ +
+

$ mount /dev/blog

+

This website

Naturally I devote the first blog post to the website. Let’s find out if I have any skills in writing such things.

@@ -44,3 +47,12 @@ also automated using markdown.

another test

** with an even better english blogpost ** oO

i dont care about this

+
+

+$ mount /dev/blog +

+
+
+
+
+
diff --git a/src/pages/links.html b/src/pages/links.html index 20205cc..8b38e02 100644 --- a/src/pages/links.html +++ b/src/pages/links.html @@ -12,6 +12,6 @@

Comics

- xkcd The classic + xkcd The classic

diff --git a/src/side.html b/src/side.html index ff30a16..a01c310 100644 --- a/src/side.html +++ b/src/side.html @@ -24,4 +24,3 @@ - diff --git a/src/styles/aside.css b/src/styles/aside.css index 157ae8e..c16ee49 100644 --- a/src/styles/aside.css +++ b/src/styles/aside.css @@ -1,11 +1,17 @@ aside { - max-width: 170px; + + @media (max-width: 800px) { + width: 0; + } + min-height: 100%; + max-width: 14%; height: 100%; overflow: hidden; margin-right: 1vw; margin-top: 3vh; - width: 18%; + //width: 18%; border-right: solid; + position: fixed; & section { padding: 0; diff --git a/src/styles/main.css b/src/styles/main.css index eaf7654..dab74c4 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,6 +1,8 @@ main { + padding-left: 15%; + padding-right: 5%; + margin: 1%; - width: 78%; & h1 { text-align: center; @@ -37,3 +39,162 @@ main { content: "/~" } } + +#blog { // Style from pandoc + & body { + margin: 0 auto; + //max-width: 36em; + //padding-left: 50px; + //padding-right: 50px; + //padding-top: 50px; + //padding-bottom: 50px; + //hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 12px; + } + h1 { + font-size: 1.8em; + } + } + @media print { + html { + background-color: white; + } + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + svg { + height: auto; + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace; + font-size: 85%; + margin: 0; + hyphens: manual; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + div.columns{display: flex; gap: min(4vw, 1.5em);} + div.column{flex: auto; overflow-x: auto;} + div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} + /* The extra [class] is a hack that increases specificity enough to + override a similar rule in reveal.js */ + ul.task-list[class]{list-style: none;} + ul.task-list li input[type="checkbox"] { + font-size: inherit; + width: 0.8em; + margin: 0 0.8em 0.2em -1.6em; + vertical-align: middle; + } + .display.math{display: block; text-align: center; margin: 0.5rem auto;} +} diff --git a/src/styles/style.css b/src/styles/style.css index f1565a0..1a53b14 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -5,7 +5,7 @@ html { body { color: floralwhite; - height: 100%; + min-height: 100%; width: 100%; margin: 0 0 0 0; display: flex; @@ -43,6 +43,9 @@ body { #333333 3.8% ); background-blend-mode: screen; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; } main > h1 {