re-initialize and make some changes. repository got to around 2 gigabytes and needed to be more efficient

transfemscience.org/assets/css/article-content.css

@@ -0,0 +1,626 @@
+/* Article / content */
+
+#article {
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--article-font-color);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article {
+    /* font-size: 15px; */ /* Maybe no */
+    font-size: 16px;
+  }
+}
+
+#article:last-child {
+  margin-bottom: 1.5rem;
+}
+
+/* Headings */
+
+#article h1, #article h2, #article h3, #article h4, #article h5, #article h6 {
+  color: var(--article-heading-font-color);
+  font-weight: 500;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  position: relative; /* For anchor headings */
+}
+
+#article h1:first-of-type {
+  margin-top: 1.5rem; /* 24px */
+}
+
+#article h1 {
+  font-size: 35px;
+  line-height: 1.25;
+  font-weight: 300; /* Override font-weight: 500 for h1 above */
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h1 {
+    font-size: 29px;
+    line-height: 1.4;
+  }
+}
+
+#article h2 {
+  font-size: 29px;
+  line-height: 1.25;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h2 {
+    font-size: 23px;
+    line-height: 1.4;
+  }
+}
+
+#article h3 {
+  font-size: 21px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h3 {
+    font-size: 17px;
+  }
+}
+
+#article h4 {
+  font-size: 17px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h4 {
+    font-size: 15.5px;
+  }
+}
+
+#article h5 {
+  font-size: 15px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h5 {
+    font-size: 13.5px;
+  }
+}
+
+#article h6 {
+  font-size: 13px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article h6 {
+    font-size: 11.5px;
+  }
+}
+
+/* Paragraphs */
+
+#article p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+#article h1 + p, #article h2 + p, #article h3 + p, #article h4 + p, #article h5 + p, #article h6 + p {
+  margin-top: 0;
+}
+
+#article b, #article strong {
+  font-weight: bold; /* Override normalize.css which uses bolder */
+}
+
+/* Links */
+
+#article a {
+  color: var(--link-color);
+  text-decoration: none;
+  background-image: linear-gradient(var(--link-underline-color) 0%, var(--link-underline-color) 100%);
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+  overflow: hidden;
+  /* text-overflow: ellipsis; */
+}
+
+#article a:hover {
+  background-image: linear-gradient(var(--link-underline-color-hover) 0%, var(--link-underline-color-hover) 100%);
+}
+
+/* Lists */
+
+#article ul, #article ol {
+  margin-top: 0;
+  padding-left: 1.5em;
+}
+
+#article ol {
+  list-style-type: none;
+  counter-reset: step-counter;
+}
+
+#article li {
+  margin: 0.25em 0;
+}
+
+#article ol > li {
+  position: relative;
+}
+
+#article ol > li::before {
+  position: absolute;
+  top: 1.5px;
+  left: -1.6em;
+  color: var(--list-prefix-color);
+  content: counter(step-counter);
+  counter-increment: step-counter;
+  font-size: 14px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article ol > li::before {
+    /* top: 2.75px; */ /* Maybe no */
+    /* font-size: 12px; */ /* Maybe no */
+  }
+}
+
+#article ol > li ol {
+  counter-reset: sub-counter;
+}
+
+#article ol > li ol li::before {
+  content: counter(sub-counter, lower-alpha);
+  counter-increment: sub-counter;
+}
+
+#article ul {
+  list-style: none;
+}
+
+#article ul > li::before {
+  position: absolute;
+  margin-left: -1.4em;
+  color: var(--list-prefix-color);
+  content: "•";
+}
+
+#article .task-list {
+  padding-left: 0;
+}
+
+#article .task-list-item {
+  display: flex;
+  align-items: center;
+}
+
+#article .task-list-item::before {
+  content: "";
+}
+
+#article .task-list-item-checkbox {
+  margin-right: 0.6em;
+}
+
+/* Horizontal rules */
+
+#article hr {
+  height: 1px;
+  padding: 0;
+  margin: 2rem 0;
+  background-color: var(--horizontal-rule-color);
+  border: none;
+}
+
+#article hr + * {
+  margin-top: 0;
+}
+
+/* Blockquotes */
+
+#article blockquote {
+  margin-top: 0;
+  border-left: 4px solid var(--blockquote-border-left-color);
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-inline: 0px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background-color: var(--blockquote-background-color);
+}
+
+#article blockquote > p {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+/* Pre and code */
+
+pre {
+  margin: 0;
+  margin-top: 0.5em;
+}
+
+code {
+  font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: 400;
+  padding: 0.2em 0.15em;
+  background-color: var(--code-background-color);
+  border: 1px solid var(--code-border-color);
+  border-radius: 4px;
+}
+
+@media only screen and (max-width: 499.9px) {
+  code {
+    /* font-size: 11px; */ /* Maybe no */
+  }
+}
+
+/* Tables */
+
+#article .table-wrapper {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 0.5em;
+  margin-bottom: 1.5rem;
+  overflow-x: auto;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow-wrap: normal;
+  word-wrap: normal;
+}
+
+#article h1 + .table-wrapper, #article h2 + .table-wrapper, #article h3 + .table-wrapper,
+#article h4 + .table-wrapper, #article h5 + .table-wrapper, #article h6 + .table-wrapper {
+  margin-top: 1em;
+}
+
+#article table {
+  margin-top: 0;
+  display: table;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+#article th img:first-of-type {
+  margin-top: 0.375rem;
+}
+
+#article th, #article td {
+  font-size: 14px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  background-color: var(--table-background-color);
+  border-bottom: 1px solid var(--table-inner-border-color-row);
+  border-left: 1px solid var(--table-inner-border-color);
+}
+
+@media only screen and (max-width: 499.9px) {
+  #article th, #article td {
+    /* font-size: 12px; */ /* Maybe no */
+  }
+}
+
+#article tbody tr:last-of-type th, #article tbody tr:last-of-type td {
+  border-bottom: 0;
+}
+
+#article tbody tr:last-of-type td {
+  padding-bottom: 0.75rem;
+}
+
+#article thead th {
+  border-bottom: 1px solid var(--table-inner-border-color);
+}
+
+#article th img, #article td img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Images */
+
+#article img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 3px;
+  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); */
+}
+
+@media only screen {
+  /* Invert image color dark mode (unless overridden) */
+  html[data-theme='dark'] #article img:not(.no-invert) {
+    filter: brightness(0.8) contrast(1.2) invert(100%) hue-rotate(180deg);
+  }
+}
+
+@media only screen {
+  /* Spoiler tag images */
+  #article img.spoiler {
+    filter: blur(30px);
+    cursor: pointer;
+  }
+
+  /* Spoiler tag images invert image color dark mode (unless overridden) */
+  html[data-theme='dark'] #article img.spoiler:not(.no-invert) {
+    filter: blur(30px) brightness(0.8) contrast(1.2) invert(100%) hue-rotate(180deg);
+  }
+}
+
+/* Forms */
+
+select, input, textarea {
+  border-style: solid;
+  border-radius: 0px;
+}
+
+select, input, textarea {
+  color: var(--font-color);
+  background-color: var(--input-background-color);
+  border-color: var(--input-border-color);
+  border-width: var(--input-border-width);
+}
+
+/* References sections */
+
+/* Make font size of references lists smaller (applies only to sections with title "References") */
+#article #references + #article ul {
+	font-size: 93.75%; /* Reduces e.g. 16px to 15px */
+}
+
+/* Article notices */
+
+#article .notice {
+  background-color: var(--notice-background-color);
+  padding: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--notice-border-color);
+  font-weight: bold;
+}
+
+/* Heading anchor links */
+
+#article .anchor-heading {
+  position: absolute;
+  left: -28px;
+  right: auto;
+  width: 24px;
+  height: 100%;
+  padding-right: 4px;
+  padding-left: 4px;
+  overflow: visible;
+  text-decoration: none;
+  background-image: none;
+}
+
+#article .anchor-heading:hover {
+  background-image: none;
+}
+
+@media only screen and (max-width: 899.9px) {
+  #article .anchor-heading {
+    left: auto;
+    right: -14px; /* Originally -16px but changed to fix overflow causing horizontal scrollbar */
+  }
+}
+
+#article .anchor-heading svg {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  color: var(--link-color);
+  visibility: hidden;
+}
+
+#article .anchor-heading:hover svg,
+#article h2:hover .anchor-heading svg,
+#article h3:hover .anchor-heading svg,
+#article h4:hover .anchor-heading svg,
+#article h5:hover .anchor-heading svg,
+#article h6:hover .anchor-heading svg {
+  visibility: visible;
+}
+
+/* Disable anchor links on title headings */
+#article h1 a.anchor-heading {
+  display: none;
+}
+
+/* Google Search theme customization */
+
+#article .gcsc-find-more-on-google, #article .gcsc-more-maybe-branding-root,
+#article .gcsc-more-maybe-branding-box, #article .gcsc-find-more-on-google,
+#article .gsc-url-top {
+  display: none !important;
+}
+
+#article .gsst_a {
+  padding: 0 8px !important;
+}
+
+#article .gsst_a, #article .gsst_a:hover {
+  color: var(--link-color) !important;
+  background-image: none; /* Disable link underline on clear search button */
+}
+
+#article .gsst_a .gscb_a {
+  color: var(--link-color) !important;
+  vertical-align: middle !important;
+}
+
+#article .gs-result .gs-title * {
+  color: var(--link-color) !important;
+}
+
+#article .gsc-input-box, #article .gsc-input, #article .gsib_a, #article .gsib_b, #article .gscb_a {
+  padding: 0px !important;
+  line-height: 0 !important;
+}
+
+#article .gsib_b {
+  line-height: 1 !important;
+}
+
+#article #gsc-i-id1 {
+  padding: 12px !important;
+  line-height: 1.6;
+}
+
+#article .gsib_a, #article .gsib_b, #article .gsc-search-button,
+#article .gsc-input, #article .gsc-result-info-container {
+  border-left: none !important;
+}
+
+#article .gsc-search-button-v2 {
+  background-color: rgb(129, 83, 237) !important;
+  padding-top: 9px !important;
+  padding-bottom: 9px !important;
+  padding-left: 28px !important;
+  padding-right: 28px !important;
+}
+
+#article .gsc-above-wrapper-area {
+  margin-bottom: 15px !important;
+}
+
+#article .gs-image, #article .gs-image:hover {
+  background-image: none;
+  border: none !important;
+}
+
+#article .gs-image-box {
+  /* display: none !important; */ /* Hide article thumbnails */
+}
+
+/* This hides Google Search ads */
+/*#article .gsc-adBlock {
+  display: none !important;
+}*/
+
+#article .gs-no-results-result .gs-snippet {
+  background-color: transparent !important;
+  border: none !important;
+  color: var(--article-font-color) !important;
+  font-weight: 600 !important;
+}
+
+@media only screen {
+  html[data-theme='dark'] #article .gsc-control-cse,
+  html[data-theme='dark'] #article .gsc-input-box,
+  html[data-theme='dark'] #article .gsc-input,
+  html[data-theme='dark'] #article .gsib_a,
+  html[data-theme='dark'] #article .gsib_b,
+  html[data-theme='dark'] #article .gsc-search-button,
+  html[data-theme='dark'] #article .gsc-result-info-container,
+  html[data-theme='dark'] #article .gsc-result-info,
+  html[data-theme='dark'] #article .gsc-result,
+  html[data-theme='dark'] #article .gsc-cursor-page {
+    background-color: var(--background-color) !important;
+  }
+
+  html[data-theme='dark'] #article .gsc-search-button-v2 {
+    background-color: rgb(129, 83, 237) !important;
+  }
+
+  html[data-theme='dark'] #article .gsc-result,
+  html[data-theme='dark'] #article .gsc-control-cse {
+    border-color: var(--background-color) !important;
+  }
+
+  html[data-theme='dark'] #article .gsc-input-box {
+    border: solid 1px rgb(180, 180, 180) !important;
+  }
+
+  html[data-theme='dark'] #article .gsc-above-wrapper-area {
+    border-bottom: solid 1px rgb(180, 180, 180) !important;
+  }
+
+  html[data-theme='dark'] #article .gsc-input,
+  html[data-theme='dark'] #article .gsc-result-info,
+  html[data-theme='dark'] #article .gs-snippet,
+  html[data-theme='dark'] #article .gsc-cursor-page,
+  html[data-theme='dark'] #article .gsc-cursor {
+    color: var(--article-font-color) !important;
+    fill: var(--article-font-color) !important; /* For gsc-cursor-container-next/previous */
+  }
+
+  html[data-theme='dark'] #article .gsc-cursor-current-page {
+    color: rgb(129, 83, 237) !important;
+  }
+
+  html[data-theme='dark'] #article .gs-image {
+    filter: none !important;
+  }
+}
+
+/* Lunr.js search page (not currently used) */
+
+#artice #lunrsearch-container {
+  width: 100%;
+  margin-top: 15px;
+  flex-wrap: nowrap;
+}
+
+#article #lunrsearch-form {
+  display: flex;
+  align-items: center;
+}
+
+#article #lunrsearch-input {
+  max-width: 600px;
+  flex-shrink: 0;
+  flex-grow: 1;
+  padding: 10px;
+  background-color: var(--background-color);
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 3px;
+}
+
+#article #lunrsearch-button {
+  margin-left: 7px;
+  width: 40px;
+  height: 40px;
+  background-color: rgb(129, 83, 237);
+  fill: rgb(255, 255, 255);
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 3px;
+}
+
+#article #lunrsearch-results {
+  padding-top: 0.4rem;
+}
+
+#article #lunrsearch-results-label {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+#article .lunrsearch-result {
+  padding-bottom: 1rem;
+}
+
+#article .lunrsearch-result .title {
+  color: var(--link-color)
+}
+
+#article .lunrsearch-result .body {
+  font-size: 13px;
+  line-height: 1.0 !important;
+}
+
+#article .lunrsearch-result .url {
+  font-size: 13px;
+  color: rgb(192, 192, 192);
+}
+

