Update "Japanese sentences (nb)" template
This commit merges changes from the original "Japanese sentences" template.
This commit is contained in:
Nikolay Belikov
parent
8cfd53c20b
commit
ef49995162
|
|
@ -15,12 +15,9 @@
|
|||
|
||||
<script>
|
||||
function threeDots() {
|
||||
const sent = document.getElementsByClassName("production")[0];
|
||||
if (sent) {
|
||||
for (const hidden of sent.getElementsByTagName("b")) {
|
||||
hidden.style.visibility = "visible";
|
||||
hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
|
||||
}
|
||||
for (const hidden of document.querySelectorAll(".production b, .production strong")) {
|
||||
hidden.style.visibility = "visible";
|
||||
hidden.innerText = "【" + hidden.innerText.replace(/[^ぁ-んァ-ン]/g, "") + "】";
|
||||
}
|
||||
}
|
||||
/* Splits tags into separate divs */
|
||||
|
|
|
|||
|
|
@ -1,19 +1,27 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@font-face {
|
||||
font-family: "KanjiStrokeOrders";
|
||||
src: local("KanjiStrokeOrders"), url("_kso.ttf");
|
||||
}
|
||||
@media screen and (min-width: 900px) {
|
||||
|
||||
@font-face {
|
||||
font-family: "Yu Mincho";
|
||||
src: local("Yu Mincho"), local("游明朝"), url("_yumin.ttf");
|
||||
}
|
||||
/* Limit font loading to wide screens to avoid performance hits on mobile. */
|
||||
@font-face {
|
||||
font-family: "KanjiStrokeOrders";
|
||||
src: local("KanjiStrokeOrders"), url("_kso.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Yu Mincho";
|
||||
src: local("Yu Mincho Demibold"), local("游明朝 Demibold"), url("_yumindb.ttf");
|
||||
font-weight: 600;
|
||||
@font-face {
|
||||
font-family: "Yu Mincho";
|
||||
src: local("Yu Mincho"), local("游明朝"), url("_yumin.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Yu Mincho";
|
||||
src: local("Yu Mincho Demibold"), local("游明朝 Demibold"), url("_yumindb.ttf");
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -40,6 +48,7 @@
|
|||
.card2 .jpsentence ruby rt {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card2 .jpsentence:hover ruby rt {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -50,6 +59,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 800px;
|
||||
padding: 0 5px 0;
|
||||
|
|
@ -58,6 +68,7 @@
|
|||
border-right: 1px solid #c9bcbc;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.wrap .wrap {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
|
@ -73,10 +84,6 @@ hr {
|
|||
border-top: 1px solid #c9bcbc;
|
||||
}
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
color: #532f2f;
|
||||
|
|
@ -99,7 +106,8 @@ nokana ruby rt {
|
|||
display: none;
|
||||
}
|
||||
|
||||
notext b {
|
||||
notext b,
|
||||
notext strong {
|
||||
background-color: black;
|
||||
color: transparent;
|
||||
}
|
||||
|
|
@ -114,18 +122,11 @@ header .tags {
|
|||
border-radius: 0px 0px 3px 3px;
|
||||
}
|
||||
|
||||
header > div:not(:last-child) {
|
||||
header>div:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Space between elements */
|
||||
.images {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.images > img {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sent-center {
|
||||
display: flex;
|
||||
|
|
@ -140,7 +141,10 @@ header > div:not(:last-child) {
|
|||
font-size: 35px;
|
||||
}
|
||||
|
||||
.jpsentence b { color: Maroon; }
|
||||
.jpsentence b,
|
||||
.jpsentence strong {
|
||||
color: Maroon;
|
||||
}
|
||||
|
||||
/* Hide front side when the back is shown. */
|
||||
|
||||
|
|
@ -150,7 +154,7 @@ header > div:not(:last-child) {
|
|||
|
||||
/* English */
|
||||
|
||||
div.ensentence > a.hint {
|
||||
div.ensentence>a.hint {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
|
|
@ -159,7 +163,8 @@ div.ensentence > a.hint {
|
|||
padding: 2px 10px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
div.ensentence > a.hint:hover {
|
||||
|
||||
div.ensentence>a.hint:hover {
|
||||
color: #111;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
|
@ -231,18 +236,18 @@ footer {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
footer > a {
|
||||
footer>a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer > a:after {
|
||||
footer>a:after {
|
||||
content: "·";
|
||||
color: brown;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
footer > a:last-child:after {
|
||||
footer>a:last-child:after {
|
||||
content: "";
|
||||
width: 0;
|
||||
}
|
||||
|
|
@ -268,38 +273,51 @@ footer > a:last-child:after {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.vocab > .tags {
|
||||
.vocab>.tags {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.notes > .tags {
|
||||
.notes>.tags {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
margin: 10px 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: start;
|
||||
align-content: start;
|
||||
justify-content: space-around;
|
||||
gap: 5px;
|
||||
grid-auto-columns: minmax(100px, 1fr);
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
}
|
||||
|
||||
.images > img {
|
||||
max-width: 47%;
|
||||
.images br, .images > * {
|
||||
display: none;
|
||||
}
|
||||
.images img {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
filter: sepia(33%);
|
||||
}
|
||||
|
||||
.images > img:only-child {
|
||||
max-width: 100%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
.images img:nth-child(3n+1) {
|
||||
grid-column: 1;
|
||||
}
|
||||
.images img:nth-child(3n+2) {
|
||||
grid-column: 2;
|
||||
}
|
||||
.images img:nth-child(3n+3) {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
/* Production cards */
|
||||
|
||||
.production b {
|
||||
.production b,
|
||||
.production strong {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -321,27 +339,27 @@ ol {
|
|||
|
||||
/* Fix for Yomichan pitch accents */
|
||||
|
||||
.vocab ol > li {
|
||||
.vocab ol>li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.vocab ol > li:after {
|
||||
.vocab ol>li:after {
|
||||
content: "・";
|
||||
}
|
||||
|
||||
.vocab ol > li:last-child:after {
|
||||
.vocab ol>li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Night Mode */
|
||||
|
||||
.nightMode.card {
|
||||
color: #FFFFFF;
|
||||
background-color: #212121;
|
||||
background-color: #2F2F31;
|
||||
}
|
||||
|
||||
.nightMode .wrap {
|
||||
background-color: #2F2F31;
|
||||
color: #FFFFFF;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.nightMode .tags {
|
||||
|
|
@ -370,20 +388,21 @@ ol {
|
|||
color: #a33327;
|
||||
}
|
||||
|
||||
.nightMode .jpsentence b {
|
||||
.nightMode .jpsentence b,
|
||||
.nightMode .jpsentence strong {
|
||||
color: NavajoWhite;
|
||||
}
|
||||
|
||||
.nightMode .images > img {
|
||||
.nightMode .images>img {
|
||||
filter: sepia(0%);
|
||||
}
|
||||
|
||||
.nightMode div.ensentence > a.hint {
|
||||
.nightMode div.ensentence>a.hint {
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
.nightMode div.ensentence > a.hint:hover {
|
||||
.nightMode div.ensentence>a.hint:hover {
|
||||
color: gray;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue