update ikiwiki css

IkiWiki/Plugin/frontlinkpages.pm

@@ -0,0 +1,60 @@
+#!/usr/bin/perl
+
+package IkiWiki::Plugin::frontlinkpages;
+
+use warnings;
+use strict;
+use IkiWiki 3.00;
+
+sub import {
+    hook(type => "pagetemplate", id => "frontlinkpages", call => \&pagetemplate);
+}
+
+sub pagetemplate (@) {
+    my %params=@_;
+
+    my $template=$params{template};
+
+    if (! $template->query(name => "frontlinkpages")) {
+	    return;
+    }
+
+    my $quick=exists $params{quick} ? IkiWiki::yesno($params{quick}) : 0;
+
+    my $num=0;
+    if ($params{limit}) {
+	    $num=$params{limit};
+    }
+    if ($params{feedlimit} && $num < $params{feedlimit} && $num > 0) {
+	    $num=$params{feedlimit};
+    }
+    if ($params{skip} && $num) {
+	    $num+=$params{skip};
+    }
+
+    my @pages = pagespec_match_list($params{page}, "link($params{page})",
+	    deptype => deptype($quick ? "presence" : "content"),
+	    filter => sub { $_[0] eq $params{page} },
+        # sort => exists $params{sort} ? $params{sort} : "age title",
+	    reverse => IkiWiki::yesno($params{reverse}),
+	    ($num ? (num => $num) : ()),
+    );
+
+    my $destpage=$params{destpage};
+    my @contents;
+    for (@pages) {
+	    if ($pagesources{$_}) {
+            my $title = $pagestate{$_}{meta}{title};
+		    push @contents, {
+			    content => IkiWiki::get_inline_content($_, $destpage),
+			    pageurl => urlto($_, $destpage),
+				title => $title ? $title : pagetitle(IkiWiki::basename($_)),
+			    ctime => displaytime($IkiWiki::pagectime{$_}, $params{timeformat}, 1),
+			    mtime => displaytime($IkiWiki::pagemtime{$_}, $params{timeformat})
+		    }
+	    }
+    }
+    $template->param(frontlinkpages => \@contents);
+}
+
+1

css/style.css

@@ -1,89 +1,231 @@
+/* variables */
 :root {
 	--font-size: 12pt;
 	--line-height: 1.625;
-	--height-unit: calc(var(--font-size) * var(--line-height));
-	--width-unit: 1ch;
-	--padding-left: calc(1 * var(--width-unit));
-	--padding-right: calc(1 * var(--width-unit));
-	--padding-top: calc(1 * var(--height-unit));
-	--padding-bottom: calc(1 * var(--height-unit));
-	--gap-vertical: calc(1 * var(--height-unit));
-	--gap-horizontal: calc(2 * var(--width-unit));
-	--column-width: clamp(32ch, 72ch, calc(100vw - var(--gap-horizontal) - var(--padding-left) - var(--padding-right) - var(--width-unit)));
-	font: var(--font-size)/var(--line-height) monospace;
-	color-scheme: light dark;
+  --font-family: monospace;
+
+  /* font-derived vertical and horizontal units */
+  --v-un: calc(var(--font-size) * var(--line-height));
+  --h-un: 1ch;
+
+  /* gaps and paddings */
+  --body-padding-h: var(--h-un);
+  --body-padding-v: var(--v-un);
+  --main-gap-h: calc(2 * var(--h-un));
+  --main-gap-v: 0;
+
+  /* font-derived column width */
+  --max-col-w: calc(100vw - (2 * var(--body-padding-h)) - var(--main-gap-h) - 1ch);
+  --col-w: clamp(32ch, 72ch, var(--max-col-w));
+
+  /* colors */
+  --fg-c: #000000;
+  --bg-c: #ffffff;
+	--link-c: hsl(240 100% 50%);
+	--visited-c: hsl(270 100% 50%);
+	--active-c: hsl(0 100% 50%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg-c: #ffffff;
+    --bg-c: #000000;
+    --link-c: hsl(240 100% 75%);
+    --visited-c: hsl(270 100% 75%);
+    --active-c: hsl(0 100% 75%);
+  }
 }
 
 /* reset */
 * {
 	box-sizing: border-box;
+  margin: unset;
+  hyphens: auto;
 }
