@docpensieve/theme 0.3.0-beta.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docpensieve/theme",
-  "version": "0.3.0-beta.1",
+  "version": "0.3.0",
   "description": "DocPensieve theme system: composable providers (Tailwind, custom)",
   "type": "module",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "types"
   ],
   "dependencies": {
-    "@docpensieve/shared": "0.3.0-beta.1",
+    "@docpensieve/shared": "0.3.0",
     "tailwindcss": "^4.3.3"
   },
   "keywords": [

package/styles/prose.css

@@ -160,3 +160,76 @@
   border-color: var(--dp-text-soft);
   color: var(--dp-text);
 }
+
+/* The links of the header, and the menu that holds them on a narrow screen. */
+.dp-header-links a {
+  color: var(--dp-text-soft);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.dp-header-links a:hover {
+  color: var(--dp-text);
+}
+
+.dp-menu > summary {
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  color: var(--dp-text-soft);
+}
+
+.dp-menu > summary:hover,
+.dp-menu[open] > summary {
+  border-color: var(--dp-text-soft);
+  color: var(--dp-text);
+}
+
+.dp-menu-panel {
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  background: var(--dp-bg);
+  box-shadow: 0 8px 24px var(--dp-shadow);
+}
+
+/* The byline of a page: quieter than the text it introduces. */
+.dp-byline {
+  border-block-end: 1px solid var(--dp-border);
+  font-size: 0.9rem;
+}
+
+.dp-byline-name {
+  font-weight: 600;
+  color: var(--dp-text);
+}
+
+.dp-byline-name a {
+  color: inherit;
+}
+
+.dp-byline-bio,
+.dp-byline-dates {
+  color: var(--dp-text-soft);
+}
+
+.dp-byline-bio {
+  font-size: 0.85rem;
+}
+
+.dp-byline-avatar {
+  border: 1px solid var(--dp-border);
+}
+
+/* The tags at the bottom of a page: quiet labels, set apart from the text. */
+.dp-tags {
+  padding-block-start: 1.25rem;
+  border-block-start: 1px solid var(--dp-border);
+}
+
+.dp-tag {
+  padding: 0.15rem 0.7rem;
+  border: 1px solid var(--dp-border);
+  border-radius: 999px;
+  background: var(--dp-accent-soft);
+  color: var(--dp-text-soft);
+  font-size: 0.8rem;
+}

package/styles/structure.css

@@ -160,6 +160,99 @@ body {
   list-style: none;
 }
 
+/*
+ * What the header offers beyond the brand — versions, links, search — is
+ * written twice, and shown once: in a row on a wide screen, behind a menu
+ * button on a narrow one. Its look is in prose.css.
+ */
+.dp-header-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-inline-start: auto;
+}
+
+.dp-header-links {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dp-header-nav .dp-search {
+  margin-inline-start: 0;
+}
+
+.dp-menu {
+  display: none;
+  position: relative;
+  margin-inline-start: auto;
+}
+
+.dp-menu > summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.dp-menu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.dp-menu > summary svg {
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+}
+
+.dp-menu-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.9rem;
+  min-inline-size: 15rem;
+  padding: 1rem;
+}
+
+.dp-menu-panel .dp-header-links {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* In the panel, the version list unfolds in place rather than over it. */
+.dp-menu-panel .dp-versions-list {
+  position: static;
+  margin-block-start: 0.4rem;
+}
+
+.dp-menu-panel .dp-search input {
+  max-inline-size: none;
+}
+
+/* Beside a menu, the light / dark switch no longer pushes itself right. */
+.dp-header-nav ~ .dp-scheme-toggle,
+.dp-menu ~ .dp-scheme-toggle {
+  margin-inline-start: 0;
+}
+
+@media (max-width: 48rem) {
+  .dp-header-nav {
+    display: none;
+  }
+
+  .dp-menu {
+    display: block;
+  }
+}
+
 /*
  * A documentation page takes the whole available width, 25 pixels short of
  * each edge. Three columns share the space — menu, content, table of
@@ -320,3 +413,84 @@ body {
     scroll-behavior: auto;
   }
 }
+
+/*
+ * The byline: who wrote the page, and when. Layout only — its colours and its
+ * type live in prose.css, shared by every theme.
+ */
+.dp-byline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-block-end: 2rem;
+  padding-block-end: 1rem;
+}
+
+.dp-byline-authors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dp-byline-author {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'avatar name'
+    'avatar bio';
+  gap: 0 0.65rem;
+  align-items: center;
+  max-inline-size: 32rem;
+}
+
+/* Without an avatar, the empty column would push the name to the right. */
+.dp-byline-author:not(:has(.dp-byline-avatar)) {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'name'
+    'bio';
+}
+
+.dp-byline-avatar {
+  grid-area: avatar;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  border-radius: 999px;
+  object-fit: cover;
+}
+
+.dp-byline-name {
+  grid-area: name;
+}
+
+.dp-byline-bio {
+  grid-area: bio;
+}
+
+.dp-byline-dates {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin: 0;
+}
+
+/*
+ * The tags of a page, below the article. Layout only — their look is in
+ * prose.css.
+ */
+.dp-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 2.5rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dp-tag {
+  display: inline-flex;
+  align-items: center;
+}