diff options
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | back-template.m4 | 15 | ||||
| -rw-r--r-- | card/card.css | 8 | ||||
| -rw-r--r-- | front-template.m4 | 10 | ||||
| -rw-r--r-- | makefile | 15 |
5 files changed, 50 insertions, 0 deletions
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 |