Implement Bible desk study layout
This commit is contained in:
+308
-4
@@ -378,7 +378,7 @@ textarea:focus-visible {
|
||||
.study-desk.study,
|
||||
.study-desk.notes,
|
||||
.study-desk.compare {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 40fr) 6px minmax(0, 20fr) 6px minmax(0, 40fr);
|
||||
}
|
||||
|
||||
.split-resizer {
|
||||
@@ -519,9 +519,10 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.page-verse {
|
||||
position: relative;
|
||||
break-inside: avoid;
|
||||
margin: 0 0 9px;
|
||||
padding: 3px 4px;
|
||||
padding: 3px 4px 3px 16px;
|
||||
color: #1f211e;
|
||||
font-size: 18px;
|
||||
line-height: 1.58;
|
||||
@@ -533,6 +534,41 @@ textarea:focus-visible {
|
||||
background: #f4ecd8;
|
||||
}
|
||||
|
||||
.page-verse.previewed {
|
||||
border-radius: 5px;
|
||||
background: #f8f2e4;
|
||||
}
|
||||
|
||||
.page-verse.has-margin-note::before,
|
||||
.page-verse.range-anchored::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 2px;
|
||||
width: 7px;
|
||||
border-top: 1px solid rgba(47, 111, 94, 0.45);
|
||||
border-bottom: 1px solid rgba(47, 111, 94, 0.45);
|
||||
border-left: 2px solid rgba(47, 111, 94, 0.48);
|
||||
border-radius: 7px 0 0 7px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.verse-note-markers {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin-right: 5px;
|
||||
border: 1px solid rgba(47, 111, 94, 0.32);
|
||||
border-radius: 50%;
|
||||
background: rgba(47, 111, 94, 0.1);
|
||||
color: #225446;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-verse sup {
|
||||
margin-right: 5px;
|
||||
color: #8a6d2e;
|
||||
@@ -622,7 +658,7 @@ textarea:focus-visible {
|
||||
|
||||
.margin-resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
}
|
||||
@@ -826,10 +862,63 @@ textarea:focus-visible {
|
||||
.commentary-card,
|
||||
.dictionary-card,
|
||||
.map-card,
|
||||
.audio-card {
|
||||
.audio-card,
|
||||
.margin-note-card,
|
||||
.compact-commentary-card,
|
||||
.margin-stack-links {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.margin-note-card {
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.marker-row,
|
||||
.margin-stack-links div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.marker-row button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border-color: #d8cfbf;
|
||||
background: #fbf8ef;
|
||||
color: #225446;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.marker-row button.active {
|
||||
border-color: #2f6f5e;
|
||||
background: #2f6f5e;
|
||||
color: #fffef8;
|
||||
}
|
||||
|
||||
.margin-note-input {
|
||||
min-height: 94px;
|
||||
resize: vertical;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.compact-commentary-card p {
|
||||
margin: 0;
|
||||
color: #3f443d;
|
||||
font-size: 12px;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.compact-commentary-card button,
|
||||
.margin-stack-links button {
|
||||
justify-self: start;
|
||||
border-color: #d8cfbf;
|
||||
background: #fbf8ef;
|
||||
}
|
||||
|
||||
.commentary-list,
|
||||
.dictionary-list {
|
||||
display: grid;
|
||||
@@ -1083,6 +1172,221 @@ textarea:focus-visible {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.study-stack {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.study-stack.pinned {
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.study-stack.unpinned {
|
||||
position: relative;
|
||||
z-index: 18;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.study-stack.unpinned .study-stack-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 44px;
|
||||
width: min(560px, calc(100vw - 104px));
|
||||
height: 100vh;
|
||||
box-shadow: -18px 0 42px rgba(17, 20, 17, 0.24);
|
||||
}
|
||||
|
||||
.study-stack-tabs {
|
||||
display: grid;
|
||||
grid-auto-rows: minmax(42px, auto);
|
||||
gap: 0;
|
||||
align-content: start;
|
||||
min-height: 0;
|
||||
border: 1px solid #d1cab9;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #1f231f;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.study-stack-tabs button {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 5px 3px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #3c4239;
|
||||
border-radius: 0;
|
||||
background: #252b25;
|
||||
color: #f6f3eb;
|
||||
font-size: 10px;
|
||||
line-height: 1.05;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.study-stack-tabs button.active {
|
||||
background: #d6a84f;
|
||||
color: #141510;
|
||||
}
|
||||
|
||||
.study-stack-tabs .pin-stack {
|
||||
background: #2f6f5e;
|
||||
color: #fffef8;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.study-stack-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
border: 1px solid #d4cdbd;
|
||||
border-left: 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: #fffef8;
|
||||
box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
|
||||
}
|
||||
|
||||
.stack-book {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
align-content: start;
|
||||
min-height: 100%;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stack-book > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e4e0d6;
|
||||
}
|
||||
|
||||
.stack-book h2,
|
||||
.stack-book h3,
|
||||
.stack-book h4 {
|
||||
margin: 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.stack-book > header h2 {
|
||||
color: #202124;
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.stack-book > header span:last-child {
|
||||
color: #657061;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.notebook-book textarea {
|
||||
min-height: 360px;
|
||||
resize: vertical;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-book article {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid #eee7d8;
|
||||
}
|
||||
|
||||
.article-book h3 {
|
||||
color: #202124;
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.article-book h4 {
|
||||
color: #657061;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.article-book p {
|
||||
margin: 0;
|
||||
color: #3f443d;
|
||||
font-size: 15px;
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.article-kicker,
|
||||
.article-pronunciation {
|
||||
color: #657061;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wiki-article-list {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wiki-article-list article section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stack-token-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stack-token-grid button {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
justify-items: start;
|
||||
border-color: #ded6c7;
|
||||
background: #fbf8ef;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stack-token-grid button.active {
|
||||
border-color: #2f6f5e;
|
||||
background: #eef6f1;
|
||||
}
|
||||
|
||||
.stack-token-grid span {
|
||||
color: #657061;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-result-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.search-result-list button {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
justify-items: start;
|
||||
padding: 10px;
|
||||
border-color: #ded6c7;
|
||||
background: #fbf8ef;
|
||||
color: #202124;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.search-result-list button.active {
|
||||
border-color: #2f6f5e;
|
||||
background: #eef6f1;
|
||||
}
|
||||
|
||||
.search-result-list span {
|
||||
color: #3f443d;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.notes-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user