aixnr/pandoc-fira.html

## pandoc-fira.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="#" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--
    How to use Pandoc
    =================

    On linux, entr can help for automatic recompilation
    ls *.md | entr pandoc --standalone --template template.html <document>.md -o <output>.html
  -->

  <title>$title$</title>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');

    /* Reset */
    * { margin: 0; }

    /* Regular desktop screen override */
    @media (min-width: 768px) {
      .document-header, article { width: 840px; }
    }

    /* Mobile screen override */
    @media (max-width: 768px) {
      .document-header, article { width: 97.5%; }
      .modal-content { max-height: 80vh; max-width: 80vw }
    }

    .document-header {
      font-family: 'Playfair Display', serif;
      margin-inline: auto; margin-top: 21px;
      padding-bottom: 12px;
      border-bottom: 1px solid Gainsboro;
    }

    .document-header .title { font-size: 1.5rem; color: MidnightBlue; }
    .document-header .date { font-size: 0.9rem; color: DarkSlateGray; }
    .document-header .title, .document-header .date { margin-inline: 4px; }

    article {
      font-family: 'Fira Sans', sans-serif;
      color: DarkSlateGray;
      line-height: 2; font-size: 0.875rem;
      text-align: justify; text-justify: inter-word;
      margin-inline: auto;
      margin-bottom: 64px;
    }

    article p { margin-block: 21px; margin-inline: 4px; }

    article figure { margin-block: 21px; }

    article figure img { max-width: 100%; border: 1px solid Gainsboro; border-radius: 6px; }

    article figure figcaption {
      text-align: center; font-size: 0.9rem; line-height: 1.5;
      font-family: 'Sofia Sans Extra Condensed', sans-serif; color: DarkSlateGray; }

    article h4 {
      font-family: 'Playfair Display', serif; font-weight: 400;
      font-size: 1.1rem;
      border-bottom: 1px solid Gainsboro;
      margin-bottom: 16px;
    }

    article .attract {
      text-decoration: underline; text-underline-offset: 4px; color: DodgerBlue;
      padding-inline: 2px;
    }

    article table {
      width: 98%;
      border: 1px solid DimGray;
      margin-inline: auto;
      font-size: 0.8rem;
    }

    article table thead {
      background-color: DarkSlateGray; color: Snow;
    }

    article table thead tr th {
      padding-inline: 4px;
    }

    article table tbody tr:nth-child(even) {
      background-color: Gainsboro;
    }

    article table tbody tr td {
      padding-inline: 4px;
    }

    .footnote-circle {
      display: inline-block; margin-inline: 2px;
      font-family: 'JetBrains Mono', monospace; font-weight: 800;
      text-align: center;
      font-size: 0.6rem; line-height: 100%;
      background-color: DodgerBlue; color: White;
      width: 1.5rem;  padding-block: 3px;
      border-radius: 10%;
      cursor: pointer;
      transition: 500ms;
      position: relative; transform: translateY(-10%);
    }

    .footnote-circle:hover { background-color: MediumBlue; }

    .modal {
      visibility: hidden; opacity: 0;
      position: fixed;
      left: 0; top: 0; width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      transform: scale(1.1);
      transition: visibility 0s linear 250ms, opacity 250ms 0s, transform 250ms;
     }

     .modal .modal-content {
      position: fixed;
      width: 640px;
      background-color: Snow;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid Gainsboro; border-radius: 6px;
      padding: 4px 6px 36px 6px;
      overflow-y: scroll;
      font-size: 0.8rem; text-align: left; line-height: 1.75;
     }

     .modal .modal-close {
      font-family: 'JetBrains Mono', monospace;
      position: absolute;
      color: Snow; background-color: Tomato;
      padding-inline: 12px; padding-block: 1px;
      border-radius: 3px; border: 1px solid Snow;
      font-size: 0.8rem; font-weight: 800;
      right: 50%;
      transform: translateX(50%) translateY(10%);
      cursor: pointer;
     }

     .modal .modal-close:hover { background-color: Black; transition: 500ms; }

     .modal-show {
      visibility: visible; opacity: 1;
      transform: scale(1.0);
      transition: visibility 0s linear 0s, opacity 250ms 0s, transform 250ms;
     }
  </style>

