add quote block, cite custom mark, and blockquote styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/panel.css

@@ -9,7 +9,10 @@
   color: #000;
 }
 
-.k-panel[data-template="year"] .k-section-name-texts .k-list-items .k-item:first-child {
+.k-panel[data-template="year"]
+  .k-section-name-texts
+  .k-list-items
+  .k-item:first-child {
   margin-bottom: 2rem;
 }
 .k-panel[data-template="year"] .k-section-name-texts .k-list-items::before {
@@ -23,3 +26,7 @@
   background-color: #000;
   color: #fff;
 }
+
+.k-block-type-quote-citation {
+  font-style: normal;
+}

assets/css/src/_article.scss

@@ -35,11 +35,6 @@ article h3 {
   margin-top: calc(3 * var(--unit--vertical));
   margin-bottom: calc(1 * var(--unit--vertical));
 }
-@media screen and (max-width: 640px) {
-  article h3 {
-    scroll-margin-top: calc(var(--unit--vertical) * 5);
-  }
-}
 
 article li,
 article ol {
@@ -54,6 +49,27 @@ article figure img {
   max-width: 100%;
 }
 
+// Quotes
+// ——————
+blockquote {
+  border-left: 1px solid #fff;
+  margin: calc(var(--unit--vertical) * 2) 0;
+  padding-left: var(--unit--horizontal);
+}
+blockquote footer {
+  margin-top: calc(var(--unit--vertical) / 2);
+  font-size: var(--font-size-m);
+}
+blockquote.big {
+  font-weight: var(--font-weight-light);
+  font-size: var(--font-size-l);
+}
+
+@media screen and (max-width: 640px) {
+  article h3 {
+    scroll-margin-top: calc(var(--unit--vertical) * 5);
+  }
+}
 @media screen and (min-width: 640px) {
   article #main-content {
     max-width: auto;

assets/css/style.css

@@ -896,11 +896,6 @@ article h3 {
   margin-bottom: calc(1 * var(--unit--vertical));
 }
 
-@media screen and (max-width: 640px) {
-  article h3 {
-    scroll-margin-top: calc(var(--unit--vertical) * 5);
-  }
-}
 article li,
 article ol {
   margin-left: var(--unit--horizontal);
@@ -914,6 +909,27 @@ article figure img {
   max-width: 100%;
 }
 
+blockquote {
+  border-left: 1px solid #fff;
+  margin: calc(var(--unit--vertical) * 2) 0;
+  padding-left: var(--unit--horizontal);
+}
+
+blockquote footer {
+  margin-top: calc(var(--unit--vertical) / 2);
+  font-size: var(--font-size-m);
+}
+
+blockquote.big {
+  font-weight: var(--font-weight-light);
+  font-size: var(--font-size-l);
+}
+
+@media screen and (max-width: 640px) {
+  article h3 {
+    scroll-margin-top: calc(var(--unit--vertical) * 5);
+  }
+}
 @media screen and (min-width: 640px) {
   article #main-content {
     max-width: auto;
@@ -1262,15 +1278,6 @@ body.full-width #main-content {
 
 :root {
   --color-primary--transparent: rgba(255, 255, 255, 0.86);
-  /* --color-secondary-rgb: 120, 171, 150;
-  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
-  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
-  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
-
-  --color-tertiary-rgb: 253, 68, 26;
-  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
-  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
-  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
   --color-secondary-rgb: 200, 200, 200;
   --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
   --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);

site/blueprints/blocks/quote.yml

@@ -0,0 +1,33 @@
+name: field.blocks.quote.name
+icon: quote
+wysiwyg: true
+preview: quote
+fields:
+  mode:
+    type: toggles
+    default: long
+    options:
+      - value: long
+        text: Longue
+        icon: false
+      - value: big
+        text: Forte
+        icon: false
+  text:
+    label: field.blocks.quote.text.label
+    placeholder: field.blocks.quote.text.placeholder
+    type: writer
+    inline: true
+    icon: quote
+  citation:
+    label: field.blocks.quote.citation.label
+    placeholder: field.blocks.quote.citation.placeholder
+    type: writer
+    inline: true
+    icon: user
+    marks:
+      - bold
+      - italic
+      - underline
+      - link
+      - cite

site/blueprints/fields/bodyBlocks.yml

@@ -1,16 +1,17 @@
-  label: Corps
-  type: blocks
-  default:
+label: Corps
+type: blocks
+default:
   - type: heading
     content:
       level: h2
-  fieldsets:
-    text:
-      name: Texte
-      icon: text
-      wysiwyg: true
-      fields:
-        text:
-          extends: fields/body
-          label: false
-    image: true
+fieldsets:
+  text:
+    name: Texte
+    icon: text
+    wysiwyg: true
+    fields:
+      text:
+        extends: fields/body
+        label: false
+  image: true
+  quote: true

site/plugins/custom-marks/index.css

@@ -0,0 +1,11 @@
+/* Mark Green - Couleur verte */
+.k-writer span.green {
+  color: #04fea0;
+}
+
+/* Mark Pixel - Typo serif (placeholder pour future typo pixel) */
+.k-writer span.pixel {
+  font-family: "Terminal", serif;
+  font-size: 1.15em;
+  text-transform: uppercase;
+}

site/plugins/custom-marks/index.js

@@ -0,0 +1,22 @@
+panel.plugin("custom/marks", {
+  icons: {
+    "single-quote":
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.58341 17.3211C8.55316 16.2274 8 15 8 13.0103C8 9.51086 10.4565 6.37366 14.0306 4.82318L14.9233 6.20079C11.588 8.00539 10.9362 10.346 10.6756 11.822C11.2126 11.5443 11.9156 11.4466 12.6047 11.5105C14.4091 11.6778 15.8312 13.159 15.8312 15C15.8312 16.933 14.2642 18.5 12.3312 18.5C11.2581 18.5 10.232 18.0095 9.58341 17.3211Z"></path></svg>',
+  },
+  writerMarks: {
+    cite: {
+      button: {
+        icon: "single-quote",
+        label: "Cite",
+      },
+      commands() {
+        return () => this.toggle();
+      },
+      name: "cite",
+      schema: {
+        parseDOM: [{ tag: "cite" }],
+        toDOM: () => ["cite", 0],
+      },
+    },
+  },
+});

site/plugins/custom-marks/index.php

@@ -0,0 +1,7 @@
+<?php
+
+use Kirby\Sane\Html;
+
+Kirby::plugin('custom/marks', []);
+
+Html::$allowedTags['cite'] = true;

site/snippets/blocks/quote.php

@@ -0,0 +1,9 @@
+<?php /** @var \Kirby\Cms\Block $block */ ?>
+<blockquote class="<?= $block->mode()->or('long') ?>">
+  <?= $block->text() ?>
+  <?php if ($block->citation()->isNotEmpty()): ?>
+  <footer>
+    <?= $block->citation() ?>
+  </footer>
+  <?php endif ?>
+</blockquote>