transfemscience.org/assets/css/print.css

@@ -0,0 +1,80 @@
+@media print {
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    color-adjust: exact;
+  }
+
+  #header, #footer {
+    background-color: transparent;
+  }
+
+  #header {
+    position: absolute;
+    height: var(--header-height);
+    top: 0px;
+  }
+
+  #header-subcontainer {
+    width: 100%;
+    height: var(--header-height);
+  }
+
+  #site-icon {
+    width: 28px;
+    min-width: 28px;
+    padding: 0px;
+    margin-right: 15px;
+    margin-bottom: 2px;
+  }
+
+  #site-title {
+    font-size: 24px;
+  }
+
+  #site-title-text-lg {
+    display: inline-block;
+    max-width: 100%;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  #top-links, #top-buttons, #mobile-menu, #restore-persistent-header-button, #sidebar, #sidebar-button-standalone {
+    display: none;
+  }
+
+  #mid-section {
+    margin-top: var(--header-height);
+  }
+
+  #main-area {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  #article {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  /* These don't seem to do what I want (break whole graph, not the offending line) */
+  #article p {
+    /* break-inside: avoid; */
+    /* page-break-inside: avoid; */ /* Legacy / alias for break-inside */
+  }
+
+  #article .table-wrapper, #article table {
+    break-inside: avoid;
+    page-break-inside: avoid; /* Legacy / alias for break-inside */
+    overflow-y: hidden; /* Required to get rid of unneeded scrollbars */
+  }
+
+  #article thead {
+    display: table-row-group; /* Prevent thead row from repeating on each new page */
+  }
+
+  #gt-nvframe {
+    display: none;
+  }
+}
+

