First commit

frontend/app/assets/css/_article.scss

@@ -0,0 +1,225 @@
+@use 'mixins' as *;
+
+// ---------- Article page ----------
+.article-page { padding-block: 40px 80px; }
+
+.article-head { margin-bottom: 8px; }
+
+.article-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 0.8rem;
+  color: var(--faint);
+  margin-bottom: 10px;
+}
+
+// the title and the ⋮ share one line: the title takes what is left and wraps
+// its own text, the actions keep their place at the side of it
+.article-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.article-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-weight: 830;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+}
+
+.article-actions {
+  flex: none;
+  display: flex;
+  gap: 9px;
+  padding-top: 10px;
+}
+
+// The ⋮ menu: the quiet button that folds several actions into one place. The
+// article's title row uses it for Edit, languages and Delete; the admin
+// dashboard uses it for the role and the account itself.
+.kebab { position: relative; }
+
+.kebab-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--muted);
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+
+  &:hover,
+  &.open {
+    border-color: var(--border-strong);
+    background: var(--surface-2);
+    color: var(--text);
+  }
+}
+
+.kebab-dropdown {
+  @include dropdown-panel($z: 30, $overflow: visible);
+  right: 0;
+  min-width: 190px;
+  text-align: left;
+
+  // the language menu rides inside as a row of the ⋮ menu — flat, full-width,
+  // its own list dropping over the rows below
+  .lang-menu {
+    width: 100%;
+
+    > .btn {
+      justify-content: flex-start;
+      width: 100%;
+      padding: 8px 10px;
+      border: 0;
+      border-radius: 8px;
+      background: none;
+      color: var(--text);
+      font-size: 0.85rem;
+      font-weight: 600;
+
+      &:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+    }
+  }
+}
+
+.kebab-item {
+  @include menu-row(8px 10px, 9px);
+  text-decoration: none;
+
+  svg { flex: none; color: var(--faint); transition: color 0.12s; }
+
+  // a menu row whose request is still in flight: readable, but no longer a way
+  // to ask twice
+  &:disabled {
+    color: var(--faint);
+    cursor: default;
+    background: none;
+
+    svg { color: var(--faint); }
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+
+    svg { color: var(--accent); }
+  }
+}
+
+.kebab-danger:hover {
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+
+  svg { color: var(--danger); }
+}
+
+.kebab-sep { margin: 5px 0; border-top: 1px solid var(--border); }
+
+// Topics line at the foot of an article: “Topics: Probability, Calculus”.
+// The comma joins the topics; a break stays tidy after it.
+.article-topics {
+  margin-top: 36px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.article-topics-label { font-weight: 600; margin-right: 0.35em; }
+
+.article-topics .topic-link {
+  color: var(--accent);
+  text-decoration: none;
+  margin-right: 0.5em;
+
+  &:not(:last-child)::after { content: ','; }
+
+  &:hover { text-decoration: underline; }
+}
+
+.article-body {
+  margin-top: 34px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+  min-width: 0;
+}
+
+// TOC
+.toc {
+  position: sticky;
+  top: 24px;
+  font-size: 0.855rem;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}
+
+.toc-title { @include eyebrow; margin-bottom: 10px; }
+
+.toc ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-left: 2px solid var(--border);
+}
+
+.toc li a {
+  display: block;
+  padding: 5px 0 5px 14px;
+  margin-left: -2px;
+  border-left: 2px solid transparent;
+  color: var(--muted);
+  text-decoration: none;
+  line-height: 1.4;
+  transition: color 0.15s, border-color 0.15s;
+
+  &:hover { color: var(--text); }
+
+  &.active { color: var(--accent); border-left-color: var(--accent); }
+}
+
+.toc li.level-3 a { padding-left: 28px; font-size: 0.8rem; }
+
+// Recently viewed (article sidebar)
+.recently-viewed {
+  margin-top: 26px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+  font-size: 0.855rem;
+
+  ul { list-style: none; margin: 0; padding: 0; }
+
+  li {
+    + li { margin-top: 2px; }
+
+    a {
+      display: block;
+      padding: 6px 9px;
+      border-radius: 7px;
+      color: var(--muted);
+      text-decoration: none;
+      line-height: 1.35;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: background 0.15s, color 0.15s;
+
+      &:hover {
+        background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
+        color: var(--text);
+      }
+    }
+  }
+}
+
+.rv-title { @include eyebrow; margin-bottom: 8px; }