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