transfemscience.org/assets/css/variables.css

@@ -0,0 +1,150 @@
+/* Variables */
+
+/* General */
+:root {
+  --header-height: 60px;
+  --header-height-persistent: 40px;
+  --header-height-mobile: 55px;
+  --header-height-persistent-mobile: 55px; /* Formerly 50px */
+  --mobile-menu-height: 55px;
+  --footer-height: 60px;
+  --sidebar-width: 300px;
+  --sidebar-width-wide: 450px;
+  --article-width: 745px;
+  --article-width-wide: 1000px;
+  --google-translate-bar-height: 0px; /* Dynamic—updated by JS (56px when active) */
+
+  /* Not currently used but for reference and JS (can't be used in CSS media queries) */
+  --viewport-width-x-small-1: 320px;
+  --viewport-width-x-small-2: 380px;
+  --viewport-width-x-small-3: 460px;
+  --viewport-width-small: 500px;
+  --viewport-width-medium: 900px;
+  --viewport-width-medium-large: 1150px;
+  --viewport-width-large: 1400px;
+  --viewport-width-x-large: 1700px;
+}
+
+/* Light mode */
+:root {
+  --site-logo: url(../images/branding/logo.png);
+  --site-title-color: rgb(39, 38, 43);
+  --font-color: rgb(92, 89, 98);
+  --background-color: rgb(255, 255, 255);
+  --header-footer-background-color-mobile: rgb(253, 252, 255);
+  --background-lighter-color: rgb(255, 255, 255); /* For tools */
+  --link-color: rgb(129, 83, 237);
+  --link-underline-color: rgb(238, 235, 238);
+  --link-underline-color-hover: rgb(129, 83, 237, 0.45);
+  --top-link-font-color: rgb(92, 89, 98);
+  --top-link-background-color-hover: rgb(244, 239, 255);
+  --button-icon-fill-color: rgb(92, 89, 98);
+  --button-icon-fill-color-hover: rgb(129, 83, 237);
+  --layout-border-style: solid 1px rgb(238, 235, 238);
+  --tap-highlight-color: rgb(233, 223, 255, 0.5); /* --top-link-background-color-hover with 0.5 opacity */
+
+  --sidebar-button-icon-fill-color: rgb(206, 209, 211);
+  --sidebar-item-font-color-hover: rgb(129, 83, 237);
+  --sidebar-item-background-color-hover: rgba(245, 239, 255, 0.8);
+
+  --article-font-color: rgb(92, 89, 98);
+  --article-heading-font-color: rgb(39, 38, 43);
+  --list-prefix-color: rgb(149, 147, 150);
+
+  --blockquote-background-color: rgb(249, 249, 249);
+  --blockquote-border-left-color: rgb(221, 221, 221);
+
+  --code-background-color: rgb(245, 246, 250);
+  --code-border-color: rgb(238, 235, 238);
+
+  --horizontal-rule-color: rgb(238, 235, 238);
+  
+  --table-background-color: rgb(255, 255, 255);
+  --table-inner-border-color: rgb(238, 235, 238);
+  --table-inner-border-color-row: rgba(238, 235, 238, 0.5);
+
+  --input-background-color: rgb(255, 255, 255);
+  --input-border-color: rgb(133, 133, 133);
+  --input-border-width: 1px;
+
+  --footer-font-color: rgb(149, 147, 150);
+  --footer-button-colors: rgb(213, 213, 213);
+
+  --selection-font-color: rgb(255, 255, 255);
+  --selection-background-color: rgb(176, 133, 240);
+
+  --notice-background-color: rgb(243, 237, 255);
+  --notice-border-color: rgb(237, 229, 255);
+
+  --scrollbar-thumb-color: rgb(191, 191, 191);
+  --scrollbar-thumb-color-hover: rgb(163, 163, 163);
+}
+
+/* Dark mode */
+@media only screen {
+  [data-theme="dark"] {
+    --site-logo: url(../images/branding/logo-dark.png);
+    --site-title-color: rgb(245, 246, 250);
+    --font-color: rgb(230, 225, 232);
+    /* --background-color: rgb(39, 38, 43); */
+    --background-color: rgb(36, 38, 44);
+    --background-lighter-color: rgb(46, 46, 54); /* For tools */
+    /*--header-footer-background-color-mobile: rgb(39, 38, 43);*/
+    --header-footer-background-color-mobile: rgb(36, 38, 44);
+    --link-color: rgb(189, 163, 255);
+    --link-underline-color: rgb(68, 67, 77);
+    --link-underline-color-hover: rgb(189, 163, 255, 0.45);
+    --top-link-font-color: rgb(230, 225, 232);
+    --top-link-background-color-hover: rgb(30, 29, 33);
+    --button-icon-fill-color: rgb(230, 225, 232);
+    --button-icon-fill-color-hover: rgb(189, 163, 255);
+    /*--layout-border-style: solid 1px rgb(68, 67, 77);*/
+    --layout-border-style: solid 1px rgb(67, 67, 78);
+    --tap-highlight-color: rgb(21, 20, 23, 0.5); /* Based on --background-color and top-link-background-color-hover with 0.5 opacity */
+
+    --sidebar-button-icon-fill-color: rgb(120, 122, 123);
+    --sidebar-item-font-color-hover: rgb(189, 163, 255);
+    /*--sidebar-item-font-color-hover: rgb(255, 255, 255);*/
+    --sidebar-item-background-color-hover: rgb(30, 29, 33);
+    /*--sidebar-item-background-color-hover: rgb(167, 134, 250);*/
+
+    --article-font-color: rgb(230, 225, 232);
+    --article-heading-font-color: rgb(245, 246, 250);
+    --list-prefix-color: rgb(149, 147, 150);
+
+    /*--blockquote-background-color: rgb(32, 31, 35);
+    --blockquote-border-left-color: rgb(27, 26, 29);*/
+    --blockquote-background-color: rgb(29, 29, 33);
+    --blockquote-border-left-color: rgb(25, 25, 28);
+
+    /*--code-background-color: rgb(48, 46, 54);*/
+    --code-background-color: rgb(46, 46, 54);
+    --code-border-color: rgb(68, 67, 77);
+
+    --horizontal-rule-color: rgb(68, 67, 77);
+
+    /*--table-background-color: rgb(48, 46, 54);*/
+    --table-background-color: rgb(46, 46, 54);
+    --table-inner-border-color: rgb(68, 67, 77);
+    --table-inner-border-color-row: rgba(68, 67, 77, 0.5);
+
+    --input-background-color: rgb(63, 62, 71);
+    --input-border-color: rgb(50, 50, 50) rgb(80, 80, 80) rgb(80, 80, 80) rgb(50, 50, 50);
+    --input-border-width: 2px;
+
+    --footer-font-color: rgb(149, 147, 150);
+    --footer-button-colors: rgb(149, 147, 150);
+
+    --selection-font-color: rgb(255, 255, 255);
+    --selection-background-color: rgb(191, 168, 246);
+
+    /*--notice-background-color: rgb(48, 46, 54);*/
+    --notice-background-color: rgb(46, 46, 54);
+    --notice-border-color: rgb(68, 67, 77);
+
+    /*--scrollbar-thumb-color: rgb(68, 68, 68);*/
+    --scrollbar-thumb-color: rgb(67, 67, 78);
+    --scrollbar-thumb-color-hover: rgb(30, 29, 33);
+  }
+}
+

