css and parser updates

1 files changed, 20 insertions, 13 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 6522a83..ed68b6f 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -1,4 +1,14 @@
-body { margin: 0; }
+body {
+	margin: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
 
 .mobile #card .foreign { font-size: 1.75rem; }
 .mobile #card .native { font-size: 1.25rem; }
@@ -7,7 +17,7 @@ body { margin: 0; }
 #card .native { font-size: 1.0rem; }
 
 #card { text-align: center; }
-#card span { display: block; }
+#card > * > span { display: block; }
 
 #separator {
 	border: none;
@@ -28,7 +38,7 @@ body { margin: 0; }
 	display: none;
 }
 
-#sentence-translation { margin-top: 1em; }
+#card #back #sentence-translation { margin-top: 2em; }
 
 .spoiler {
 	transition: filter 300ms;
@@ -37,12 +47,12 @@ body { margin: 0; }
 .spoiler.hidden { filter: blur(0.3rem); }
 .spoiler.visible { filter: blur(0rem); }
 
+#card.horizontal-layout { width: 100vw; }
+#card.vertical-layout { height: 100vh; }
 #card.vertical-layout > * { grid-row: 1; }
 #card.vertical-layout {
 	display: grid;
 	grid-auto-columns: 1fr auto auto;
-	height: 100vh;
-	overflow: hidden;
 }
 #card.vertical-layout #back { flex-direction: column; }
 #card.vertical-layout #back,
@@ -55,8 +65,8 @@ body { margin: 0; }
 #card.vertical-layout #separator { grid-column: 2; }
 #card.vertical-layout #front { grid-column: 3; }
 
-#card.horizontal-layout span,
-#card.vertical-layout #back span {
+#card.horizontal-layout > * > span,
+#card.vertical-layout > #back > span {
 	padding: 0 1em;
 	margin: 0.5em auto;
 }
@@ -66,10 +76,9 @@ body { margin: 0; }
 	margin: auto 0.5em;
 }
 
-#card.vertical-layout #sentence {
-	writing-mode: vertical-rl;
-}
+#card.vertical-layout #sentence { writing-mode: vertical-rl; }
 
+#card.vertical-layout #sentence { max-height: 30em; }
 #card.horizontal-layout span,
 #card.vertical-layout #back span {
 	max-width: 30em;
@@ -77,7 +86,5 @@ body { margin: 0; }
 	margin-right: auto;
 }
 
-#card.vertical-layout #sentence {
-	max-height: 30em;
-}
+#card.vertical-layout #target-word-reading .reading { display: block; }