images

diff --git a/rendered.html b/rendered.html
index 951ad7922b81455ae4159ab994d22b85de7534c2..10dfc856f92f6d4717fd2f27580e7be20d1a367a 100644 (file)
--- a/rendered.html
+++ b/rendered.html
@@ -540,7 +540,6 @@ pre.pygments .tok-il { color: #AE81FF } /* Literal.Number.Integer.Long */
     --gruvbox-green: #b8bb26;
     --gruvbox-bg1: #7c6f64;
     --gruvbox-bg2: #665c54;
-
 }
 
 .title {
@@ -553,10 +552,19 @@ blockquote {
 
 table {
     margin: 0 auto !important;
+    margin-bottom: 20px !important;
 }
 
 .hdlist1 {
-  font-size: 1.3em;
+  /*font-size: 1.3em;*/
+    text-decoration: underline;
+}
+
+/* for list element definitions * *define-me*: */
+li strong {
+    /*text-decoration: underline;*/
+    border-radius: .2;
+    color: grey;
 }
 
 cite {
@@ -583,11 +591,9 @@ code:not([data-lang]) {
 
 .checklist {
     text-align: left;
-    font-size: .8em;
 }
 
-.checklist li ul { margin-left: 3%;
-}
+.checklist li ul { margin-left: 3%; }
 
 #content, h1, pre {
     border-radius: 8px !important;
@@ -686,6 +692,10 @@ a {
     padding-left: 2%;
 }
 
+.sect1 {
+    padding-bottom: 0;
+}
+
 .sect1 + .sect1 {
   border-top: none !important;
 }
@@ -704,7 +714,9 @@ a {
     text-shadow: 1px 1px 1px var(--gruvbox-black);
     text-shadow: 3px 3px 3px var(--gruvbox-black);
     text-shadow: 5px 5px 5px var(--gruvbox-blue);
+    border-bottom: solid;
     */
+    width: fit-content;
 }
 
 h3, h4, h5 {
@@ -714,7 +726,8 @@ h3, h4, h5 {
 }
 
 h3 {
-  color: var(--gruvbox-red) !important;
+  color: var(--gruvbox-green) !important;
+    opacity: 80%;
 }
 
 h4 {
@@ -844,6 +857,12 @@ details[open] > summary::before {
     margin: auto;
 }
 
+.exampleblock >.content {
+    background: var(--gruvbox-black);
+    border-color: #e0e0dc;
+    box-shadow: 3px 2px 9px #e0e0dc;
+}
+
 .center {
     max-width: 500px;
     display: flex;
@@ -873,6 +892,69 @@ img {
     width: 100%;
 }
 
+/* ================= SCROLLBARS (WebKit) ================= */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--gruvbox-bg1);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+div.ulist {
+    max-width: 95%;
+}
+
+.paragraph {
+    max-width: 98%;
+}
+
+.todo-list li .checkbox {
+  display: inline-block;   /* already set */
+  width: 1.5em;            /* fixed width */
+  height: 1.5em;           /* keep height same */
+  margin-right: 0.5em;
+  vertical-align: middle; /* align with text nicely */
+  text-align: center;
+}
+
+li.started .checkbox {
+  color: var(--gruvbox-yellow);
+}
+
+li.completed .checkbox {
+  color: var(--gruvbox-green);
+}
+
+li.empty .checkbox {
+  color: var(--gruvbox-red);
+}
+
+.todo-list li {
+  font-family: "inherit";      /* inherits whatever body is using */
+  line-height: 1.4em;          /* optional: keep spacing nice */
+}
+
+ul.checklist li p {
+  font-size: 1.2em;   /* same as body text */
+}
+
+
+
+
+div#header {
+    background-color: var(--gruvbox-blue);
+    height: 100px;
+    top: 0px;
+    background-color: var(--gruvbox-black);
+    z-index: 1000;
+}
+
 
 </style>
 
@@ -886,9 +968,137 @@ function sendHeight() {
 
 window.addEventListener("load", sendHeight);
 window.addEventListener("resize", sendHeight);
-</script>
 
+/*
+document.addEventListener("keydown", (e) => {
+    if (e.key === "o") {
+        e.preventDefault();
+        parent.postMessage({ type: "CLOSE_NOTES" }, "*");
+    }
+});
+*/
+let scrollKeys = { j: false, k: false };
+let isScrolling = false;
+const SCROLL_SPEED = 10; // pixels per frame
+
+function scrollStep() {
+    let delta = 0;
+    if (scrollKeys.j) delta += SCROLL_SPEED;
+    if (scrollKeys.k) delta -= SCROLL_SPEED;
+
+    if (delta !== 0) {
+        window.scrollBy(0, delta);
+        requestAnimationFrame(scrollStep);
+    } else {
+        isScrolling = false;
+    }
+}
+
+document.addEventListener("keydown", (e) => {
+    const tag = document.activeElement.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || document.activeElement.isContentEditable) return;
+
+    if (e.key === "j" || e.key === "k") {
+        e.preventDefault();
+        scrollKeys[e.key] = true;
+
+        if (!isScrolling) {
+            isScrolling = true;
+            requestAnimationFrame(scrollStep);
+        }
+    }
+    if(e.key === "o") {
+        e.preventDefault();
+        parent.postMessage({ type: "CLOSE_NOTES" }, "*");
+    }
+});
+
+document.addEventListener("keyup", (e) => {
+    if (e.key === "j" || e.key === "k") {
+        scrollKeys[e.key] = false;
+    }
+});
 
+
+
+window.onload = function () {
+
+  // Select all checklist ULs
+  document.querySelectorAll('ul.checklist').forEach(function(ul) {
+  ul.classList.add('todo-list');
+
+  ul.querySelectorAll('li').forEach(function(li) {
+    const p = li.querySelector('p');
+    if (!p) return;
+
+    const text = p.textContent.trim();
+
+    let state = '';
+    if (text.startsWith('❏')) {
+      state = 'empty';
+    } else if (text.startsWith('✓')) {
+      state = 'started';
+    } else if (text.startsWith('[X]')) {
+      state = 'completed';
+    } else {
+      return;
+    }
+
+    li.classList.add(state);
+
+    // Remove the marker
+    let content = '';
+    if (state === 'completed') {
+      content = text.slice(3).trim();
+    } else {
+      content = text.slice(1).trim();
+    }
+
+    // Only rewrite the first <p>, keep nested divs/lists intact
+    p.innerHTML = '';
+
+    const checkbox = document.createElement('span');
+    checkbox.className = 'checkbox';
+
+    /*
+    if (state === 'empty') checkbox.textContent = '🌑';
+    else if (state === 'started') checkbox.textContent = '🌓';
+    else if (state === 'completed') checkbox.textContent = '🌕';
+    */
+    if (state === 'empty') checkbox.textContent = '☐';
+    else if (state === 'started') checkbox.textContent = '◪';
+    else if (state === 'completed') checkbox.textContent = '▣';
+
+    p.appendChild(checkbox);
+    p.appendChild(document.createTextNode(' ' + content));
+  });
+});
+
+};
+window.addEventListener("load", e => {
+    // Request the scroll position as soon as the iframe is loaded
+    window.parent.postMessage({
+        type: "SCROLL_REQUEST_GET"
+    }, "*");
+});
+
+// Capture scroll position while scrolling
+window.addEventListener("scroll", e => {
+    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+    window.parent.postMessage({
+        type: "SCROLL_REQUEST_SET",
+        scrollPosition: scrollPosition
+    }, "*");
+});
+
+// Receive messages to set the scroll position
+window.addEventListener("message", (e) => {
+    if (e.data.type === "SCROLL_POSITION") {
+        // Set the scroll position to the iframe
+        window.scrollTo(0, e.data.scrollPosition);
+    }
+});
+</script>
 </head>
 <body class="article">
 <div id="header">
@@ -899,7 +1109,7 @@ window.addEventListener("resize", sendHeight);
 <div class="sectionbody">
 <div class="imageblock">
 <div class="content">
-<img src="https://nyquistdev.net/git/?p=ubuntu-rice.git;a=blob_plain;f=.images/rice.png" alt="rice">
+<img src="https://nyquistdev.net/gitweb/?p=ubuntu-rice.git;a=blob_plain;f=.images/rice.png" alt="rice">
 </div>
 </div>
 <div class="paragraph">
@@ -1303,7 +1513,7 @@ doing in the first place.</p>
 </div>
 <div class="imageblock">
 <div class="content">
-<img src="https://nyquistdev.net/git/?p=ubuntu-rice.git;a=blob_plain;f=.images/gumball-arch.png" alt="gumball arch">
+<img src="https://nyquistdev.net/gitweb/?p=ubuntu-rice.git;a=blob_plain;f=.images/gumball-arch.png" alt="gumball arch">
 </div>
 </div>
 </div>