update theme

master
urosm 2024-01-30 16:38:47 +01:00
parent b87fd89a3e
commit 61ccf6a06f
2 changed files with 142 additions and 0 deletions

97
css/style.css 100644
View File

@ -0,0 +1,97 @@
: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;
}
/* reset */
* {
box-sizing: border-box;
}
body {
color: light-dark(#000000, #ffffff);
background-color: light-dark(#ffffff, #000000);
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font: inherit;
}
h1 {
font-weight: bold;
margin: var(--height-unit) 0 var(--height-unit) 0;
}
h2, h3, h4, h5, h6 {
font-style: italic;
margin: var(--height-unit) 0 var(--height-unit) 0;
}
p {
margin: var(--height-unit) 0 0 0;
hyphens: auto;
}
blockquote {
margin: var(--height-unit) calc(2 * var(--width-unit));
}
ul, ol {
margin: var(--height-unit) 0;
padding: 0 0 0 calc(4 * var(--width-unit));
}
ul>li::marker {
content: "- ";
}
ul ul {
margin: 0;
}
hr {
color: inherit;
border: none;
margin: var(--height-unit) 0;
}
hr:after {
content: "---";
}
/* layout */
body {
padding: var(--height-unit) var(--width-unit);
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
/* header */
body>header>h1 {
margin: unset;
display: inline-block;
}
/* main */
body>main {
height: 100%;
overflow-y: scroll;
}
body>main>article {
width: var(--column-width);
}
/* .actions */
.actions>ul {
margin: 0;
padding: 0;
list-style: none;
}
.actions>ul>li {
display: inline;
}

45
tmpl/page.tmpl 100644
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="sl" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<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" />
<TMPL_IF META><TMPL_VAR META></TMPL_IF>
</head>
<body class="page">
<header>
<TMPL_LOOP PARENTLINKS><!--
--><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>/<!--
--></TMPL_LOOP><!--
--><h1><a href="<TMPL_VAR URL>"><TMPL_VAR TITLE></a></h1>
</header>
<main>
<article>
<TMPL_VAR CONTENT>
</article>
</main>
<footer>
<span>Spremenjeno <TMPL_VAR MTIME></span>
<TMPL_IF HAVE_ACTIONS>
<nav class="actions">
<ul>
<TMPL_IF EDITURL>
<li><a href="<TMPL_VAR EDITURL>" rel="nofollow">uredi</a></li>
</TMPL_IF>
<TMPL_IF PREFSURL>
<li><a rel="nofollow" href="<TMPL_VAR PREFSURL>">nastavitve</a></li>
</TMPL_IF>
<TMPL_IF ACTIONS>
<TMPL_LOOP ACTIONS>
<li><TMPL_VAR ACTION></li>
</TMPL_LOOP>
</TMPL_IF>
</ul>
</nav>
</TMPL_IF>
</footer>
</body>
</html>