1 files changed, 506 insertions, 0 deletions

diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..396235f
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,506 @@
+/* Place custom css here */
+body {
+  font-family: "Inter", sans-serif !important;
+}
+
+.main a:not(.social-icons a):not(.breadcrumbs a) {
+  color: #dd9a19;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.15em;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.header {
+  font-size: 2em;
+  line-height: 1em;
+  margin-top: 0.25em;
+  padding-top: 0px;
+}
+
+.dark h1 {
+  color: #f37b84;
+  font-size: 2em;
+}
+
+.dark h1:hover {
+  color: #f78b9c;
+}
+
+.dark h2 {
+  color: #ffd98c;
+  font-size: 1.5em;
+}
+h2:hover {
+  color: #f7c47d;
+}
+
+.dark h3 {
+  color: #7fe8c7;
+  font-size: 1.25em;
+}
+
+h3:hover {
+  color: #a0f0d4;
+}
+
+.dark h4 {
+  color: #a5c38b;
+  font-size: 1.125em;
+  margin-bottom: 0pt;
+}
+
+h4:hover {
+  color: #bed9a9;
+}
+
+.dark h5 {
+  color: #d68f8f;
+  font-size: 1.075em;
+}
+
+h5:hover {
+  color: #e1a2a2;
+}
+
+.dark h6 {
+  color: #9f9282;
+  font-size: 1.05em;
+}
+
+h6:hover {
+  color: #b6aa9d;
+}
+
+.dark th,
+td {
+  border: 2px solid var(--background);
+}
+
+.dark td {
+  background-color: #241e1a;
+}
+
+.dark th {
+  background-color: #1e1815;
+  font-weight: bold;
+}
+
+.slash-pages {
+  flex-wrap: wrap;
+}
+
+div#gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  justify-content: center;
+}
+
+em,
+i {
+  color: #c38f88;
+  font-style: italic;
+}
+
+strong,
+b {
+  color: #f0c678;
+  font-weight: bold;
+}
+
+strong em,
+b em,
+strong i,
+b i {
+  color: #e5a58a;
+  font-weight: bold;
+  font-style: italic;
+}
+
+input {
+  text-rendering: auto;
+  color: fieldtext;
+  letter-spacing: normal;
+  word-spacing: normal;
+  line-height: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: start;
+  appearance: auto;
+  -webkit-rtl-ordering: logical;
+  cursor: text;
+  background-color: white;
+  margin: 0em;
+  padding: 1px 0px;
+  border-width: 2px;
+  border-style: inset;
+  border-color: var(--background);
+  border-image: initial;
+  padding-block: 1px;
+  padding-inline: 2px;
+}
+
+li > * {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+ul,
+ol {
+  margin-top: 0px;
+}
+
+input[type="submit" i] {
+  appearance: auto;
+  user-select: none;
+  text-align: center;
+  cursor: default;
+  box-sizing: border-box;
+  background-color: buttonface;
+  color: buttontext;
+  white-space: pre;
+  padding-block: 1px;
+  padding-inline: 6px;
+  border-width: 2px;
+  border-style: outset;
+  border-color: buttonborder;
+  border-image: initial;
+}
+
+textarea {
+  background-color: white;
+}
+
+blockquote {
+  display: block;
+  padding-left: 20px;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 40px;
+  margin-inline-end: 40px;
+  unicode-bidi: isolate;
+  color: var(--content-primary);
+}
+
+.guestbook-message > p > b {
+  color: #dd9a19;
+}
+
+.hover-underline {
+  text-decoration: none;
+}
+
+.hover-underline:hover {
+  text-decoration: underline;
+}
+
+img {
+  margin: auto;
+}
+
+figcaption {
+  text-align: center;
+}
+
+/* Books */
+.abook {
+  overflow: hidden;
+  margin: 0 0 5em 0;
+}
+
+.abook figure {
+  float: left;
+  margin-right: 1rem;
+  width: 120px;
+}
+
+.abook small {
+  display: block;
+  margin: 0.5rem 0;
+  color: #aaa;
+}
+
+.book {
+  display: flex; /* NEW: use flexbox */
+  align-items: flex-start; /* Align top edges */
+  overflow: hidden;
+  margin: 0 0 1em 0;
+}
+
+.book figure {
+  flex-shrink: 0;
+  margin-right: 1rem;
+  width: 120px;
+}
+
+.book-info {
+  display: flex; /* NEW: make inner div flex */
+  flex-direction: column; /* Stack title and small vertically */
+  justify-content: space-between; /* Push small to bottom */
+}
+
+.book-title {
+  margin: 0px;
+}
+
+.book small {
+  color: #aaa;
+  display: block;
+  margin-top: 1rem;
+}
+
+table {
+  width: fit-content;
+  margin: 0 auto;
+}
+
+.chord-line {
+  position: relative;
+  font-family: monospace;
+  white-space: pre-wrap;
+  line-height: 2.1;
+  margin: 0pt;
+  word-break: break-work;
+}
+
+.chord {
+  position: absolute;
+  top: -2.4em;
+  left: 0;
+  font-size: 0.75em;
+  font-weight: bold;
+  white-space: nowrap;
+  pointer-events: none;
+  font-family: monospace;
+  line-height: 0.9em;
+  background-color: #241e1a;
+  border-radius: 4px;
+  padding: 1.5px 2.5px;
+  color: orange;
+  z-index: 0;
+}
+
+.chord-anchor {
+  position: relative;
+  display: inline-block;
+}
+
+.chord-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  user-select: none;
+  margin: 1em 0;
+  font-size: 1em;
+}
+
+.chord-toggle input {
+  display: none;
+}
+
+.chord-toggle .slider {
+  width: 40px;
+  height: 20px;
+  background-color: #ccc;
+  border-radius: 999px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.chord-toggle .slider::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.chord-toggle input:checked + .slider {
+  background-color: #4caf50;
+}
+
+.chord-toggle input:checked + .slider::before {
+  transform: translateX(20px);
+}
+
+body.hide-chords .chord {
+  display: none;
+}
+
+body.hide-chords .chord-line {
+  line-height: 1.2em;
+  font-size: 1em;
+  font-family: sans-serif;
+}
+
+#song-list {
+  columns: 2; /* or 3 for more columns */
+  -webkit-columns: 2;
+  -moz-columns: 2;
+  list-style-type: disc;
+  padding-left: 20px;
+  transition: column-count 0.3s ease;
+}
+
+@media (max-width: 600px) {
+  #song-list {
+    columns: 1;
+    -webkit-columns: 1;
+    -moz-columns: 1;
+  }
+}
+
+#song-list a {
+  color: #ffcc33; /* Based Cooking link color */
+  text-decoration: none;
+  font-weight: 500;
+}
+
+#song-list a:hover {
+  text-decoration: underline;
+  color: #ffff66; /* Slightly brighter on hover */
+}
+
+.center {
+  text-align: center;
+}
+
+.search-bar-container {
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
+}
+
+.search-wrapper {
+  position: relative;
+  width: 80%;
+  max-width: 500px;
+}
+
+.search-bar {
+  background-color: #222;
+  color: #eee;
+  border: 1px solid #444;
+  padding: 10px 45px 10px 15px;
+  font-size: 16px;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 500px;
+  box-shadow: 0 0 10px #000;
+}
+
+.search-bar:focus {
+  border-color: #ffcc33; /* Highlight on focus */
+  box-shadow: 0 0 5px #ffcc33;
+}
+
+#song-list.list-searched {
+  columns: 1;
+  -webkit-columns: 1;
+  -moz-columns: 1;
+  font-size: 1.2em;
+}
+
+button#clear-search {
+  all: unset;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  cursor: pointer;
+  transition: color 150ms ease-in-out;
+}
+
+button#clear-search:hover {
+  color: #fff;
+}
+
+button#clear-search svg {
+  width: 100%;
+  height: 100%;
+}
+
+@media print {
+  /* Hide elements you don't want printed */
+  header,
+  nav,
+  footer,
+  .back-to-top,
+  .search-bar,
+  #clear-song-search,
+  .controls {
+    display: none !important;
+  }
+
+  /* Set a clean font for printing */
+  body {
+    font-family: "Georgia", serif;
+    font-size: 12pt;
+    background: white !important;
+    color: black !important;
+  }
+
+  /* Force all links to look like plain text */
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  /* Prevent page breaks in the middle of a song block */
+  .post-line {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  /* Optional: show URL after links */
+  a::after {
+    content: " (" attr(href) ")";
+    font-size: 10pt;
+    color: gray;
+  }
+
+  /* Optional: show chord lines in monospaced font */
+  .chord-line {
+    font-family: monospace;
+    white-space: pre-wrap;
+    break-inside: avoid;
+  }
+
+  .single-content {
+    column-count: 2; /* or 3 for more columns */
+    -webkit-columns: 2;
+    -moz-columns: 2;
+  }
+
+  .chord {
+    color: blue;
+    background-color: white;
+  }
+
+  /* Optional: print song title bigger */
+  h1,
+  body > div > main > div > div.single-intro-container > h2 {
+    color: black;
+  }
+}