Added a book look&feel, import template

This commit is contained in:
Yann Esposito (Yogsototh) 2020-11-02 14:28:35 +01:00
parent 18eef9363e
commit ddfec773bd
Signed by untrusted user who does not match committer: yogsototh
GPG Key ID: 7B19A4C650D59646
8 changed files with 89 additions and 93 deletions

View File

@ -430,7 +430,10 @@ cleanRule =
mkGetTemplate :: Rules (FilePath -> Action Template)
mkGetTemplate = newCache $ \path -> do
fileContent <- readFile' path
let res = compileMustacheText "page" (toS fileContent)
header <- readFile' ("templates" </> "header.mustache")
menu <- readFile' ("templates" </> "menu.mustache")
let withIncludes = fileContent & toS & T.replace "{{>header}}" (toS header) & T.replace "{{>menu}}" (toS menu)
res = compileMustacheText "page" (toS withIncludes)
case res of
Left _ -> fail "BAD"
Right template -> return template

View File

@ -1,8 +1,8 @@
#!/usr/bin/env zsh
cd "$(git rev-parse --show-toplevel)" || exit 1
echo "Watching $PWD/src"
echo "Watching $PWD/{src,templates}"
# fswatch --exclude='\\.#' src | while read event; do
fswatch --exclude='^.*\.#.*$' src | while read event; do
fswatch --exclude='^.*\.#.*$' src templates | while read event; do
echo "$event"
./engine/build.sh fast
done

View File

@ -204,6 +204,48 @@ input#g:checked ~ div pre {
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
/* plain checked */
input#b:checked ~ div {
--y: #b58900;
--o: #cb4b16;
--r: #dc322f;
--m: #d33682;
--v: #6c71c4;
--b: #268bd2;
--c: #2aa198;
--g: #859900;
--b03: #002b36;
--b02: #073642;
--b01: #586e75;
--b00: #657b83;
--b0: #839496;
--b1: #93a1a1;
--b2: #eee8d5;
--b3: #fdf6e3;
--hl: var(--y);
--bg: var(--b3);
--rbg: var(--b2);
--fg: var(--b00);
--fg0: var(--b1);
--rfg: var(--b01);
font-family: Hoefler Text, serif;
font-size: 21px;
line-height: 1.35em;
}
input#b:checked ~ div #content {
overflow: visible;
}
input#b:checked ~ div img {
border: solid 1px;
filter: brightness(0.8) sepia(30%) saturate(0.8);
}
input#b:checked ~ div pre {
background: var(--bg);
border-color: var(--rbg);
}
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
/* ---- */
::selection {
background: var(--m);

24
templates/header.mustache Normal file
View File

@ -0,0 +1,24 @@
<input name="t" type="radio" id="b">
<input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="b">book</label>&nbsp;
/&nbsp;
<label for="l">light</label>&nbsp;
<span id="logo">
<a href="/">
<svg width="5em" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
</svg>
</a>
</span>&nbsp;
<label for="d">dark</label>&nbsp;
/&nbsp;
<label for="g">geek</label>
</div>
</div>

View File

@ -12,26 +12,7 @@
<link rel="icon" href="/favicon.ico">
</head>
<body>
<input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="l">light</label>&nbsp;
<span id="logo">
<a href="/">
<svg width="5em" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
</svg>
</a>
</span>&nbsp;
<label for="d">dark</label>&nbsp;
/&nbsp;<label for="g">geek</label>
</div>
</div>
{{>header}}
<div class="main">
<div id="preamble" class="status">
<div class="content"><h1>{{title}}</h1></div>
@ -41,16 +22,7 @@
</div>
<div id="postamble" class="status">
<div class="content">
<nav>
<a href="/index.html">Home</a> |
<a href="/archive.html">Posts</a> |
<a href="/slides.html">Slides</a> |
<a href="/about-me.html">About</a>
<span class="details"> (<a href="https://gitea.esy.fun/yogsototh">code</a>
<a href="https://espial.esy.fun/u:yogsototh">bookmarks</a>
<a href="https://espial.esy.fun/u:yogsototh/notes">notes</a>)</span> |
<a href="#preamble">↑ Top ↑</a>
</nav>
{{>menu}}
</div>
</div>
</div>

10
templates/menu.mustache Normal file
View File

@ -0,0 +1,10 @@
<nav>
<a href="/index.html">Home</a> |
<a href="/archive.html">Posts</a> |
<a href="/slides.html">Slides</a> |
<a href="/about-me.html">About</a>
<span class="details"> (<a href="https://gitea.esy.fun/yogsototh">code</a>
<a href="https://espial.esy.fun/u:yogsototh">bookmarks</a>
<a href="https://espial.esy.fun/u:yogsototh/notes">notes</a>)</span> |
<a href="#preamble">↑ Top ↑</a>
</nav>

View File

@ -10,26 +10,7 @@
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
</head>
<body>
<input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="l">light</label>&nbsp;
<span id="logo">
<a href="/">
<svg viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
</svg>
</a>
</span>&nbsp;
<label for="d">dark</label>&nbsp;
/&nbsp;<label for="g">geek</label>
</div>
</div>
{{>header}}
<div class="main">
<div id="preamble" class="status">
<div class="content">
@ -53,16 +34,7 @@
</div>
<div id="postamble" class="status">
<div class="content">
<nav>
<a href="/index.html">Home</a> |
<a href="/archive.html">Posts</a> |
<a href="/slides.html">Slides</a> |
<a href="/about-me.html">About</a>
<span class="details"> (<a href="https://gitea.esy.fun/yogsototh">code</a>
<a href="https://espial.esy.fun/u:yogsototh">bookmarks</a>
<a href="https://espial.esy.fun/u:yogsototh/notes">notes</a>)</span> |
<a href="#preamble">↑ Top ↑</a>
</nav>
{{>menu}}
</div>
</div>
</div>

View File

@ -10,26 +10,8 @@
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/slides.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
</head>
<body><input name="t" type="radio" id="l">
<input name="t" type="radio" id="d">
<input name="t" type="radio" id="g">
<div id="labels">
<div class="content">
<label for="l">light</label>&nbsp;
<span id="logo">
<a href="/">
<svg viewBox="0 0 64 64">
<circle cx="32" cy="32" r="30" stroke="var(--b2)" stroke-width="2" fill="var(--b03)"/>
<circle cx="32" cy="32" r="12" stroke="var(--r)" stroke-width="2" fill="var(--o)"/>
<circle cx="32" cy="32" r="6" stroke-width="0" fill="var(--y)"/>
<ellipse cx="32" cy="14" rx="14" ry="8" stroke-width="0" fill="var(--b3)"/>
</svg>
</a>
</span>&nbsp;
<label for="d">dark</label>&nbsp;
/&nbsp;<label for="g">geek</label>
</div>
</div>
<body>
{{>header}}
<div class="main">
<div id="preamble" class="status">
<div class="content">
@ -53,16 +35,7 @@
</div>
<div id="postamble" class="status">
<div class="content">
<nav>
<a href="/index.html">Home</a> |
<a href="/archive.html">Posts</a> |
<a href="/slides.html">Slides</a> |
<a href="/about-me.html">About</a>
<span class="details"> (<a href="https://gitea.esy.fun/yogsototh">code</a>
<a href="https://espial.esy.fun/u:yogsototh">bookmarks</a>
<a href="https://espial.esy.fun/u:yogsototh/notes">notes</a>)</span> |
<a href="#preamble">↑ Top ↑</a>
</nav>
{{>menu}}
</div>
</div>
</div>