</head>
<body>

  <div class="document-header">
    <div class="title">$title$</div>
    <div class="date">$date$</div>
  </div>

  <article>
    $body$

    <div class="modal">
      <div class="modal-content">
        <div id="modal-text">
          Footnote placeholder area.
        </div>
        <div class="modal-close">close</div>
      </div>
    </div>
  </article>

  <script>
    let modalArea = document.querySelector('.modal')
    let modalTextContent = document.querySelector('#modal-text')
    let modalCloseButton = document.querySelector('.modal-close')

    // to close the modal by clicking on the close button
    const modalClose = () => modalArea.classList.remove('modal-show')
    modalCloseButton.addEventListener('click', modalClose)

    const footNoteSup = () => {
      // for restyling
      let arrayFootNoteSup = document.querySelectorAll('.footnote-ref')
      for (let footNoteLabel of arrayFootNoteSup) {
        // note:
        // the href is #fn<n>, i.e. '#fn1' for the first footnote.
        seq = footNoteLabel.textContent
        footNoteLabel.outerHTML = '<span id="fn-label-' + seq + '" class="footnote-circle">' + seq + '</span>'
      }

      let footNoteFooterSection = document.querySelector('.footnotes')
      footNoteFooterSection.style.display = 'none'
    }

    const footNoteSecPop = () => {
      let arrayFootNoteLabeler = document.querySelectorAll('.footnote-circle')

      for (let footNoteLabel of arrayFootNoteLabeler) {
        // for attaching an event listener
        // outerHTML somehow disables addEventListener()
        // so they have to be attached separately.
        // footNoteLabel.addEventListener('click', modalOpen)
        footNoteLabel.addEventListener('click', () => {
          // for retrieving the footnote content and place it into the modal area
          let fId = 'fn' + footNoteLabel.textContent
          let fIdText = document.getElementById(fId).textContent.slice(0, -2)
          modalTextContent.innerHTML = fIdText

          // toggle the css
          modalArea.classList.toggle('modal-show')
        })
      }
    }

    // press escape to close modal
    const globalModalClose = () => {
      document.addEventListener('keyup', ({key}) => {
        if (key === 'Escape') { modalClose() }
      })
    }

    footNoteSup()
    footNoteSecPop()
    globalModalClose()
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="#" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!--
	How to use Pandoc
	=================

	On linux, entr can help for automatic recompilation
	ls *.md \| entr pandoc --standalone --template template.html <document>.md -o <output>.html
	-->

	<title>$title$</title>

	<style>
	@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');

	/* Reset */
	* { margin: 0; }

	/* Regular desktop screen override */
	@media (min-width: 768px) {
	.document-header, article { width: 840px; }
	}

	/* Mobile screen override */
	@media (max-width: 768px) {
	.document-header, article { width: 97.5%; }
	.modal-content { max-height: 80vh; max-width: 80vw }
	}

	.document-header {
	font-family: 'Playfair Display', serif;
	margin-inline: auto; margin-top: 21px;
	padding-bottom: 12px;
	border-bottom: 1px solid Gainsboro;
	}

	.document-header .title { font-size: 1.5rem; color: MidnightBlue; }
	.document-header .date { font-size: 0.9rem; color: DarkSlateGray; }
	.document-header .title, .document-header .date { margin-inline: 4px; }

	article {
	font-family: 'Fira Sans', sans-serif;
	color: DarkSlateGray;
	line-height: 2; font-size: 0.875rem;
	text-align: justify; text-justify: inter-word;
	margin-inline: auto;
	margin-bottom: 64px;
	}

	article p { margin-block: 21px; margin-inline: 4px; }

	article figure { margin-block: 21px; }

	article figure img { max-width: 100%; border: 1px solid Gainsboro; border-radius: 6px; }

	article figure figcaption {
	text-align: center; font-size: 0.9rem; line-height: 1.5;
	font-family: 'Sofia Sans Extra Condensed', sans-serif; color: DarkSlateGray; }

	article h4 {
	font-family: 'Playfair Display', serif; font-weight: 400;
	font-size: 1.1rem;
	border-bottom: 1px solid Gainsboro;
	margin-bottom: 16px;
	}

	article .attract {
	text-decoration: underline; text-underline-offset: 4px; color: DodgerBlue;
	padding-inline: 2px;
	}

	article table {
	width: 98%;
	border: 1px solid DimGray;
	margin-inline: auto;
	font-size: 0.8rem;
	}

	article table thead {
	background-color: DarkSlateGray; color: Snow;
	}

	article table thead tr th {
	padding-inline: 4px;
	}

	article table tbody tr:nth-child(even) {
	background-color: Gainsboro;
	}

	article table tbody tr td {
	padding-inline: 4px;
	}

	.footnote-circle {
	display: inline-block; margin-inline: 2px;
	font-family: 'JetBrains Mono', monospace; font-weight: 800;
	text-align: center;
	font-size: 0.6rem; line-height: 100%;
	background-color: DodgerBlue; color: White;
	width: 1.5rem; padding-block: 3px;
	border-radius: 10%;
	cursor: pointer;
	transition: 500ms;
	position: relative; transform: translateY(-10%);
	}

	.footnote-circle:hover { background-color: MediumBlue; }

	.modal {
	visibility: hidden; opacity: 0;
	position: fixed;
	left: 0; top: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	transform: scale(1.1);
	transition: visibility 0s linear 250ms, opacity 250ms 0s, transform 250ms;
	}

	.modal .modal-content {
	position: fixed;
	width: 640px;
	background-color: Snow;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border: 2px solid Gainsboro; border-radius: 6px;
	padding: 4px 6px 36px 6px;
	overflow-y: scroll;
	font-size: 0.8rem; text-align: left; line-height: 1.75;
	}

	.modal .modal-close {
	font-family: 'JetBrains Mono', monospace;
	position: absolute;
	color: Snow; background-color: Tomato;
	padding-inline: 12px; padding-block: 1px;
	border-radius: 3px; border: 1px solid Snow;
	font-size: 0.8rem; font-weight: 800;
	right: 50%;
	transform: translateX(50%) translateY(10%);
	cursor: pointer;
	}

	.modal .modal-close:hover { background-color: Black; transition: 500ms; }

	.modal-show {
	visibility: visible; opacity: 1;
	transform: scale(1.0);
	transition: visibility 0s linear 0s, opacity 250ms 0s, transform 250ms;
	}
	</style>

	</head>
	<body>

	<div class="document-header">
	<div class="title">$title$</div>
	<div class="date">$date$</div>
	</div>

	<article>
	$body$

	<div class="modal">
	<div class="modal-content">
	<div id="modal-text">
	Footnote placeholder area.
	</div>
	<div class="modal-close">close</div>
	</div>
	</div>
	</article>

	<script>
	let modalArea = document.querySelector('.modal')
	let modalTextContent = document.querySelector('#modal-text')
	let modalCloseButton = document.querySelector('.modal-close')

	// to close the modal by clicking on the close button
	const modalClose = () => modalArea.classList.remove('modal-show')
	modalCloseButton.addEventListener('click', modalClose)

	const footNoteSup = () => {
	// for restyling
	let arrayFootNoteSup = document.querySelectorAll('.footnote-ref')
	for (let footNoteLabel of arrayFootNoteSup) {
	// note:
	// the href is #fn<n>, i.e. '#fn1' for the first footnote.
	seq = footNoteLabel.textContent
	footNoteLabel.outerHTML = '<span id="fn-label-' + seq + '" class="footnote-circle">' + seq + '</span>'
	}

	let footNoteFooterSection = document.querySelector('.footnotes')
	footNoteFooterSection.style.display = 'none'
	}

	const footNoteSecPop = () => {
	let arrayFootNoteLabeler = document.querySelectorAll('.footnote-circle')

	for (let footNoteLabel of arrayFootNoteLabeler) {
	// for attaching an event listener
	// outerHTML somehow disables addEventListener()
	// so they have to be attached separately.
	// footNoteLabel.addEventListener('click', modalOpen)
	footNoteLabel.addEventListener('click', () => {
	// for retrieving the footnote content and place it into the modal area
	let fId = 'fn' + footNoteLabel.textContent
	let fIdText = document.getElementById(fId).textContent.slice(0, -2)
	modalTextContent.innerHTML = fIdText

	// toggle the css
	modalArea.classList.toggle('modal-show')
	})
	}
	}

	// press escape to close modal
	const globalModalClose = () => {
	document.addEventListener('keyup', ({key}) => {
	if (key === 'Escape') { modalClose() }
	})
	}

	footNoteSup()
	footNoteSecPop()
	globalModalClose()
	</script>
	</body>
	</html>