Merge pull request #1 from verygoodplugins/design-handoff-editorial

Implement drunk.support editorial design handoff

Author: jack-arturo

.gitignore

@@ -1,2 +1,3 @@
 .mcp.json
 /.claude
+design_handoff_drunk_support/

archive.php

@@ -37,6 +37,9 @@
                                     <?php echo get_the_date('F j, Y'); ?>
                                 </time>
                                 <span class="reading-time"><?php echo minimalcode_reading_time(); ?></span>
+                                <?php if ( get_post_meta( get_the_ID(), '_minimalcode_autojack', true ) ) : ?>
+                                    <span class="autojack-pill" aria-label="Written by AutoJack"><span class="autojack-pill-glyph" aria-hidden="true">🤖</span> AutoJack</span>
+                                <?php endif; ?>
                             </div>
                         </header>
 

assets/css/custom.css

@@ -1746,3 +1746,229 @@ button {
     font-size: 1.75rem;
   }
 }
+
+/* ==========================================================================
+   AutoJack Pill (index + archive lists)
+   ========================================================================== */
+
+.autojack-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  padding: 0.15em 0.55em;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    135deg,
+    var(--autojack-grad-start),
+    var(--autojack-grad-end)
+  );
+  color: var(--autojack-grad-end);
+  border: 1px solid var(--autojack-border);
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .autojack-pill {
+  background: linear-gradient(
+    135deg,
+    rgba(99, 102, 241, 0.18),
+    rgba(139, 92, 246, 0.18)
+  );
+  color: #a5b4fc;
+}
+
+.autojack-pill-glyph {
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.entry-meta .autojack-pill,
+.post-meta .autojack-pill {
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   Header social squircles
+   ========================================================================== */
+
+.header-social {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.header-social li {
+  margin: 0;
+}
+
+.social-squircle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  color: var(--fg-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  transition: color var(--dur-fast) var(--ease-out),
+    background-color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.social-squircle:hover,
+.social-squircle:focus-visible {
+  color: var(--fg-primary);
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color);
+}
+
+.social-squircle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.social-squircle svg {
+  width: 18px;
+  height: 18px;
+}
+
+@media (max-width: 768px) {
+  .header-social {
+    display: none;
+  }
+}
+
+/* Search trigger label (visible on wider screens) */
+.search-trigger-label {
+  display: inline;
+}
+
+@media (max-width: 640px) {
+  .search-trigger-label {
+    display: none;
+  }
+}
+
+/* ==========================================================================
+   Search Modal — live results
+   ========================================================================== */
+
+.search-modal-content {
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-modal);
+}
+
+.search-modal-results {
+  list-style: none;
+  margin: 0;
+  padding: var(--spacing-xs) 0;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.search-modal-results:empty {
+  display: none;
+}
+
+.search-modal-result {
+  margin: 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--text-primary);
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  transition: background-color var(--dur-fast) var(--ease-out);
+}
+
+.search-modal-result[aria-selected="true"],
+.search-modal-result:hover {
+  background-color: var(--accent-tint);
+  border-left-color: var(--accent);
+}
+
+.search-modal-result-title {
+  display: block;
+  font-size: var(--fs-base);
+  font-weight: var(--fw-medium);
+  line-height: 1.4;
+  color: var(--text-primary);
+  margin-bottom: 0.15em;
+}
+
+.search-modal-result-meta {
+  display: block;
+  font-size: var(--fs-sm);
+  color: var(--text-secondary);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+
+.search-modal-results mark,
+.search-modal-result mark {
+  background-color: var(--accent-tint);
+  color: var(--accent);
+  padding: 0 0.1em;
+  border-radius: 2px;
+}
+
+.search-modal-empty {
+  padding: var(--spacing-md);
+  font-size: var(--fs-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.search-modal-hints {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-top: 1px solid var(--border-color);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+  font-family: var(--font-code);
+}
+
+.search-modal-hints kbd {
+  display: inline-block;
+  padding: 0.1em 0.4em;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 0.85em;
+  color: var(--text-secondary);
+  margin-right: 0.25em;
+}
+
+.search-modal-hints span + span {
+  border-left: 1px solid var(--border-color);
+  padding-left: var(--spacing-sm);
+}
+
+/* ==========================================================================
+   Spec-alignment polish
+   ========================================================================== */
+
+/* Single-post prose — cap to 700px per editorial spec */
+.single-post .entry-content {
+  max-width: var(--max-width-prose);
+}
+
+/* Featured image: rounded + 16:9 */
+.post-thumbnail img,
+.single-post .entry-featured-image img {
+  border-radius: var(--radius-lg);
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+}