transfemscience.org/assets/css/variables.css.orig

@@ -0,0 +1,150 @@
+/* Variables */
+
+/* General */
+:root {
+  --header-height: 60px;
+  --header-height-persistent: 40px;
+  --header-height-mobile: 55px;
+  --header-height-persistent-mobile: 55px; /* Formerly 50px */
+  --mobile-menu-height: 55px;
+  --footer-height: 60px;
+  --sidebar-width: 300px;
+  --sidebar-width-wide: 450px;
+  --article-width: 745px;
+  --article-width-wide: 1000px;
+  --google-translate-bar-height: 0px; /* Dynamic—updated by JS (56px when active) */
+
+  /* Not currently used but for reference and JS (can't be used in CSS media queries) */
+  --viewport-width-x-small-1: 320px;
+  --viewport-width-x-small-2: 380px;
+  --viewport-width-x-small-3: 460px;
+  --viewport-width-small: 500px;
+  --viewport-width-medium: 900px;
+  --viewport-width-medium-large: 1150px;
+  --viewport-width-large: 1400px;
+  --viewport-width-x-large: 1700px;
+}
+
+/* Light mode */
+:root {
+  --site-logo: url(https://transfemscience.org/assets/images/branding/logo.png);
+  --site-title-color: rgb(39, 38, 43);
+  --font-color: rgb(92, 89, 98);
+  --background-color: rgb(255, 255, 255);
+  --header-footer-background-color-mobile: rgb(253, 252, 255);
+  --background-lighter-color: rgb(255, 255, 255); /* For tools */
+  --link-color: rgb(129, 83, 237);
+  --link-underline-color: rgb(238, 235, 238);
+  --link-underline-color-hover: rgb(129, 83, 237, 0.45);
+  --top-link-font-color: rgb(92, 89, 98);
+  --top-link-background-color-hover: rgb(244, 239, 255);
+  --button-icon-fill-color: rgb(92, 89, 98);
+  --button-icon-fill-color-hover: rgb(129, 83, 237);
+  --layout-border-style: solid 1px rgb(238, 235, 238);
+  --tap-highlight-color: rgb(233, 223, 255, 0.5); /* --top-link-background-color-hover with 0.5 opacity */
+
+  --sidebar-button-icon-fill-color: rgb(206, 209, 211);
+  --sidebar-item-font-color-hover: rgb(129, 83, 237);
+  --sidebar-item-background-color-hover: rgba(245, 239, 255, 0.8);
+
+  --article-font-color: rgb(92, 89, 98);
+  --article-heading-font-color: rgb(39, 38, 43);
+  --list-prefix-color: rgb(149, 147, 150);
+
+  --blockquote-background-color: rgb(249, 249, 249);
+  --blockquote-border-left-color: rgb(221, 221, 221);
+
+  --code-background-color: rgb(245, 246, 250);
+  --code-border-color: rgb(238, 235, 238);
+
+  --horizontal-rule-color: rgb(238, 235, 238);
+  
+  --table-background-color: rgb(255, 255, 255);
+  --table-inner-border-color: rgb(238, 235, 238);
+  --table-inner-border-color-row: rgba(238, 235, 238, 0.5);
+
+  --input-background-color: rgb(255, 255, 255);
+  --input-border-color: rgb(133, 133, 133);
+  --input-border-width: 1px;
+
+  --footer-font-color: rgb(149, 147, 150);
+  --footer-button-colors: rgb(213, 213, 213);
+
+  --selection-font-color: rgb(255, 255, 255);
+  --selection-background-color: rgb(176, 133, 240);
+
+  --notice-background-color: rgb(243, 237, 255);
+  --notice-border-color: rgb(237, 229, 255);
+
+  --scrollbar-thumb-color: rgb(191, 191, 191);
+  --scrollbar-thumb-color-hover: rgb(163, 163, 163);
+}
+
+/* Dark mode */
+@media only screen {
+  [data-theme="dark"] {
+    --site-logo: url(https://transfemscience.org/assets/images/branding/logo-dark.png);
+    --site-title-color: rgb(245, 246, 250);
+    --font-color: rgb(230, 225, 232);
+    /* --background-color: rgb(39, 38, 43); */
+    --background-color: rgb(36, 38, 44);
+    --background-lighter-color: rgb(46, 46, 54); /* For tools */
+    /*--header-footer-background-color-mobile: rgb(39, 38, 43);*/
+    --header-footer-background-color-mobile: rgb(36, 38, 44);
+    --link-color: rgb(189, 163, 255);
+    --link-underline-color: rgb(68, 67, 77);
+    --link-underline-color-hover: rgb(189, 163, 255, 0.45);
+    --top-link-font-color: rgb(230, 225, 232);
+    --top-link-background-color-hover: rgb(30, 29, 33);
+    --button-icon-fill-color: rgb(230, 225, 232);
+    --button-icon-fill-color-hover: rgb(189, 163, 255);
+    /*--layout-border-style: solid 1px rgb(68, 67, 77);*/
+    --layout-border-style: solid 1px rgb(67, 67, 78);
+    --tap-highlight-color: rgb(21, 20, 23, 0.5); /* Based on --background-color and top-link-background-color-hover with 0.5 opacity */
+
+    --sidebar-button-icon-fill-color: rgb(120, 122, 123);
+    --sidebar-item-font-color-hover: rgb(189, 163, 255);
+    /*--sidebar-item-font-color-hover: rgb(255, 255, 255);*/
+    --sidebar-item-background-color-hover: rgb(30, 29, 33);
+    /*--sidebar-item-background-color-hover: rgb(167, 134, 250);*/
+
+    --article-font-color: rgb(230, 225, 232);
+    --article-heading-font-color: rgb(245, 246, 250);
+    --list-prefix-color: rgb(149, 147, 150);
+
+    /*--blockquote-background-color: rgb(32, 31, 35);
+    --blockquote-border-left-color: rgb(27, 26, 29);*/
+    --blockquote-background-color: rgb(29, 29, 33);
+    --blockquote-border-left-color: rgb(25, 25, 28);
+
+    /*--code-background-color: rgb(48, 46, 54);*/
+    --code-background-color: rgb(46, 46, 54);
+    --code-border-color: rgb(68, 67, 77);
+
+    --horizontal-rule-color: rgb(68, 67, 77);
+
+    /*--table-background-color: rgb(48, 46, 54);*/
+    --table-background-color: rgb(46, 46, 54);
+    --table-inner-border-color: rgb(68, 67, 77);
+    --table-inner-border-color-row: rgba(68, 67, 77, 0.5);
+
+    --input-background-color: rgb(63, 62, 71);
+    --input-border-color: rgb(50, 50, 50) rgb(80, 80, 80) rgb(80, 80, 80) rgb(50, 50, 50);
+    --input-border-width: 2px;
+
+    --footer-font-color: rgb(149, 147, 150);
+    --footer-button-colors: rgb(149, 147, 150);
+
+    --selection-font-color: rgb(255, 255, 255);
+    --selection-background-color: rgb(191, 168, 246);
+
+    /*--notice-background-color: rgb(48, 46, 54);*/
+    --notice-background-color: rgb(46, 46, 54);
+    --notice-border-color: rgb(68, 67, 77);
+
+    /*--scrollbar-thumb-color: rgb(68, 68, 68);*/
+    --scrollbar-thumb-color: rgb(67, 67, 78);
+    --scrollbar-thumb-color-hover: rgb(30, 29, 33);
+  }
+}
+

transfemscience.org/assets/css/vendor/normalize.css

@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+

transfemscience.org/assets/js/script.js

@@ -0,0 +1,704 @@
+/* These need to be here and run before DOMContentLoaded to prevent flash of unstyled content (FOUC) */
+/* Only <html> and <head> are available by this point (based on when script called in HTML) */
+
+// For preventing jump of scroll position on click when scrolled down in sidebar
+var toc_sidebar_no_scroll_jump = false;
+
+// Set theme if applicable
+if (is_local_storage_available() == true && localStorage.getItem('theme')) {
+  document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'));
+} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches == true) {
+  document.documentElement.setAttribute('data-theme', 'dark');
+}
+
+// Set persistent header to hidden if applicable
+if (is_local_storage_available() == true && localStorage.getItem('persistent-header-hidden')) {
+  if (localStorage.getItem('persistent-header-hidden') == 'true') {
+    toggle_persistent_header(false);
+  }
+}
+
+// Show sidebar if applicable
+if (is_local_storage_available() == true && localStorage.getItem('show-sidebar')) {
+  if (localStorage.getItem('show-sidebar') == 'true' && is_mobile() == false) {
+    toggle_sidebar(false);
+  }
+// If no sidebar show setting and if screen is reasonably wide, then show it by default
+} else {
+  if (window.matchMedia && is_mobile() == false) {
+    var media_query = window.matchMedia('(min-width: 1250px)');
+    if (media_query.matches == true) {
+      toggle_sidebar(false);
+    }
+  }
+}
+
+window.addEventListener('DOMContentLoaded', function () {
+
+  // Set first current sidebar section
+  if (does_sidebar_exist() == true) {
+    update_current_sidebar_section();
+  }
+
+  // Set up for Google Translate if applicable
+  if (is_google_translate_open() == true) {
+    // Get and set Google Translate bar height
+    update_google_translate_bar_height();
+
+    // Mutation observer to watch for and update upon changes of Google Translate bar show/hide
+    var observer = new MutationObserver(update_google_translate_bar_height);
+    observer.observe(document.body, { attributes: true, attributeFilter: ['style'] });
+  }
+
+  // Set up site event listeners (scroll, buttons, color scheme change, keyboard keys, etc.)
+  set_up_site_event_listeners();
+
+  return;
+});
+
+// Set up site event listeners
+function set_up_site_event_listeners() {
+  /* Scroll, resize, fullscreen, and color scheme change listeners */
+
+  // Page scroll listener
+  window.addEventListener('scroll', function () {
+    // Check and set persistent header status
+    update_header_persistent_status();
+
+    // Update sidebar current section
+    if (does_sidebar_exist() == true) {
+      update_current_sidebar_section();
+    }
+
+    return;
+  });
+
+  // Mobile change listener
+  if (window.matchMedia) {
+    matchMediaAddEventListener('(max-width: 900px)', function () {
+      // If switching to mobile
+      if (is_mobile() == true) {
+        // Close sidebar if it's open
+        if (is_sidebar_open() == true) {
+          toggle_sidebar(false);
+        }
+      // If switching to desktop
+      } else {
+        // Open sidebar if it should be open
+        if (is_sidebar_open() == false) {
+          if (is_local_storage_available() == true && localStorage.getItem('show-sidebar') == 'true') {
+            toggle_sidebar(false);
+          }
+        }
+      }
+      return;
+    });
+  }
+
+  // Theme (light/dark mode) listener (follow system)
+  if (window.matchMedia) {
+    matchMediaAddEventListener('(prefers-color-scheme: dark)', function (event) {
+      if (is_local_storage_available() == true && !localStorage.getItem('theme')) {
+        var theme = event.matches == true ? 'dark' : 'light';
+        if (theme == 'light') {
+          document.documentElement.setAttribute('data-theme', 'light');
+        } else {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      }
+      return;
+    });
+  }
+
+  /* Button listeners */
+
+  // Theme (light/dark mode) button listener
+  ['mousedown', 'keydown'].forEach(function (event_type) {
+    document.getElementById('theme-button').addEventListener(event_type, function (event) {
+      // If keydown event and not Enter or Space key
+      if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+      // If mousedown event
+      if (event_type == 'mousedown') {
+        // Prevent setting button active and therefore outline
+        event.preventDefault();
+
+        // If not main mouse button (e.g., context menu)
+        if (event.button != 0) {
+          return;
+        }
+      }
+
+      // Execute button action
+      toggle_theme(true);
+
+      return;
+    });
+  });
+
+  // Theme (light/dark mode) button reset listener (context menu)
+  document.getElementById('theme-button').addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+    if (!window.confirm('Clear theme (light/dark mode) setting? (This will reset the theme setting to the default of follow system theme.)')) {
+      return;
+    }
+    if (is_local_storage_available() == true) {
+      localStorage.removeItem('theme');
+    }
+    if (window.matchMedia) {
+      var media_query = window.matchMedia('(prefers-color-scheme: light)');
+      if (media_query.matches == true) {
+        document.documentElement.setAttribute('data-theme', 'light');
+      } else {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    }
+    // alert('Theme (light/dark mode) setting reset.');
+    return;
+  });
+
+  // Translate button listener
+  ['mousedown', 'keydown'].forEach(function (event_type) {
+    document.getElementById('language-button').addEventListener(event_type, function (event) {
+      // If keydown event and not Enter or Space key
+      if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+      // If mousedown event
+      if (event_type == 'mousedown') {
+        // Prevent setting button active and therefore outline
+        event.preventDefault();
+
+        // If not main mouse button (e.g., context menu)
+        if (event.button != 0) {
+          return;
+        }
+      }
+
+      // Execute button action
+      // If Google Translate mode isn't already active
+      if (is_google_translate_open() == false) {
+        // Get user's preferred language from browser settings
+        var preferred_language = String(navigator.language);
+        // Need to get rid of country code but Chinese simplified vs. traditional are exceptions for Google Translate
+        // https://cloud.google.com/translate/docs/languages
+        if (preferred_language != 'zh-CN' && preferred_language != 'zh-TW') {
+          preferred_language = preferred_language.split('-')[0];
+        }
+        // Fix Filipino (seems to be an exception with mismatched code here among many languages)
+        // It's "Filipino" ("fil") in Chrome but "Tagalog" ("tl") in Firefox; Google Translate uses "tl"
+        if (preferred_language == 'fil') {
+          preferred_language = 'tl';
+        }
+        // Set Google Translate settings
+        var source_language = 'auto'; // Must be 'auto' if trying to translate from 'en' to 'en' or will error
+        var target_language = preferred_language;
+        var interface_language = preferred_language;
+        // Open Google Translate for the site
+        window.open('https://translate.google.com/translate?sl=' + source_language + '&tl=' + target_language + 
+          '&hl=' + interface_language + '&u=' + window.location.href + '&client=webapp', '_self');
+      // If Google Translate mode is active
+      } else {
+        var gtranslate_script = document.querySelector('[data-source-url]');
+        // Other Google Translate data attributes of potential inerest: data-proxy-url, data-proxy-full-url, data-source-language, data-target-language, data-display-language, data-detected-source-language, data-is-source-untranslated, data-source-untranslated-url
+        var return_url = gtranslate_script.getAttribute('data-source-url');
+        // Fallback
+        if (!return_url) {
+          return_url = 'https://transfemscience.org' + window.location.pathname;
+        }
+        // Take user back to site (exit Google Translate)
+        window.location.href = return_url;
+      }
+
+      return;
+    });
+  });
+
+  // Search button listener
+  ['mousedown', 'keydown'].forEach(function (event_type) {
+    document.getElementById('search-button').addEventListener(event_type, function (event) {
+      // If keydown event and not Enter or Space key
+      if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+      // If mousedown event
+      if (event_type == 'mousedown') {
+        // Prevent setting button active and therefore outline
+        event.preventDefault();
+
+        // If not main mouse button (e.g., context menu)
+        if (event.button != 0) {
+          return;
+        }
+      }
+
+      // Execute button action
+      // Open search (Google Custom Search Engine) in a new tab
+      // var search_url = 'https://cse.google.com/cse?cx=368ceeb2b0e46ce35';
+      // The regex checks for either GitHub or Google Translate format (periods substituted with dashes)
+      if (String(window.location.hostname).match(/[.-]github[.-]io/)) {
+        var search_url = String(location.origin) + '/transfemscience' + '/search/' + window.location.search;
+      } else {
+        var search_url = String(location.origin) + '/search/' + window.location.search;
+      }
+      window.open(search_url, '_self');
+
+      return;
+    });
+  });
+
+  // Contents sidebar open/close button listener
+  ['sidebar-button', 'sidebar-button-standalone', 'toc-button-mobile'].forEach(function (element_id) {
+    ['mousedown', 'keydown'].forEach(function (event_type) {
+      document.getElementById(element_id).addEventListener(event_type, function (event) {
+        // If keydown event and not Enter or Space key
+        if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+        // If mousedown event
+        if (event_type == 'mousedown') {
+          // Prevent setting button active and therefore outline
+          event.preventDefault();
+
+          // If not main mouse button (e.g., context menu)
+          if (event.button != 0) {
+            return;
+          }
+        }
+
+        // Execute button action
+        toggle_sidebar(true);
+
+        return;
+      });
+    });
+
+    // Contents sidebar open/close button reset listener (context menu)
+    document.getElementById(element_id).addEventListener('contextmenu', function (event) {
+      event.preventDefault();
+      if (!window.confirm('Clear sidebar show/hide by default setting?')) {
+        return;
+      }
+      if (is_local_storage_available() == true) {
+        localStorage.removeItem('show-sidebar');
+      }
+      // alert('Sidebar show/hide by default setting reset.');
+      return;
+    });
+  });
+
+  /*
+  // Contents sidebar swipe left to close listener
+  document.addEventListener('swiped-left', function (event) {
+    // If sidebar is open and swiped element is not a table (with potential horizontal scroll)
+    if (is_sidebar_open() == true && !event.target.closest('table')) {
+      toggle_sidebar(true);
+    } else {
+      return;
+    }
+  });
+
+  // Contents sidebar swipe right to open listener
+  document.addEventListener('swiped-right', function (event) {
+    // If sidebar is closed and swiped element is not a table (with potential horizontal scroll)
+    if (is_sidebar_open() == false && !event.target.closest('table')) {
+      toggle_sidebar(true);
+    } else {
+      return;
+    }
+  });
+  */
+
+  // Contents sidebar item listeners
+  var links = document.querySelectorAll('.toc-link');
+  for (var i = 0; i < links.length; i++) {
+    links[i].onclick = function (event) {
+      // If mobile, hide contents menu after clicking a ToC link
+      if (is_mobile() == true) {
+        if (is_sidebar_open() == true) {
+          // Prevent slide transition for sidebar hide
+          document.documentElement.setAttribute('data-sidebar-slide-transition-disable', '');
+
+          // Following a short delay (to show tap / link highlight)...
+          setTimeout(function () {
+            // Close the sidebar
+            toggle_sidebar();
+
+            // Reset prevent sidebar hide slide transition
+            setTimeout(function () {
+              document.documentElement.removeAttribute('data-sidebar-slide-transition-disable');
+            }, 150);
+          }, 100);
+        }
+      }
+
+      // Hide anchor tag from URL in the case of sidebar #top link click
+      if (event.target.hash == '#top') {
+        window.scrollTo(0, 0);
+        history.pushState({}, document.title, window.location.href.split('#')[0]);
+        return false;  
+      }
+
+      // Prevent jump of scroll position on click if scrolled down in sidebar
+      toc_sidebar_no_scroll_jump = true;
+      setInterval(function () {
+        toc_sidebar_no_scroll_jump = false;
+      }, 200);
+
+      return;
+    }
+  }
+
+  // Mobile menu open/close button listener
+  ['mousedown', 'keydown'].forEach(function (event_type) {
+    document.getElementById('menu-button-mobile-menu').addEventListener(event_type, function (event) {
+      // If keydown event and not Enter or Space key
+      if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+      // If mousedown event
+      if (event_type == 'mousedown') {
+        // Prevent setting button active and therefore outline
+        event.preventDefault();
+
+        // If not main mouse button (e.g., context menu)
+        if (event.button != 0) {
+          return;
+        }
+      }
+
+      // Execute button action
+      toggle_mobile_menu();
+
+      return;
+    });
+  });
+
+  // Persistent header hide/restore button listeners
+  ['hide-persistent-header-button', 'restore-persistent-header-button'].forEach(function (element_id) {
+    ['mousedown', 'keydown'].forEach(function (event_type) {
+      document.getElementById(element_id).addEventListener(event_type, function (event) {
+        // If keydown event and not Enter or Space key
+        if (event_type == 'keydown' && event.code != 'Enter' && event.code != 'Space') { return; }
+
+        // If mousedown event
+        if (event_type == 'mousedown') {
+          // Prevent setting button active and therefore outline
+          event.preventDefault();
+
+          // If not main mouse button (e.g., context menu)
+          if (event.button != 0) {
+            return;
+          }
+        }
+
+        // Execute button action
+        toggle_persistent_header(true);
+
+        return;
+      });
+    });
+
+    // Persistent header hide/restore button reset listeners (context menu)
+    document.getElementById(element_id).addEventListener('contextmenu', function (event) {
+      event.preventDefault();
+      if (!window.confirm('Clear persistent top bar show/hide by default setting?')) {
+        return;
+      }
+      if (is_local_storage_available() == true) {
+        localStorage.removeItem('persistent-header-hidden');
+      }
+      if (is_persistent_header_hidden() == true) {
+        toggle_persistent_header(false);
+      }
+      // alert('Persistent top bar show/hide by default setting reset.');
+      return;
+    });
+  });  
+
+  /* Keyboard listeners */
+
+  // Keyboard input listener
+  document.addEventListener('keydown', function (event) {
+    // Sidebar keyboard shortcut handler (Ctrl+Shift+L)
+    if (event.ctrlKey && event.shiftKey && (event.key === 'l' || event.key === 'L')) {
+      event.preventDefault();
+      toggle_sidebar(true);
+    // Persistent header / top bar keyboard shortcut handler (Ctrl+Shift+H)
+    } else if (event.ctrlKey && event.shiftKey && (event.key === 'h' || event.key === 'H')) {
+      event.preventDefault();
+      toggle_persistent_header(true);
+    }
+    return;
+  });
+
+  /* Miscellaneous listeners */
+
+  // Spoiler image listeners
+  var spoilers = document.getElementsByClassName('spoiler');
+  Array.prototype.forEach.call(spoilers, function (spoiler) {
+    spoiler.addEventListener('click', function () {
+      if (spoiler.classList.contains('spoiler')) {
+        spoiler.classList.remove('spoiler');
+      }
+      return;
+    });
+    return;
+  });
+
+  return;
+}
+
+function is_dark_theme() {
+  var current_theme = document.documentElement.getAttribute('data-theme');
+  return current_theme == 'dark' ? true : false;
+}
+
+function toggle_theme(remember) {
+  var new_theme = is_dark_theme() == false ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', new_theme);
+  if (remember == true && is_local_storage_available() == true) {
+    localStorage.setItem('theme', new_theme);
+  }
+  return;
+}
+
+function is_header_persistent() {
+  var is_header_persistent = document.documentElement.hasAttribute('data-header-persistent');
+  return is_header_persistent;
+}
+
+function update_header_persistent_status() {
+  if (window.scrollY > 20) {
+    document.documentElement.setAttribute('data-header-persistent', '');
+  } else {
+    document.documentElement.removeAttribute('data-header-persistent');
+  }
+  return;
+}
+
+function is_mobile() {
+  if (window.matchMedia) {
+    var media_query = window.matchMedia('(max-width: 900px)');
+    if (media_query.matches == true) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  return;
+}
+
+function is_mobile_menu_open() {
+  return document.documentElement.hasAttribute('data-mobile-menu-open');
+}
+
+function toggle_mobile_menu() {
+  if (is_mobile_menu_open() == false) {
+    document.documentElement.setAttribute('data-mobile-menu-open', '');
+  } else {
+    document.documentElement.removeAttribute('data-mobile-menu-open');
+  }
+  return;
+}
+
+function is_persistent_header_hidden() {
+  return document.documentElement.hasAttribute('data-persistent-header-hidden');
+}
+
+function toggle_persistent_header(remember) {
+  // Prevent grow/shrink transition for persistent header hide/show
+  document.documentElement.setAttribute('data-persistent-header-toggle-no-transition', '');
+
+  // Toggle persistent header
+  if (is_persistent_header_hidden() == false) {
+    document.documentElement.setAttribute('data-persistent-header-hidden', '');
+    if (remember == true && is_local_storage_available() == true) {
+      localStorage.setItem('persistent-header-hidden', 'true');
+    }
+  } else {
+    document.documentElement.removeAttribute('data-persistent-header-hidden');
+    if (remember == true && is_local_storage_available() == true) {
+      localStorage.setItem('persistent-header-hidden', 'false');
+    }
+  }
+
+  // Reset prevent grow/shrink transition for persistent header hide/show
+  setTimeout(function () {
+    document.documentElement.removeAttribute('data-persistent-header-toggle-no-transition');
+  }, 200);
+
+  return;
+}
+
+function does_sidebar_exist() {
+  var does_sidebar_exist = !document.documentElement.hasAttribute('data-no-contents-sidebar');
+  return does_sidebar_exist;
+}
+
+function is_sidebar_open() {
+  var is_sidebar_open = document.documentElement.hasAttribute('data-sidebar-open');
+  return is_sidebar_open;
+}
+
+function toggle_sidebar(remember) {
+  if (is_sidebar_open() == false) {
+    document.documentElement.setAttribute('data-sidebar-open', '');
+    if (remember == true && is_local_storage_available() == true) {
+      localStorage.setItem('show-sidebar', 'true');
+    }
+  } else {
+    document.documentElement.removeAttribute('data-sidebar-open');
+    if (remember == true && is_local_storage_available() == true) {
+      localStorage.setItem('show-sidebar', 'false');
+    }
+  }
+  return;
+}
+
+function update_current_sidebar_section() {
+  var section_indice = get_current_sidebar_section_indice();
+
+  var sidebar_contents = document.getElementById('sidebar-contents');
+  var section_links = sidebar_contents.querySelectorAll('a[id^="heading-"]');
+  for (var i = 0; i < section_links.length; i++) {
+    if (section_links[i].id != 'heading-' + section_indice) {
+      if (section_links[i].classList.contains('active-section')) {
+        section_links[i].classList.remove('active-section');
+      }
+    } else {
+      if (!section_links[i].classList.contains('active-section')) {
+        section_links[i].classList.add('active-section');
+        if (toc_sidebar_no_scroll_jump == false) {
+          section_links[i].scrollIntoView(false);
+        }
+      }
+    }
+  }
+  return;
+}
+
+function get_current_sidebar_section_indice() {
+  var article = document.getElementById('article');
+  var sections = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+  var scroll_position = window.scrollY;
+  var page_height = document.documentElement.scrollHeight;
+  var window_height = window.innerHeight;
+
+  for (var i = sections.length - 1; i >= 0; i--) {
+    var section_position = sections[i].offsetTop;
+
+    // Very bottom (remove later (?))
+    if (i == sections.length - 1 && page_height - (scroll_position + window_height) <= 30) {
+      return i;
+    }
+
+    // Bottom
+    /*if (scroll_position >= page_height - window_height * 1.5) {
+      // ...
+      return sections.length; // Not this! (But just for now...)
+    }*/
+
+    // Very top (remove later (?))
+    if (scroll_position <= 30) {
+      return 0; // Top of page "section"
+    }
+
+    // Top
+    if (scroll_position < window_height * 0.5) {
+      if (scroll_position + window_height * 0.5 > section_position) {
+        return i;
+      }
+    }
+
+    // Top
+    /*if (scroll_position < window_height * 0.5) {
+      // ...
+      if (scroll_position >= section_position) {
+        return i - 1; // Not this! (But just for now...)
+      }
+    }*/
+
+    // Mid
+    if (scroll_position + window_height * 0.5 > section_position) {
+      return i;
+    }
+  }
+
+  // Scrolled midway (Luna-esque function—works (?) but could be better) (to-do: use/remove)
+  // } else if (section_position > scroll_position + window_height * (scroll_position / page_height)) {
+
+  return;
+}
+
+// Is Google Translate mode active?
+function is_google_translate_open() {
+  return String(window.location.hostname).includes('translate.goog');
+}
+
+// Is Google Translate bar open? (Currently unused)
+function is_google_translate_bar_open() {
+  if (is_google_translate_open() == false) {
+    return false;
+  } else {
+    var google_translate_bar_height = get_google_translate_bar_height();
+    return google_translate_bar_height == 0 ? false : true;
+  }
+}
+
+// Get Google Translate bar height
+function get_google_translate_bar_height() {
+  return parseFloat(document.body.style.marginTop);
+}
+
+// Set Google Translate bar height
+// For CSS styling to update site top positioning to account for Google Translate bar
+function update_google_translate_bar_height() {
+  var google_translate_bar_height = get_google_translate_bar_height();
+  google_translate_bar_height = String(google_translate_bar_height) + 'px';
+  document.documentElement.style.setProperty('--google-translate-bar-height', google_translate_bar_height);
+  return;
+}
+
+// Wrapper function for window.matchMedia().addEventListener() for cross-browser support
+// https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
+function matchMediaAddEventListener(media_query, listener_function) {
+	try {
+    // Chrome, Firefox, iOS/Safari 14+, etc.
+		window.matchMedia(media_query).addEventListener('change', listener_function);
+	} catch {
+    try {
+      // iOS/Safari 13 and below
+      window.matchMedia(media_query).addListener(listener_function);
+    } catch {
+      console.error('window.matchMedia.addEventListener() and window.matchMedia.addListener() not supported.');
+    }
+	}
+	return;
+}
+
+// Check if local storage is supported and available (avoid exceptions)
+// https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available
+// https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+function is_local_storage_available() {
+  let storage;
+  try {
+    storage = window['localStorage'];
+    const x = '__storage_test__';
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  }
+  catch (error) {
+    return error instanceof DOMException && (
+      // Everything except Firefox
+      error.code === 22 ||
+      // Firefox
+      error.code === 1014 ||
+      // Test name field too, because code might not be present
+      // Everything except Firefox
+      error.name === 'QuotaExceededError' ||
+      // Firefox
+      error.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+      // Acknowledge QuotaExceededError only if there's something already stored
+      (storage && storage.length !== 0);
+  }
+}
+