updated card css (add column width limit)

1 files changed, 24 insertions, 7 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 22dada7..e072d75 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -12,10 +12,14 @@ body { margin: 0; }
 #separator {
 	border: none;
 	opacity: 20%;
+	margin: 0;
 }
 #separator { background-color: black; }
 .nightMode #separator { background-color: white; }
 
+#card.horizontal-layout #separator { height: 10px; }
+#card.vertical-layout #separator { width: 10px; }
+
 #card.front #target-word-reading,
 #card.front #target-word-translation,
 #card.front #sentence-translation,
@@ -51,17 +55,30 @@ 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 {
+	padding: 0 1em;
+	margin: 0.5em auto;
+}
+
+#card.vertical-layout #sentence {
+	padding: 1em 0;
+	margin: auto 0.5em;
+}
+
 #card.vertical-layout #sentence {
 	writing-mode: vertical-rl;
-	margin: 1em 0.5em;
+	text-orientation: upright;
 }
 
-#card.horizontal-layout #separator {
-	height: 10px;
-	margin: 1em 0;
+#card.horizontal-layout span,
+#card.vertical-layout #back span {
+	max-width: 30em;
+	margin-left: auto;
+	margin-right: auto;
 }
-#card.vertical-layout #separator {
-	width: 10px;
-	margin: 0 1em;
+
+#card.vertical-layout #sentence {
+	max-height: 30em;
 }