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 = 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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
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">
|
||||
</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>
|
||||
<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>
|
||||
{{>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
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">
|
||||
</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>
|
||||
<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>
|
||||
{{>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>
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue