From 7ee2d6aa68bfb474f547cf88781fc43b9751d0cc Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Mon, 26 Dec 2022 14:11:57 +0100
Subject: back and front card template

---
 .gitignore        |  2 ++
 back-template.m4  | 15 +++++++++++++++
 card/card.css     |  8 ++++++++
 front-template.m4 | 10 ++++++++++
 makefile          | 15 +++++++++++++++
 5 files changed, 50 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 back-template.m4
 create mode 100644 front-template.m4
 create mode 100644 makefile

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cef3fa0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+*.html
+*.min.js
diff --git a/back-template.m4 b/back-template.m4
new file mode 100644
index 0000000..77a8abf
--- /dev/null
+++ b/back-template.m4
@@ -0,0 +1,15 @@
+<style>
+undivert(`card/card.css')
+</style>
+<script defer>
+undivert(`card.min.js')
+</script>
+
+<div class="card back">
+<span class="sentence">{{Complete sentence}}</span>
+<hr class="split">
+<span class="target-word-reading">{{Target word reading}}</span>
+<span class="target-word-translation">{{Target word translation}}</span>
+<span class="sentence-translation">{{Complete sentence translation}}</span>
+</div>
+
diff --git a/card/card.css b/card/card.css
index 2e41631..d5ce6cf 100644
--- a/card/card.css
+++ b/card/card.css
@@ -1,5 +1,10 @@
+.mobile .card {
+	font-size: 2.25rem;
+}
+
 .card {
 	text-align: center;
+	font-size: 1.75rem;
 }
 
 .card span {
@@ -9,7 +14,10 @@
 hr {
 	height: 10px;
 	border: none;
+	opacity: 20%;
+	background-color: black;
 }
+.nightMode hr { background-color: white; }
 
 .card.front .target-word-reading,
 .card.front .target-word-translation,
diff --git a/front-template.m4 b/front-template.m4
new file mode 100644
index 0000000..832069c
--- /dev/null
+++ b/front-template.m4
@@ -0,0 +1,10 @@
+<style>
+undivert(`card/card.css')
+</style>
+<script defer>
+undivert(`card.min.js')
+</script>
+
+<div class="card front">
+<span class="sentence">{{Complete sentence}}</span>
+</div>
diff --git a/makefile b/makefile
new file mode 100644
index 0000000..61b512f
--- /dev/null
+++ b/makefile
@@ -0,0 +1,15 @@
+all: back-template.html front-template.html
+
+.PRECIOUS: card.min.js
+
+card.min.js: card/card.js
+	sed 's/\/\/.*$$//g' $< | tr '\n' ' ' | sed 's/\t//g' | sed 's/  */ /g' > $@
+
+%.html: %.m4
+	m4 $< > $@
+
+back-template.html: card.min.js card/card.css
+front-template.html: card.min.js card/card.css
+
+clean:
+	$(RM) back-template.html front-template.html card.min.js
-- 
cgit v1.2.3