-body {
-	color: light-dark(#000000, #ffffff);
-	background-color: light-dark(#ffffff, #000000);
-	margin: 0;
+
+/* root */
+:root {
+	color: var(--fg-c);
+	background-color: var(--bg-c);
+  font: var(--font-size)/var(--line-height) var(--font-family);
 }
+
+/* content sectioning */
+address {
+  font-style: unset;
+}
+
 h1, h2, h3, h4, h5, h6 {
-	font: inherit;
+	font-size: unset;
+  font-weight: bold;
 }
-h1 {
-	font-weight: bold;
-    margin: var(--height-unit) var(--height-unit) 0 0;
+
+article {
+  counter-reset: heading;
 }
-h2, h3, h4, h5, h6 {
-	font-style: italic;
-    margin: var(--height-unit) var(--height-unit) 0 0;
+
+article h1:before {
+	content:
+    counter(heading)". ";
+	counter-increment: heading;
 }
-p {
-    margin: var(--height-unit) 0 0 0;
-	hyphens: auto;
+
+article h1 {
+	counter-reset: subheading;
 }
+
+article h2:before {
+	content:
+    counter(heading)"."
+    counter(subheading)". ";
+	counter-increment: subheading;
+}
+
+article h2 {
+  counter-reset: subsubheading;
+}
+
+article h3:before {
+  content:
+    counter(heading)"."
+    counter(subheading)"."
+    counter(subsubheading)". ";
+  counter-increment: subsubheading;
+}
+
+article h3 {
+  counter-reset: subsubsubheading;
+}
+
+article h4:before {
+  content:
+    counter(heading)"."
+    counter(subheading)"."
+    counter(subsubheading)"."
+    counter(subsubsubheading)". ";
+  counter-increment: subsubsubheading;
+}
+
+article h4 {
+  counter-reset: subsubsubsubheading;
+}
+
+article h5:before {
+  content:
+    counter(heading)"."
+    counter(subheading)"."
+    counter(subsubheading)"."
+    counter(subsubsubheading)"."
+    counter(subsubsubsubheading)". ";
+  counter-increment: subsubsubsubheading;
+}
+
+article h5 {
+  counter-reset: subsubsubsubsubheading;
+}
+
+article h6:before {
+  content:
+    counter(heading)"."
+    counter(subheading)"."
+    counter(subsubheading)"."
+    counter(subsubsubheading)"."
+    counter(subsubsubsubheading)"."
+    counter(subsubsubsubsubheading)". ";
+  counter-increment: subsubsubsubsubheading;
+}
+
+/* text content */
+:is(blockquote, dl, figure, menu, ol, p, pre, ul) +
+:is(blockquote, dl, figure, menu, ol, p, pre, ul) {
+  margin-block-start: var(--v-un);
+}
+
+
+:is(blockquote, dl, figure, menu, ol, p, pre, ul) +
+:is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: calc(2 * var(--v-un));
+  margin-block-end: var(--v-un);
+}
+
+:is(h1, h2, h3, h4, h5, h6) +
+:is(blockquote, dl, figure, menu, ol, p, pre, ul) {
+  margin-block-start: var(--v-un);
+}
+
 blockquote {
-	margin: var(--height-unit) calc(2 * var(--width-unit));
+	margin-inline: calc(4 * var(--h-un));
 }
-ul, ol {
-	margin: var(--height-unit) 0;
-	padding: 0 0 0 calc(4 * var(--width-unit));
+
+ol, ul, menu {
+  padding-inline-start: calc(4 * var(--h-un));
 }
+
+:is(ol, ul, menu) :is(ol, ul, menu) {
+  margin-block: unset;
+}
+
 ul>li::marker {
 	content: "- ";
 }
+
 hr {
-	color: inherit;
-	border: none;
-	margin: var(--height-unit) 0;
-}
-hr:after {
-	content: "---";
+  margin-block-start: var(--v-un);
+	color: unset;
+	border: unset;
+  text-align: center;
 }
 
-/* main layout */
+hr:after {
+  content: "---";
+}
+
+/* inline text semantics */
+a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+a:link {
+  color: var(--link-c);
+}
+
+a:link:active {
+  color: var(--active-c);
+}
+
+a:visited {
+  color: var(--visited-c);
+}
+
+a:visited:active {
+  color: var(--active-c);
+}
+
+/* layout */
 body {
-	padding: var(--height-unit) var(--width-unit);
 	width: 100vw;
 	height: 100vh;
+	padding: var(--body-padding-v) var(--body-padding-h);
 }
 
-/* secondary grid */
 body>main {
 	height: 100%;
 	display: grid;
 	grid-auto-flow: column;
-	grid-template-columns: repeat(auto-fit, var(--column-width));
-	grid-gap: var(--gap-horizontal);
+  grid-auto-columns: var(--col-w);
+  gap: var(--main-gap-v) var(--main-gap-h);
 	overflow-x: scroll;
-	scroll-snap-type: x proximity;
 }
+
 body>main>article {
-	scroll-snap-align: start;
-	scroll-snap-stop: always;
-	width: var(--column-width);
 	overflow-y: scroll;
 }
-body>main>article>header>h1 {
-	margin: unset;
-	display: inline-block;
+
+body>main>article>header {
+  margin-block-end: var(--v-un);
 }
-body>main>article>article {
-	margin: var(--height-unit) 0 0 0;
+
+body>main>article>footer {
+  margin-block-start: var(--v-un);
 }

favicon.svg

@@ -5,5 +5,5 @@
   viewBox="0 0 32 32"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
-  <rect style="fill:#551a8b" width="32" height="32" x="0" y="0" />
+  <rect style="fill:hsl(270 100% 50%)" width="32" height="32" x="0" y="0" />
 </svg>

index.mdwn

@@ -1,11 +1,9 @@
-Odkrivanje zatona arhitektov kot aktivnih ideologov, spoznanje o
-ogromnih tehnoloških zmožnostih racionalizacije mesta in ozemlja skupaj
-z vsakodnevnimi ugotovitvami o njihovi brezkoristnosti ter zastaranje
-specifičnih metod projektiranja še preden so njihove hipoteze lahko
-preverjene v realnosti za arhitekte tvorijo tesnobno vzdušje, ki na
-obzorju ponuja vpogled na zelo konkretno ozadje, zastrašujoče kot
-največje zlo ...
-
-[[!inline pages="page(wiki/*)" feeds="no" archive="yes" sort="mtime"]]
+> Odkrivanje zatona arhitektov kot aktivnih ideologov, spoznanje o
+> ogromnih tehnoloških zmožnostih racionalizacije mesta in ozemlja skupaj
+> z vsakodnevnimi ugotovitvami o njihovi brezkoristnosti ter zastaranje
+> specifičnih metod projektiranja še preden so njihove hipoteze lahko
+> preverjene v realnosti za arhitekte tvorijo tesnobno vzdušje, ki na
+> obzorju ponuja vpogled na zelo konkretno ozadje, zastrašujoče kot
+> največje zlo ...
 
 [[!inlinepages pages="page(wiki/*)" sort="mtime"]]

tmpl/archivepage.tmpl

@@ -1,4 +0,0 @@
-<article>
-<a href="<TMPL_VAR PAGEURL>"><TMPL_VAR TITLE></a><br />
-<TMPL_VAR MTIME>
-</article>

tmpl/index.tmpl

@@ -4,29 +4,30 @@
 <meta charset="utf-8" />
 <title><TMPL_VAR TITLE></title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<link rel="icon" href="<TMPL_VAR BASEURL>/favicon.svg" />
-<link rel="stylesheet" href="<TMPL_VAR BASEURL>/css/style.css" type="text/css" />
+<link rel="icon" href="<TMPL_VAR BASEURL>favicon.svg" />
+<link rel="stylesheet" href="<TMPL_VAR BASEURL>css/style.css" type="text/css" />
 <TMPL_IF META><TMPL_VAR META></TMPL_IF>
 </head>
-<body class="index">
+<body id="index">
 <main>
 <article>
 <header>
-<TMPL_LOOP PARENTLINKS><!--
---><TMPL_IF __FIRST__><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>/</TMPL_IF><!--
---></TMPL_LOOP><!--
---><h1><a href="<TMPL_VAR URL>"><TMPL_VAR TITLE></a></h1><br />
-<TMPL_VAR MTIME>
+<a href="<TMPL_VAR BASEURL>"><TMPL_VAR WIKINAME></a>
 </header>
 <TMPL_VAR CONTENT>
+<footer>
+<TMPL_VAR MTIME>
+</footer>
 </article>
 <TMPL_LOOP INLINEPAGES>
 <article>
 <header>
 <a href="<TMPL_VAR PAGEURL>"><TMPL_VAR TITLE></a><br />
-<TMPL_VAR MTIME>
 </header>
 <TMPL_VAR CONTENT>
+<footer>
+<TMPL_VAR MTIME>
+</footer>
 </article>
 </TMPL_LOOP>
 </main>

tmpl/page.tmpl

@@ -4,29 +4,43 @@
 <meta charset="utf-8" />
 <title><TMPL_VAR TITLE></title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<link rel="icon" href="<TMPL_VAR BASEURL>/favicon.svg" />
-<link rel="stylesheet" href="<TMPL_VAR BASEURL>/css/style.css" type="text/css" />
+<link rel="icon" href="<TMPL_VAR BASEURL>favicon.svg" />
+<link rel="stylesheet" href="<TMPL_VAR BASEURL>css/style.css" type="text/css" />
 <TMPL_IF META><TMPL_VAR META></TMPL_IF>
 </head>
-<body class="page">
+<body id="page"
+onload="document.getElementById('start').scrollIntoView({behavior:'smooth',inline:'start'})">
 <main>
-<article>
+<TMPL_LOOP FRONTLINKPAGES>
+<article class="frontlinkpage">
 <header>
-<TMPL_LOOP PARENTLINKS><!--
---><TMPL_IF __FIRST__><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>/</TMPL_IF><!--
---></TMPL_LOOP><!--
---><h1><a href="<TMPL_VAR URL>"><TMPL_VAR TITLE></a></h1><br />
-<TMPL_VAR MTIME>
+<a href="<TMPL_VAR PAGEURL>"><TMPL_VAR TITLE></a>
 </header>
 <TMPL_VAR CONTENT>
+<footer>
+<TMPL_VAR MTIME>
+</footer>
+</article>
+</TMPL_LOOP>
+<article id="start">
+<header>
+<a href="<TMPL_VAR BASEURL>"><TMPL_VAR WIKINAME></a>/<a href="<TMPL_VAR
+URL>"><TMPL_VAR TITLE></a>
+</header>
+<TMPL_VAR CONTENT>
+<footer>
+<TMPL_VAR MTIME>
+</footer>
 </article>
 <TMPL_LOOP BACKLINKPAGES>
-<article>
+<article class="backlinkpage">
 <header>
-<a href="<TMPL_VAR PAGEURL>"><TMPL_VAR TITLE></a><br />
-<TMPL_VAR MTIME>
+<a href="<TMPL_VAR PAGEURL>"><TMPL_VAR TITLE></a>
 </header>
 <TMPL_VAR CONTENT>
+<footer>
+<TMPL_VAR MTIME>
+</footer>
 </article>
 </TMPL_LOOP>
 </main>