Added a book look&feel, import template
This commit is contained in:
parent
18eef9363e
commit
ddfec773bd
|
@ -430,7 +430,10 @@ cleanRule =
|
||||||
mkGetTemplate :: Rules (FilePath -> Action Template)
|
mkGetTemplate :: Rules (FilePath -> Action Template)
|
||||||
mkGetTemplate = newCache $ \path -> do
|
mkGetTemplate = newCache $ \path -> do
|
||||||
fileContent <- readFile' path
|
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
|
case res of
|
||||||
Left _ -> fail "BAD"
|
Left _ -> fail "BAD"
|
||||||
Right template -> return template
|
Right template -> return template
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
#!/usr/bin/env zsh
|
#!/usr/bin/env zsh
|
||||||
cd "$(git rev-parse --show-toplevel)" || exit 1
|
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 | while read event; do
|
fswatch --exclude='^.*\.#.*$' src templates | while read event; do
|
||||||
echo "$event"
|
echo "$event"
|
||||||
./engine/build.sh fast
|
./engine/build.sh fast
|
||||||
done
|
done
|
||||||
|
|
|
@ -204,6 +204,48 @@ input#g:checked ~ div pre {
|
||||||
|
|
||||||
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
|
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 {
|
::selection {
|
||||||
background: var(--m);
|
background: var(--m);
|
||||||
|
|
24
templates/header.mustache
Normal file
24
templates/header.mustache
Normal 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>
|
||||||
|
/
|
||||||
|
<label for="l">light</label>
|
||||||
|
<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>
|
||||||
|
<label for="d">dark</label>
|
||||||
|
/
|
||||||
|
<label for="g">geek</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -12,26 +12,7 @@
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input name="t" type="radio" id="l">
|
{{>header}}
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<label for="d">dark</label>
|
|
||||||
/ <label for="g">geek</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div id="preamble" class="status">
|
<div id="preamble" class="status">
|
||||||
<div class="content"><h1>{{title}}</h1></div>
|
<div class="content"><h1>{{title}}</h1></div>
|
||||||
|
@ -41,16 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="postamble" class="status">
|
<div id="postamble" class="status">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<nav>
|
{{>menu}}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
10
templates/menu.mustache
Normal file
10
templates/menu.mustache
Normal 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>
|
|
@ -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">
|
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input name="t" type="radio" id="l">
|
{{>header}}
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<label for="d">dark</label>
|
|
||||||
/ <label for="g">geek</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div id="preamble" class="status">
|
<div id="preamble" class="status">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -53,16 +34,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="postamble" class="status">
|
<div id="postamble" class="status">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<nav>
|
{{>menu}}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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/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">
|
<link rel="stylesheet" href="/css/slides.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body><input name="t" type="radio" id="l">
|
<body>
|
||||||
<input name="t" type="radio" id="d">
|
{{>header}}
|
||||||
<input name="t" type="radio" id="g">
|
|
||||||
<div id="labels">
|
|
||||||
<div class="content">
|
|
||||||
<label for="l">light</label>
|
|
||||||
<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>
|
|
||||||
<label for="d">dark</label>
|
|
||||||
/ <label for="g">geek</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div id="preamble" class="status">
|
<div id="preamble" class="status">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -53,16 +35,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="postamble" class="status">
|
<div id="postamble" class="status">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<nav>
|
{{>menu}}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue