You know how it is

static/collapse.css

@@ -0,0 +1,3 @@
+.orgjq-contracted > div {
+  display: none;
+}

static/custom.css

@@ -0,0 +1,126 @@
+.poetry {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    text-align: center;
+}
+
+
+.figure-number {
+    display: none;
+}
+
+.center, div.center {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.center figure,
+.center figcaption,
+div.center figure,
+div.center figcaption {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.caption {
+    padding-top: 0.5rem;
+    font-style: italic;
+}
+
+.outline-3, .outline-4, .outline-5 {
+    padding-left: 0.6rem;
+    border-radius: 0.2em;
+    box-shadow: 1px 1px 1px var(--grey2);
+    margin: 0.7rem;
+    border: 1px solid var(--grey4);
+}
+
+.outline-text-3, .outline-text-4, .outline-text-5 {
+    margin: 0.3rem 1rem 0.5rem 0.5rem;
+}
+/*
+.outline-3 {
+    border-left: 1px inset var(--red5);
+}
+
+.outline-4 {
+    border-left: 1px inset var(--purple3);
+}
+
+.outline-5 {
+    border-left: 1px inset var(--blue4);
+}
+ */
+
+/*
+.outline-5::after {
+    content: "⇜";
+    display: block;
+    text-align: right;
+    margin-top: -2.0rem;
+}
+ */
+
+
+.orgjq-expanded p {
+    margin-top: 0;
+}
+
+/*
+.outline-3.orgjq-contracted h3::before {
+    content: "🡒 ";
+}
+
+.outline-4.orgjq-contracted h4::before {
+    content: "⤳ ";
+}
+
+.outline-5 h5::before {
+    content: "⇝ ";
+}
+ */
+
+#content h2, #content h3, #content h4, #content h5 {
+  margin-bottom: 0rem;
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+#content h3 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+#content h4 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+#content h5 {
+    padding-top: 0.3rem;
+    padding-bottom: 0.3rem;
+}
+
+.orgjq-contracted h2, .orgjq-contracted h3, .orgjq-contracted h4, orgjq-contracted h5 {
+    padding-top: 0.3rem !important;
+    padding-bottom: 0.3rem !important;
+}
+
+#content h2 {
+  margin-top: 1rem;
+}
+
+.orgjq-expanded p {
+    padding-bottom: 0.5rem;
+    margin-bottom: 0;
+}
+
+#content, #footer {
+    box-shadow: 7px 7px 7px var(--grey1);
+}
+
+h2 {
+    line-height: 1.5rem;
+}

static/esquemadorg.js

@@ -65,8 +65,8 @@ function hideForOrg_whenclicked(div_obj) {
 
 	div_obj.parent().removeClass("orgjq-expanded").addClass("orgjq-contracted");
 	if(HOW_TO_HIDE=='hide'){
-		div_obj.nextAll().hide("fast"); // "normal" es más lento
-		div_obj.hide();
+		//div_obj.nextAll().hide("fast"); // "normal" es más lento
+		//div_obj.hide();
 	} else if(HOW_TO_HIDE=='shrink'){
 		//div_obj.css("zoom","0.25");
 		// div_obj.nextAll().css("zoom","0.25");
@@ -238,6 +238,13 @@ function enable_global_outlining() {
 	$("div#table-of-contents").removeClass("orgjq-expanded").addClass("orgjq-contracted");
 
 
+    // Hide default-hidden categories
+    $(".orgjq-contract-default").each(
+        function(){
+            hideForOrg_whenclicked($(this))
+        }
+    );
+
 
 	// If provided #fragment in URL, we must locate and open the corresponding header and its parents
 	var url = document.location.toString();

static/footnote.css

@@ -0,0 +1,11 @@
+.footnote-tooltip {
+    position: 'absolute';
+    z-index:  1000;
+    background-color: var(--background-tooltip);
+    border: 1px solid var(--accent1);
+    border-radius: = 4px;
+    padding: 8px 12px;
+    max-width: 300px;
+    font-size: calc(var(--font-size) * 0.9);
+    box-shadow: 1px 1px 1px var(--grey2);
+}

static/footnote.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+  console.log("🦶🦶🦶🦶🦶 FOOTNOTES LOADED 🦶🦶🦶🦶🦶🦶")
+
+  const footnoteRefs = document.querySelectorAll('.footref')
+
+  footnoteRefs.forEach(ref => {
+    const footnoteId = ref.href.split('#')[1]
+    ref.setAttribute('data-footnote-id', footnoteId)
+    ref.href = 'javascript:void(0)';
+
+    ref.addEventListener('mouseenter', function() {
+      // Find footnote element
+      const footnoteId = this.getAttribute('data-footnote-id')
+
+      const footnoteElement = document.getElementById(footnoteId).parentElement.nextElementSibling.children[0]
+
+      if (footnoteElement) {
+        // Create tooltip container
+        const tooltip = document.createElement('div');
+        tooltip.className = 'footnote-tooltip'
+        tooltip.innerHTML = footnoteElement.innerHTML
+
+        // Position tooltip
+        const rect = this.getBoundingClientRect();
+        tooltip.style.position = 'absolute'
+        tooltip.style.top = (rect.bottom + window.scrollY + 5) + 'px'
+        tooltip.style.left = rect.left + 'px'
+
+        // Add to page
+        document.body.appendChild(tooltip)
+
+        // Store reference for cleanup
+        this._tooltip = tooltip
+      }
+    });
+
+    ref.addEventListener('mouseleave', function() {
+      // Remove tooltip
+      if (this._tooltip) {
+        this._tooltip.remove()
+        this._tooltip = null
+      }
+    });
+  });
+
+  // Hide footnotes section
+  document.querySelector("#footnotes").style.display='none'
+});

static/style.css

@@ -1,18 +1,99 @@
 
 :root {
-  --site-width: 900px;
+  --green1: #123218;
+  --green2: #254f1b;
+  --green3: #356c22;
+  --green4: #5e8e40;
+  --green5: #85aa5f;
+
+  --blue1: #1b2459;
+  --blue2: #153a79;
+  --blue3: #2f5394;
+  --blue4: #417eaf;
+  --blue5: #69a8c6;
+
+  --purple1: #2e1e58;
+  --purple2: #493281;
+  --purple3: #6a45a6;
+  --purple4: #855aa3;
+  --purple5: #9b77b5;
+
+  --red1: #4b1313;
+  --red2: #682017;
+  --red3: #84301c;
+  --red4: #9c4830;
+  --red5: #c46849;
+
+  --grey1: #202124;
+  --grey2: #33333b;
+  --grey3: #605b66;
+  --grey4: #a79fa7;
+  --grey5: #c5bcbc;
+
+  --site-width: 1000px;
   --vert-content-margin: 0.3rem;
-  --accent1: #2596be;
-  --link: #2527EA;
-  --black: #000;
-  --white: #FBFBFB;
-  --grey: #EFEFEF;
-  --background: #EAEFFF;
-  --background-toc: #E1EFFF;
-  --shadow-toc: #6E868F;
-  --font-size: 1.1rem;
+  --accent1: var(--purple4);
+  --link: var(--blue3);
+  --black: var(--grey1);
+  --grey: var(--grey3);
+  --background: var(--grey5);
+  --background-tooltip: var(--grey5);
+
+  --font-size: 1.2rem;
   --line-height: 1.2rem;
   --font-family: "Source Serif Pro";
+
+  --scale: 2;
+}
+
+/*
+@media (min-height: 1081px) {
+  :root {
+    --scale: 2;
+  }
+}
+
+@media (min-height: 2161px) {
+  :root {
+    --scale: 3;
+  }
+}
+
+@media (min-height: 3241px) {
+  :root {
+    --scale: 4;
+  }
+}
+ */
+
+body::before,
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  width: 50%;
+  background-image: url('/static/images/background.png');
+  background-repeat: no-repeat;
+  z-index: -1;
+
+  image-rendering: pixelated; /* For Chrome/Safari */
+  image-rendering: -moz-crisp-edges; /* For Firefox */
+  image-rendering: crisp-edges; /* Fallback */
+
+  background-size: calc(960px * var(--scale)) calc(1080px * var(--scale));
+}
+
+body::before {
+  left: 0;
+  background-position: top right;
+}
+
+body::after {
+  right: 0;
+  background-position: top right;
+  /* Flip the right side horizontally */
+  transform: scaleX(-1);
 }
 
 body {
@@ -22,10 +103,47 @@ body {
   line-height: var(--line-height);
   color: var(--black);
   background-color: var(--background);
+  color: var(--grey1);
   word-spacing: 0.25ch;
   font-weight: 400;
 }
 
+#content, #header, #footer {
+  min-width: 500px;
+  max-width: min(var(--site-width), 90vw);
+  margin: 0 auto;
+  padding: 5px 25px;
+
+  background-color: var(--background);
+  border: 2px double var(--grey1);
+  margin-bottom: 1.2rem;
+}
+
+#header {
+  display: flex;
+}
+
+#looking-for-work {
+  background-color: var(--red2);
+  color: var(--grey5);
+  padding: 5px 25px;
+  margin-left: auto;
+  margin-top: -0.32rem;
+  margin-bottom: -0.32rem;
+  margin-right: -1.55rem;
+  border: 2px double var(--purple5);
+}
+
+#looking-for-work a, #looking-for-work a:visited {
+  color: var(--blue5) !important;
+}
+
+
+#footer {
+padding-top: 1rem;
+padding-bottom: 1rem;
+}
+
 code {
   font-size: calc(var(--font-size) * 0.9);
 }
