✨ shareable banner

static/css/style.css

@@ -837,6 +837,57 @@ footer {
     color: var(--color-text-muted);
 }
 
+.shareable-banner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.banner-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.banner-code {
+    font-size: var(--font-size-sm);
+}
+
+.banner-code summary {
+    cursor: pointer;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-tight);
+    padding: var(--space-xs) 0;
+}
+
+.banner-code summary:hover {
+    color: var(--color-text);
+}
+
+.banner-code summary:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.banner-code textarea {
+    width: 100%;
+    font-family: var(--font-family);
+    font-size: var(--font-size-xs);
+    padding: var(--space-sm);
+    margin-top: var(--space-xs);
+    border: var(--border-width-thin) solid var(--border-color);
+    background-color: var(--color-background);
+    color: var(--color-text);
+    resize: vertical;
+    min-height: 60px;
+}
+
+.banner-code textarea:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .footer-bottom {
     text-align: center;
     padding-top: var(--space-lg);