website_next: part 9

website_next/explore/block/title/index.js

@@ -0,0 +1,27 @@
+/** @param {number} height */
+function createBlockHeight(height) {
+  const element = document.createElement("span");
+  const prefix = document.createElement("span");
+  const value = document.createElement("span");
+  const text = String(height);
+
+  prefix.dataset.dim = "";
+  prefix.textContent = `#${"0".repeat(Math.max(0, 7 - text.length))}`;
+  value.textContent = text;
+  element.append(prefix, value);
+
+  return element;
+}
+
+/** @param {number} height */
+export function createBlockTitle(height) {
+  const label = document.createElement("span");
+  const value = document.createElement("span");
+
+  label.dataset.titleLabel = "";
+  value.dataset.titleHeight = "";
+  label.textContent = "Block";
+  value.append(createBlockHeight(height));
+
+  return /** @type {const} */ ([label, value]);
+}

website_next/explore/block/title/style.css

@@ -0,0 +1,31 @@
+[data-block-title-text] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35em;
+  align-items: baseline;
+  justify-content: var(--block-title-justify, flex-start);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--block-title-color, inherit);
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-regular);
+  line-height: 1;
+
+  [data-title-label] {
+    font-family: var(--font-serif);
+    font-size: var(--block-title-label-size);
+    font-style: italic;
+    line-height: 0.9;
+    text-transform: lowercase;
+  }
+
+  [data-title-height] {
+    color: var(--block-title-height-color);
+    font-size: var(--block-title-height-size);
+    line-height: var(--block-title-height-line-height);
+
+    [data-dim] {
+      opacity: 0.5;
+    }
+  }
+}