diff options
author | lonkaars <loek@pipeframe.xyz> | 2023-01-04 23:16:29 +0100 |
---|---|---|
committer | lonkaars <loek@pipeframe.xyz> | 2023-01-04 23:16:29 +0100 |
commit | 39aae80a3106ec6c5e792ab2934edb0425a63618 (patch) | |
tree | 0d2762a99be2acadaa560fbed6f1a599ccda0662 /anki-card-template/card.css | |
parent | b49925b09a8962411706b00a446f5cd84007a086 (diff) |
add vertical layout for mobile screens
Diffstat (limited to 'anki-card-template/card.css')
-rw-r--r-- | anki-card-template/card.css | 58 |
1 files changed, 42 insertions, 16 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 8c2b0d0..38d923d 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -1,25 +1,24 @@ -.mobile .card .foreign { font-size: 1.75rem; } -.mobile .card .native { font-size: 1.25rem; } +.mobile #card .foreign { font-size: 1.75rem; } +.mobile #card .native { font-size: 1.25rem; } -.card .foreign { font-size: 1.5rem; } -.card .native { font-size: 1.0rem; } +#card .foreign { font-size: 1.5rem; } +#card .native { font-size: 1.0rem; } -.card { text-align: center; } -.card span { display: block; } +#card { text-align: center; } +#card span { display: block; } -hr { - height: 10px; +#separator { border: none; opacity: 20%; } -hr { background-color: black; } -.nightMode hr { background-color: white; } - -.card.front #target-word-reading, -.card.front #target-word-translation, -.card.front #sentence-translation, -.card.front hr, -.card.front ruby rt.hidden { +#separator { background-color: black; } +.nightMode #separator { background-color: white; } + +#card.front #target-word-reading, +#card.front #target-word-translation, +#card.front #sentence-translation, +#card.front hr, +#card.front ruby rt.hidden { display: none; } @@ -31,3 +30,30 @@ hr { background-color: black; } } .spoiler.hidden { filter: blur(0.3rem); } .spoiler.visible { filter: blur(0rem); } + +#card.vertical-layout > * { grid-row: 1; } +#card.vertical-layout { + display: grid; + grid-auto-columns: 1fr auto auto; +} +#card.vertical-layout #back { + display: flex; + flex-direction: column; + justify-content: center; +} + +#card.vertical-layout #back { grid-column: 1; } +#card.vertical-layout #separator { grid-column: 2; } +#card.vertical-layout #front { grid-column: 3; } + +#card.vertical-layout #sentence { writing-mode: vertical-rl; } + +#card.horizontal-layout #separator { + height: 10px; + margin: 1em 0; +} +#card.vertical-layout #separator { + width: 10px; + margin: 0 1em; +} + |