Den engelske Kirke
:root {
–message-text-indent: 1.2em;
font-size: 1.4rem;
}
.vassula{
font-style: italic;
font-size: 0.95em;
}
.tcenter > p{text-align: center;}
.tcenter{text-align: center;}
.tprayer > p{text-align: center;}
.tprayer{text-align: center;}
/*.tprayer > p{text-align: left; padding-left: 0.5em;}
.tprayer{text-align: left; padding-left: 1.5em;}
.tcenter p.vassula{ text-align: left;}*/
.leftimage {
display: flex;
align-items: center; /* vertical alignment */
gap: 0.5rem; /* space between image and text */
}
.timage-center {
vertical-align: middle;
}
.double-underline {
text-decoration: underline;
text-decoration-thickness: 2px;
}
p{
text-align: justify;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%; hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
.tverse > p{
margin: 0;
text-align: left;
}
.tverse > p:last-child{
margin-bottom: 1em;
}
/* Modern theme styles */
body.theme-modern {
font-family: ‘PT Serif’, serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
body.theme-modern .tverse > p:nth-child(even){
text-indent: var(–message-text-indent);
}
body.theme-modern .tgroup > p{
margin: 0;
text-indent: var(–message-text-indent);
}
body.theme-modern .tgroup > p:first-child{
margin: 0;
text-indent: 0;
}
body.theme-modern .tgroup > p:last-child{
margin-bottom: 1em;
}
/* Classic theme styles */
body.theme-classic {
font-family: “Times New Roman”, Times, serif;
line-height: 1.4;
color: #000;
background-color: #fdfdfd;
}
body.theme-classic .tverse > p:nth-child(even){
text-indent: 0;
}
body.theme-classic .tgroup > p{
margin-bottom: 1em;
text-indent: 0;
}
body.theme-classic .tgroup > p:first-child{
margin-bottom: 0;
text-indent: 0;
}
body.theme-classic .tgroup > p:last-child{
margin-bottom: 1em;
}
body.theme-classic .jc {
font-weight: 700;
}
body.theme-classic .vassula {
font-size: 1em;
}
article {
margin: 0 auto;
max-width: 70ch;
width: 100%;
}
.footnote{color:red;}
.bib-quote {
font-size: 0.8rem;
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
max-width: calc(100vw – 40px);
max-height: 70vh;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 2000;
flex-direction: column;
overflow: hidden;
}
.bib-quote.visible {
display: flex;
}
.bib-quote .heading {
font-size: 1em;
font-weight: bold;
padding: 10px 15px;
background-color: #f8f8f8;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.bib-quote .content {
font-size: 1em;
padding: 15px;
overflow-y: auto;
flex-grow: 1;
padding-top: 0;
}
.content blockquote { margin-left: 1em; margin-right: 0;}
.bib-quote .bverse {
color:gray;
vertical-align: super;
font-size: smaller;
}
.close-toast {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
padding: 0;
margin-left: 10px;
color: #999;
}
.close-toast:hover {
color: #333;
}
.bib-quote-link {
color: #5B7F29;
text-decoration: underline;
cursor: pointer;
}
aside.bib-quote::after {
content: “Bibelteksten er fra den autoriserede oversættelse, © Det Danske Bibelselskab 1992.”;
display: block;
font-size: 0.8em;
font-weight: bold;
padding: 10px 15px;
background: #fdfdfd;
border-top: 1px solid #eee;
}
aside:lang(en)::after {
content: “Bible text is from the authorized translation, © The Danish Bible Society 1992.”;
}
aside:lang(de)::after {
content: “Bibeltext ist aus der autorisierten Übersetzung, © Die Dänische Bibelgesellschaft 1992.”;
}
.control-panel {
position: fixed;
top: 10px;
right: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.control-panel label {
display: block;
margin-bottom: 10px;
font-size: 0.9rem;
}
.control-panel select {
margin-left: 10px;
padding: 5px;
border-radius: 4px;
font-size: 0.9rem;
}
.control-panel .toggle.disabled {
opacity: 0.5;
pointer-events: none;
}
/* Footnotes */
span[class=footnote] {
display: none;
}
.hideTip {
display: none !important;
}
.unhideTip {
display: table !important;
}
.invis {
/* Hide visually, but will be read by a screen reader – to work for all browsers*/
border: 0;
clip-path: inset(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
left: -9999px;
top: auto;
}
.fnNum::before {
content: “”;
}
.fnWrapper {
display: table;
margin-bottom: 0.5em;
}
.tipContent {
width: auto;
max-width: 95%;
z-index: 1080;
position: relative;
margin: 0;
padding: 0.3em;
border: 0.14em solid #848484;
color: #000000;
background-color: #ececec;
box-shadow: 0.2em 0.2em 0.5em rgba(15, 36, 27, 0.62);
text-align: left;
border-radius: 0.35em;
font-family: “PT Serif”, serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
display: table-cell;
}
/* ############ Formatting of Footnote numbers ############## */
.fnNum, .fnNumBase {
background-color: #fff;
white-space: nowrap;
text-decoration: none;
margin-right: 0.5em;
z-index: 400;
}
.fnNum {
padding: 0 0.063em 0.1em 0.063em;
font-size: smaller;
line-height: 1;
vertical-align: super;
color: #5B7F29;
}
.fnNum:hover, .fnNum:focus {
color: #e65252;
}
#Footnotes {
font-size: .9em;
margin: 2em 0 2em 0;
}
#Footnotes p {
display: flex;
flex-flow: row;
}
.fnNumBase {
flex-shrink: 0;
width: 1.5em;
text-decoration: underline;
}
.bib-quote-link img {
width: 1.2em;
height: 1.2em;
margin-right: 0.3em;
vertical-align: -5px;
}
.svg-sjesfish {display:block;margin: 0 auto;width: 10em; height: 3em;}
.svg-book {display: inline;width: 1.5em;height: 1.5em;vertical-align: middle;margin-right: 0.2em;
}
(function() {
document.addEventListener(“DOMContentLoaded”, function () {
SetupTips();
// updateFootnoteVisibility();
});
var themeSelector = document.getElementById(‘theme-selector’);
var savedTheme = localStorage.getItem(‘theme’) || ‘modern’;
document.body.className = ”;
document.body.classList.add(‘theme-‘ + savedTheme);
themeSelector.value = savedTheme;
themeSelector.addEventListener(‘change’, function(e) {
document.body.classList.remove(‘theme-modern’, ‘theme-classic’);
document.body.classList.add(‘theme-‘ + e.target.value);
localStorage.setItem(‘theme’, e.target.value);
});
document.addEventListener(‘click’, function(e) {
var target = e.target.closest(‘.fnNum’);
if (target && target.dataset.fnId) {
e.preventDefault();
showHide(target.dataset.fnId);
}
var quoteLink = e.target.closest(‘.bib-quote-link’);
if (quoteLink) {
e.preventDefault();
var id = quoteLink.getAttribute(‘href’).substring(1);
showQuote(id);
}
});
function showQuote(id) {
// Hide all other bref toasts first? Or allow multiple?
// The requirement doesn’t specify, but usually one at a time is better for toasts if they overlap.
document.querySelectorAll(‘.bib-quote’).forEach(el => el.classList.remove(‘visible’));
var el = document.getElementById(id);
if (el) {
el.classList.add(‘visible’);
}
}
window.hideQuote = function(id) {
var el = document.getElementById(id);
if (el) {
el.classList.remove(‘visible’);
}
}
function SetupTips() {
const fnotes = document.querySelectorAll(‘span[class^=”footnote”]’);
if (fnotes.length === 0) return;
let clsEnd = ”;
fnotes.forEach((myFn, i) => {
const myClass = Array.from(myFn.classList).find(c => c.startsWith(‘footnote’));
if (!myClass) return;
const sectionId = myClass.substring(8);
const footnoteContainer = document.getElementById(‘Footnotes’ + sectionId);
if (clsEnd !== sectionId && footnoteContainer) {
clsEnd = sectionId;
// Add a hidden link to skip the section
footnoteContainer.insertAdjacentHTML(‘beforebegin’, `Skip footnote section`);
footnoteContainer.insertAdjacentHTML(‘afterend’, ``);
}
const fnNumber = i + 1;
const myid = `Fn_${fnNumber}_${sectionId}`;
myFn.id = myid;
myFn.classList.add(‘hideTip’, ‘fnWrapper’);
myFn.setAttribute(‘role’, ‘complementary’);
const fnContent = myFn.innerHTML;
// Add the footnote reference to the text
const refLink = document.createElement(‘a’);
refLink.className = ‘fnNum’;
refLink.id = `${myid}a`;
refLink.href = `#ShowFootnote${fnNumber}`;
refLink.title = `Vis/Skjul fodnote ${fnNumber}`;
refLink.dataset.fnId = myid;
refLink.setAttribute(‘aria-expanded’, ‘false’);
refLink.setAttribute(‘aria-controls’, myid);
refLink.setAttribute(‘role’, ‘button’);
refLink.innerHTML = `[Footnote ${fnNumber}]`;
myFn.before(refLink);
// Wrap footnote content
myFn.innerHTML = `${fnContent}`;
// Add to collective section
if (footnoteContainer) {
const p = document.createElement(‘p’);
p.innerHTML = `Location of footnote ${fnNumber} ${fnContent}`;
footnoteContainer.appendChild(p);
// Clean up the “hidden” opening and closing tags in the collective section
const baseFn = p.querySelector(`#${myid}Base`);
baseFn.querySelectorAll(‘.fnHide’).forEach(el => el.remove());
}
// Add footnote number to the tooltip
const tooltipFnHide = myFn.querySelector(‘.fnHide’);
if (tooltipFnHide) {
tooltipFnHide.after(`${fnNumber}: `);
}
});
// Make the appropriate parts of the footnotes invisible except to screen readers
document.querySelectorAll(‘.fnHide’).forEach(el => el.classList.add(‘invis’));
}
function showHide(divID) {
const myDiv = document.getElementById(divID);
const link = document.getElementById(divID + ‘a’);
if (!myDiv || !link) return;
const isHidden = myDiv.classList.contains(‘hideTip’);
if (isHidden) {
myDiv.classList.replace(‘hideTip’, ‘unhideTip’);
link.setAttribute(‘aria-expanded’, ‘true’);
if (divID.startsWith(‘Fn_’)) {
link.querySelector(‘.fnNumIn’).innerHTML = ‘✖’;
}
} else {
myDiv.classList.replace(‘unhideTip’, ‘hideTip’);
link.setAttribute(‘aria-expanded’, ‘false’);
if (divID.startsWith(‘Fn_’)) {
const num = divID.split(‘_’)[1];
link.querySelector(‘.fnNumIn’).textContent = num;
}
}
}
function showAll() {
document.querySelectorAll(“.hideTip”).forEach(d => {
showHide(d.id);
});
}
function hideAll() {
document.querySelectorAll(“.unhideTip”).forEach(d => {
showHide(d.id);
});
}
// ######## End of function to set up showing or hiding of text #######
})();
Svg Vector Icons : http://www.onlinewebfonts.com/icon