@@ -53,12 +171,12 @@ a, a:visited {
 }
 
 #header a, #header a:visited{
-  color: var(--grey);
+  color: var(--purple2);
 }
 
-
 #content h2, #content h3, #content h4, #content h5 {
-  margin-bottom: -0.8rem;
+  margin-bottom: 0.2rem;
+  margin-top: 0.5rem;
 }
 
 #content h2 {
@@ -73,29 +191,6 @@ a, a:visited {
   margin-top: var(--vert-content-margin);
 }
 
-#header {
-  padding: 5px;
-  background-color: var(--accent1);
-  border: 2px double var(--black);
-  border-radius: 5px;
-}
-
-#content, #header, #footer {
-  min-width: 500px;
-  max-width: min(var(--site-width), 90vw);
-  margin: 0 auto;
-}
-
-#footer {
-  margin-top: 1.5rem;
-}
-
-
-#content {
-  padding-left: 7%;
-  padding-right: 7%;
-}
-
 #publish-date, #modified-date {
   font-style: italic;
 }
@@ -105,18 +200,6 @@ a, a:visited {
   font-size: 1rem;
 }
 
-.outline-3.orgjq-contracted h3::before {
-  content: "🡒";
-}
-
-.outline-4.orgjq-contracted h4::before {
-  content: "⤳";
-}
-
-.outline-5.orgjq-contracted h5::before {
-  content: "⇝";
-}
-
 /* TOC */
 
 #table-of-contents {
@@ -162,34 +245,36 @@ a, a:visited {
   padding-right: 20px;
 }
 
-/* Set the colors in <pre> blocks from the Leuven theme */
-pre                                      {background-color:#FFFFFF;}
-pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
-pre span.org-string                      {color:#008000;}
-pre span.org-keyword                     {color:#0000FF;}
-pre span.org-variable-name               {color:#BA36A5;}
-pre span.org-function-name               {color:#006699;}
-pre span.org-type                        {color:#6434A3;}
-pre span.org-preprocessor                {color:#808080;font-weight:bold;}
-pre span.org-constant                    {color:#D0372D;}
-pre span.org-comment-delimiter           {color:#8D8D84;}
-pre span.org-comment                     {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-1            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-2            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-3            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-4            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
-pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
-pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
-pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
-pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
-pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
-pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
-pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
-pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
-pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
-pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
-pre span.org-sh-quoted-exec              {color:#FF1493;}
+pre                                      {background-color:var(--grey1); color:var(--grey5);}
+pre span.org-builtin                     {color:var(--blue4);font-weight:bold;}
+pre span.org-string                      {color:var(--green4);}
+pre span.org-keyword                     {color:var(--blue4);}
+pre span.org-variable-name               {color:var(--purple5);}
+pre span.org-function-name               {color:var(--blue5);}
+pre span.org-type                        {color:var(--purple3);}
+pre span.org-preprocessor                {color:var(--grey5);font-weight:bold;}
+pre span.org-constant                    {color:var(--red2);}
+pre span.org-comment-delimiter           {color:var(--grey5);}
+pre span.org-comment                     {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-1            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-2            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-3            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-4            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-5            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-6            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-7            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-8            {color:var(--grey5);font-style:italic}
+pre span.org-outshine-level-9            {color:var(--grey5);font-style:italic}
+pre span.org-rainbow-delimiters-depth-1  {color:var(--grey4);}
+pre span.org-rainbow-delimiters-depth-2  {color:var(--blue1);}
+pre span.org-rainbow-delimiters-depth-3  {color:var(--green1);}
+pre span.org-rainbow-delimiters-depth-4  {color:var(--red1);}
+pre span.org-rainbow-delimiters-depth-5  {color:var(--purple1);}
+pre span.org-rainbow-delimiters-depth-6  {color:var(--blue4);}
+pre span.org-rainbow-delimiters-depth-7  {color:var(--green3);}
+pre span.org-rainbow-delimiters-depth-8  {color:var(--red3);}
+pre span.org-rainbow-delimiters-depth-9  {color:var(--purple3);}
+pre span.org-sh-quoted-exec              {color:var(--purple2);}
+
+.TODO { color: var(--red3); }
+.DONE { color: var(--green3); }