Added more responisiveness to Letter View; TODO: copy letterrules to traditionrules

This commit is contained in:
schnulller
2022-05-26 17:18:50 +02:00
parent 469a2e256e
commit 6433fa7c01
11 changed files with 200 additions and 80 deletions

View File

@@ -488,7 +488,7 @@ body {
display: flex;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-topnav {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -615,7 +615,7 @@ body {
line-height: 1.75rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-footer {
padding: 1rem;
}
@@ -657,7 +657,7 @@ body {
hyphens: auto;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-static {
padding-left: 4rem;
padding-right: 4rem;
@@ -799,7 +799,7 @@ body {
padding-top: 2.25rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-register-head, .ha-register .ha-register-body {
padding-left: 4rem;
padding-right: 4rem;
@@ -846,7 +846,7 @@ body {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-register-head .ha-register-nav a {
margin-right: 0.75rem;
}
@@ -874,7 +874,7 @@ body {
padding-bottom: 2.25rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-register-body {
padding-right: 24rem;
padding-bottom: 3rem;
@@ -886,7 +886,7 @@ body {
display: block;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-register-body .ha-comment {
margin-bottom: 3rem;
}
@@ -946,7 +946,7 @@ body {
text-indent: -1rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-forschung .ha-register-body .ha-comment {
margin-bottom: 1.5rem;
}
@@ -965,7 +965,7 @@ body {
font-variant-caps: all-petite-caps;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
font-size: 0.875rem;
line-height: 1.25rem;
@@ -1163,7 +1163,7 @@ body {
padding-top: 2rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-letterheader {
padding-left: 4rem;
padding-right: 4rem;
@@ -1197,7 +1197,7 @@ body {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-letterheader .ha-lettertabs a {
margin-right: 0.75rem;
}
@@ -1342,11 +1342,11 @@ body {
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
position: absolute;
right: -28rem;
right: -21rem;
margin-right: 1rem;
margin-top: 0.25rem;
display: flex;
width: 24rem;
display: none;
width: 19rem;
flex-wrap: wrap;
border-radius: 0.125rem;
border-left-width: 2px;
@@ -1365,6 +1365,19 @@ body {
hyphens: auto;
}
@media (min-width: 960px) {
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
display: flex;
}
}
@media (min-width: 1190px) {
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
right: -28rem;
width: 24rem;
}
}
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
display: inline-block;
}
@@ -1411,7 +1424,7 @@ body {
.ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
position: absolute;
right: -2.5rem;
right: -0.5rem;
margin-top: 2px;
display: none;
cursor: pointer;
@@ -1425,12 +1438,18 @@ body {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
@media (min-width: 1190px) {
@media (min-width: 960px) {
.ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
display: block;
}
}
@media (min-width: 1190px) {
.ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
right: -2.5rem;
}
}
.ha-additions .ha-hands {
padding-top: 1.5rem;
}
@@ -1457,9 +1476,13 @@ body {
font-weight: 700;
}
.ha-additions .ha-edits .ha-editentries .ha-editfrom, .ha-additions .ha-edits .ha-editentries .ha-editto {
.ha-additions .ha-edits .ha-editentries .ha-editfromto {
white-space: nowrap;
}
.ha-additions .ha-edits .ha-editentries .ha-editfrom, .ha-additions .ha-edits .ha-editentries .ha-editto {
display: inline;
white-space: nowrap;
padding-left: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
@@ -1481,9 +1504,13 @@ body {
font-weight: 700;
}
.ha-additions .ha-edits .ha-editentries td {
padding-right: 1rem;
vertical-align: top;
.ha-additions .ha-edits .ha-editsinfo {
margin-right: 18rem;
padding-bottom: 1rem;
}
.ha-additions .ha-edits .ha-editentries tr td {
vertical-align: text-top;
}
.ha-additions .ha-edits .ha-editentries .ha-editreas div {
@@ -1492,14 +1519,31 @@ body {
}
.ha-additions .ha-edits .ha-editentries table {
width: 100%;
/* @apply w-full */
}
.ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(1) {
padding-right: 0.25rem;
padding-left: 0.25rem;
text-align: right;
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2) {
border-right-width: 2px;
padding-left: 0.25rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(3) {
padding-left: 0.75rem;
}
/* .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
@apply bg-slate-200
} */
.ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
font-family: Libertine, serif !important;
}
@@ -1548,11 +1592,11 @@ body {
.ha-lettertext .ha-marginalbox {
position: absolute;
right: -28rem;
right: -21rem;
margin-right: 1rem;
margin-top: 0.25rem;
display: flex;
width: 24rem;
display: none;
width: 19rem;
flex-wrap: wrap;
border-radius: 0.125rem;
border-left-width: 2px;
@@ -1571,6 +1615,19 @@ body {
hyphens: auto;
}
@media (min-width: 960px) {
.ha-lettertext .ha-marginalbox {
display: flex;
}
}
@media (min-width: 1190px) {
.ha-lettertext .ha-marginalbox {
right: -28rem;
width: 24rem;
}
}
.ha-lettertext .ha-marginalbox .ha-marginal {
display: inline-block;
}
@@ -1604,7 +1661,7 @@ body {
.ha-lettertext .ha-btn-collapsed-box {
position: absolute;
right: -2.5rem;
right: -0.5rem;
margin-top: 2px;
display: none;
cursor: pointer;
@@ -1618,12 +1675,18 @@ body {
color: rgb(15 23 42 / var(--tw-text-opacity));
}
@media (min-width: 1190px) {
@media (min-width: 960px) {
.ha-lettertext .ha-btn-collapsed-box {
display: block;
}
}
@media (min-width: 1190px) {
.ha-lettertext .ha-btn-collapsed-box {
right: -2.5rem;
}
}
/* Classes from the General parser */
/* Classes from .NET */
@@ -1657,26 +1720,26 @@ body {
font-family: Libertine, serif;
}
.ha-aq, .ha-aq * :not(.ha-marginal *, .ha-marginal) {
.ha-aq, .ha-aq * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
font-family: Biolinum, sans-serif;
}
.ha-ul, .ha-ul * :not(.ha-marginal *, .ha-marginal) {
.ha-ul, .ha-ul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.ha-del, .ha-del * :not(.ha-marginal *, .ha-marginal) {
.ha-del, .ha-del * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
}
.ha-hand, .ha-hand * :not(.ha-marginal *, .ha-marginal) {
.ha-hand, .ha-hand * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
font-family: Playfair, serif;
font-size: 0.9rem;
}
.ha-added, .ha-added * :not(.ha-marginal *, .ha-marginal) {
.ha-added, .ha-added * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
border-radius: 0.125rem;
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
@@ -1684,7 +1747,7 @@ body {
padding-right: 0.25rem;
}
.ha-note, .ha-note * :not(.ha-marginal *, .ha-marginal) {
.ha-note, .ha-note * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
font-style: italic;
--tw-text-opacity: 1;
color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -1717,7 +1780,7 @@ body {
line-height: 1;
}
.ha-ful, .ha-ful * :not(.ha-marginal *, .ha-marginal) {
.ha-ful, .ha-ful * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
display: inline;
border-bottom-width: 1px;
--tw-border-opacity: 1;
@@ -1725,14 +1788,14 @@ body {
padding-bottom: 2px;
}
.ha-dul, .ha-dul * :not(.ha-marginal *, .ha-marginal) {
.ha-dul, .ha-dul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: double;
text-decoration-style: double;
}
.ha-tul, .ha-tul * :not(.ha-marginal *, .ha-marginal) {
.ha-tul, .ha-tul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
border-bottom-width: 3px;
border-style: double;
--tw-border-opacity: 1;
@@ -1796,7 +1859,7 @@ body {
line-height: 1.5rem;
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.ha-topnav.ha-topnav-collapsed {
font-size: 1.125rem;
line-height: 1.75rem;
@@ -2295,6 +2358,10 @@ body {
content: ']';
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
content: ']';
}
* {
-webkit-text-decoration-skip-ink: all;
text-decoration-skip-ink: all;
@@ -3065,7 +3132,7 @@ body {
}
}
@media (min-width: 1024px) {
@media (min-width: 960px) {
.md\:inline {
display: inline;
}

View File

@@ -461,7 +461,7 @@
}
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
@apply absolute -right-[28rem] w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans flex flex-wrap
@apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap
}
.ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
@@ -485,7 +485,7 @@
}
.ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
@apply hidden desktop:block absolute text-slate-600 hover:text-slate-900 cursor-pointer -right-[2.5rem] leading-none mt-[2px]
@apply hidden md:block absolute text-slate-600 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px]
}
.ha-additions .ha-hands {
@@ -496,7 +496,6 @@
@apply font-bold
}
.ha-additions .ha-hands .ha-handentries .ha-handfrom,
.ha-additions .ha-hands .ha-handentries .ha-handto {
@apply inline text-sm font-semibold whitespace-nowrap
@@ -510,10 +509,13 @@
@apply font-bold
}
.ha-additions .ha-edits .ha-editentries .ha-editfromto {
@apply whitespace-nowrap
}
.ha-additions .ha-edits .ha-editentries .ha-editfrom,
.ha-additions .ha-edits .ha-editentries .ha-editto {
@apply text-sm font-semibold pl-1 whitespace-nowrap
@apply inline text-sm font-semibold whitespace-nowrap
}
.ha-additions .ha-edits .ha-editentries .ha-editreference {
@@ -532,8 +534,12 @@
@apply font-bold
}
.ha-additions .ha-edits .ha-editentries td {
@apply pr-4 align-top
.ha-additions .ha-edits .ha-editsinfo {
@apply mr-72 pb-4
}
.ha-additions .ha-edits .ha-editentries tr td {
@apply align-text-top
}
.ha-additions .ha-edits .ha-editentries .ha-editreas div {
@@ -541,13 +547,25 @@
}
.ha-additions .ha-edits .ha-editentries table {
@apply w-full
/* @apply w-full */
}
.ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
@apply bg-slate-200
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(1) {
@apply pr-1 pl-1 text-right
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2) {
@apply border-r-2 pl-1 pr-3 text-sm
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(3) {
@apply pl-3
}
/* .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
@apply bg-slate-200
} */
.ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
@apply !font-serif
}
@@ -578,7 +596,7 @@
}
.ha-lettertext .ha-marginalbox {
@apply absolute -right-[28rem] w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans flex flex-wrap
@apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap
}
.ha-lettertext .ha-marginalbox .ha-marginal {
@@ -602,7 +620,7 @@
}
.ha-lettertext .ha-btn-collapsed-box {
@apply hidden desktop:block absolute text-slate-700 hover:text-slate-900 cursor-pointer -right-[2.5rem] leading-none mt-[2px]
@apply hidden md:block absolute text-slate-700 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px]
}
@@ -636,32 +654,32 @@
}
.ha-aq,
.ha-aq * :not(.ha-marginal *, .ha-marginal) {
.ha-aq * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply font-sans
}
.ha-ul,
.ha-ul * :not(.ha-marginal *, .ha-marginal) {
.ha-ul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply underline
}
.ha-del,
.ha-del * :not(.ha-marginal *, .ha-marginal) {
.ha-del * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply line-through
}
.ha-hand,
.ha-hand * :not(.ha-marginal *, .ha-marginal) {
.ha-hand * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply font-classy text-[0.9rem]
}
.ha-added,
.ha-added * :not(.ha-marginal *, .ha-marginal) {
.ha-added * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply bg-slate-300 px-1 rounded-sm
}
.ha-note,
.ha-note * :not(.ha-marginal *, .ha-marginal) {
.ha-note * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply italic text-slate-700
}
@@ -679,17 +697,17 @@
}
.ha-ful,
.ha-ful * :not(.ha-marginal *, .ha-marginal) {
.ha-ful * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply inline border-b border-black pb-[2px]
}
.ha-dul,
.ha-dul * :not(.ha-marginal *, .ha-marginal) {
.ha-dul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply underline decoration-double
}
.ha-tul,
.ha-tul * :not(.ha-marginal *, .ha-marginal) {
.ha-tul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
@apply underline border-b-[3px] border-double border-black
}
@@ -814,6 +832,10 @@
content: ']';
}
.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
content: ']';
}
* {
text-decoration-skip-ink: all;
}