Editor changes for multiple quotes

ghost/admin/app/styles/components/koenig.css

@@ -43,7 +43,8 @@
 .koenig-editor__editor h4,
 .koenig-editor__editor h5,
 .koenig-editor__editor h6,
-.koenig-editor__editor blockquote {
+.koenig-editor__editor blockquote,
+.koenig-editor__editor aside {
     margin: 1.6rem 0 0;
     min-width: 100%;
     max-width: 100%;
@@ -112,6 +113,13 @@
 .koenig-editor__editor blockquote + h5,
 .koenig-editor__editor blockquote + h6,
 
+.koenig-editor__editor aside + h1,
+.koenig-editor__editor aside + h2,
+.koenig-editor__editor aside + h3,
+.koenig-editor__editor aside + h4,
+.koenig-editor__editor aside + h5,
+.koenig-editor__editor aside + h6,
+
 .koenig-editor__editor ul + h1,
 .koenig-editor__editor ul + h2,
 .koenig-editor__editor ul + h3,
@@ -271,6 +279,7 @@
 
 .koenig-editor__editor p,
 .koenig-editor__editor blockquote,
+.koenig-editor__editor aside,
 .koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
 .koenig-editor__editor ol
  {
@@ -297,6 +306,7 @@
 
 .koenig-editor__editor p + p,
 .koenig-editor__editor blockquote + p,
+.koenig-editor__editor aside + p,
 .koenig-editor__editor ul + p,
 .koenig-editor__editor ol + p
  {
@@ -315,6 +325,7 @@
 @media (max-width: 500px) {
     .koenig-editor__editor p,
     .koenig-editor__editor blockquote,
+    .koenig-editor__editor aside,
     .koenig-editor__editor ul:not(.kg-action-bar):not(.kg-link-toolbar),
     .koenig-editor__editor ol
     {
@@ -364,7 +375,9 @@
 .koenig-editor__editor ol + ul:not(.kg-action-bar):not(.kg-link-toolbar),
 .koenig-editor__editor ol + ol,
 .koenig-editor__editor blockquote + ul:not(.kg-action-bar):not(.kg-link-toolbar),
-.koenig-editor__editor blockquote + ol {
+.koenig-editor__editor blockquote + ol,
+.koenig-editor__editor aside + ul:not(.kg-action-bar):not(.kg-link-toolbar),
+.koenig-editor__editor aside + ol {
     margin: 3.0rem 0 0;
 }
 
@@ -420,6 +433,7 @@
 
 .koenig-editor__editor > p + div,
 .koenig-editor__editor > blockquote + div,
+.koenig-editor__editor > aside + div,
 .koenig-editor__editor > ul + div,
 .koenig-editor__editor > ol + div {
     margin: 3.2rem 0 0;
@@ -493,6 +507,58 @@
 }
 
 
+/* Aside, Blockquote Alternative
+/* -------------------------------------------------------------------- */
+
+.koenig-editor__editor aside p {
+    margin: 0;
+}
+
+.koenig-editor__editor aside {
+    margin: 3.2rem 0 0;
+    padding: 0.5rem 12rem 1rem;
+    font-style: italic;
+    text-align: center;
+    font-size: 2.4rem;
+    color: var(--midgrey-l1);
+}
+
+.koenig-editor__editor h1 + aside,
+.koenig-editor__editor h2 + aside {
+    margin: .8rem 0 0;
+}
+
+.koenig-editor__editor h3 + aside,
+.koenig-editor__editor h4 + aside,
+.koenig-editor__editor h5 + aside,
+.koenig-editor__editor h6 + aside {
+    margin: .4rem 0 0;
+}
+
+.koenig-editor__editor p + aside,
+.koenig-editor__editor blockquote + aside {
+    margin: 3.2rem 0 0;
+}
+
+@media (max-width: 800px) {
+    .koenig-editor__editor aside {
+        padding-left: 6rem;
+        padding-right: 6rem;
+    }
+}
+
+@media (max-width: 500px) {
+    .koenig-editor__editor aside {
+        font-size: 2.2rem;
+    }
+}
+
+/* Mobiledoc cards can be selected by their wrapper div element */
+.koenig-editor__editor div + aside {
+    margin: 2.8rem 0 0;
+}
+
+
 /* Code
 /* ------------------------------------------------------------------ */
 .koenig-card-html--editor .CodeMirror,

ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.hbs

@@ -54,7 +54,7 @@
                     {{action "toggleQuoteSection"}}
                 >
                     {{#if this.activeSectionTagNames.isBlockquote}}
-                        {{svg-jar "koenig/kg-quote" class="fill-green w4 h4"}}
+                        {{svg-jar "koenig/kg-quote-1" class="fill-green w4 h4"}}
                     {{else if this.activeSectionTagNames.isAside}}
                         {{svg-jar "koenig/kg-quote-2" class="fill-green w4 h4"}}
                     {{else}}

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-quote-1.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.00011H6C6.26522 8.00011 6.51957 8.10546 6.70711 8.293C6.89464 8.48054 7 8.73489 7 9.00011V13.0001C7 13.2653 6.89464 13.5197 6.70711 13.7072C6.51957 13.8947 6.26522 14.0001 6 14.0001H3C2.73478 14.0001 2.48043 13.8947 2.29289 13.7072C2.10536 13.5197 2 13.2653 2 13.0001V5.08211C2 3.90611 2.906 2.96211 4.538 2.11311C4.65448 2.05244 4.78177 2.0153 4.91261 2.00383C5.04344 1.99235 5.17525 2.00675 5.30052 2.04622C5.42579 2.08568 5.54205 2.14944 5.64268 2.23383C5.74331 2.31823 5.82633 2.42162 5.887 2.53811C5.94767 2.65459 5.9848 2.78188 5.99628 2.91271C6.00776 3.04355 5.99335 3.17536 5.95389 3.30063C5.91442 3.42589 5.85067 3.54216 5.76627 3.64279C5.68187 3.74342 5.57848 3.82644 5.462 3.88711C4.884 4.18711 4.469 4.47611 4.222 4.73411C4.054 4.90811 4 5.02011 4 5.08211V8.00011ZM13 8.00011C13.2652 8.00011 13.5196 8.10546 13.7071 8.293C13.8946 8.48054 14 8.73489 14 9.00011V9.5366C13.6143 9.60243 13.2536 9.7523 12.937 9.9445L12.9298 9.9489L12.4315 10.2608C11.9856 10.5357 11.5 11.0479 11.5 11.8252C11.5 12.5688 11.9611 13.2015 12.6323 13.4311V14.0001H10C9.73478 14.0001 9.48043 13.8947 9.29289 13.7072C9.10536 13.5197 9 13.2653 9 13.0001V5.08211C9 3.90611 9.906 2.96211 11.538 2.11311C11.6545 2.05244 11.7818 2.0153 11.9126 2.00383C12.0434 1.99235 12.1753 2.00675 12.3005 2.04622C12.4258 2.08568 12.5421 2.14944 12.6427 2.23383C12.7433 2.31823 12.8263 2.42162 12.887 2.53811C12.9477 2.65459 12.9848 2.78188 12.9963 2.91271C13.0078 3.04355 12.9934 3.17536 12.9539 3.30063C12.9144 3.42589 12.8507 3.54216 12.7663 3.64279C12.6819 3.74342 12.5785 3.82644 12.462 3.88711C11.884 4.18711 11.469 4.47611 11.222 4.73411C11.054 4.90811 11 5.02011 11 5.08211V8.00011H13ZM14.5428 15.4344C14.1182 15.4344 13.8823 15.1783 13.8823 14.7267V11.96H13.8722L13.6397 12.1082C13.4274 12.2329 13.3229 12.2734 13.1948 12.2734C12.9354 12.2734 12.75 12.0846 12.75 11.8252C12.75 11.6297 12.8646 11.4612 13.0904 11.323L13.5858 11.013C13.8688 10.8411 14.1587 10.7501 14.4249 10.7501C14.8933 10.7501 15.2 11.0635 15.2 11.5488V14.7267C15.2 15.1817 14.9641 15.4344 14.5428 15.4344Z" fill="white"/>
+</svg>

ghost/admin/lib/koenig-editor/public/icons/koenig/kg-quote-2.svg

@@ -1 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h2c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1H3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8zm9 0c.552 0 1 .448 1 1v4c0 .552-.448 1-1 1h-3c-.552 0-1-.448-1-1V5.082c0-1.176.906-2.12 2.538-2.969.49-.255 1.094-.065 1.349.425.255.49.065 1.094-.425 1.349-.578.3-.993.589-1.24.847-.168.174-.222.286-.222.348V8h2z" fill="#FFF" fill-rule="nonzero"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.00015H6C6.26522 8.00015 6.51957 8.1055 6.70711 8.29304C6.89464 8.48058 7 8.73493 7 9.00015V13.0001C7 13.2654 6.89464 13.5197 6.70711 13.7073C6.51957 13.8948 6.26522 14.0001 6 14.0001H3C2.73478 14.0001 2.48043 13.8948 2.29289 13.7073C2.10536 13.5197 2 13.2654 2 13.0001V5.08215C2 3.90615 2.906 2.96215 4.538 2.11315C4.65448 2.05248 4.78177 2.01534 4.91261 2.00387C5.04344 1.99239 5.17525 2.00679 5.30052 2.04626C5.42579 2.08572 5.54205 2.14948 5.64268 2.23387C5.74331 2.31827 5.82633 2.42166 5.887 2.53815C5.94767 2.65463 5.9848 2.78192 5.99628 2.91275C6.00776 3.04359 5.99335 3.1754 5.95389 3.30067C5.91442 3.42593 5.85067 3.5422 5.76627 3.64283C5.68187 3.74346 5.57848 3.82648 5.462 3.88715C4.884 4.18715 4.469 4.47615 4.222 4.73415C4.054 4.90815 4 5.02015 4 5.08215V8.00015ZM13 8.00015C13.2652 8.00015 13.5196 8.1055 13.7071 8.29304C13.8946 8.48058 14 8.73493 14 9.00015V9.51812C13.4378 9.57694 12.9087 9.77735 12.4803 10.0918C11.9785 10.4601 11.5 11.0848 11.5 11.9043C11.5 12.3632 11.6772 12.8135 12.0264 13.1451C12.0604 13.1774 12.0955 13.208 12.1312 13.2369C11.9419 13.4409 11.7509 13.6922 11.6323 14.0001H10C9.73478 14.0001 9.48043 13.8948 9.29289 13.7073C9.10536 13.5197 9 13.2654 9 13.0001V5.08215C9 3.90615 9.906 2.96215 11.538 2.11315C11.6545 2.05248 11.7818 2.01534 11.9126 2.00387C12.0434 1.99239 12.1753 2.00679 12.3005 2.04626C12.4258 2.08572 12.5421 2.14948 12.6427 2.23387C12.7433 2.31827 12.8263 2.42166 12.887 2.53815C12.9477 2.65463 12.9848 2.78192 12.9963 2.91275C13.0078 3.04359 12.9934 3.1754 12.9539 3.30067C12.9144 3.42593 12.8507 3.5422 12.7663 3.64283C12.6819 3.74346 12.5785 3.82648 12.462 3.88715C11.884 4.18715 11.469 4.47615 11.222 4.73415C11.054 4.90815 11 5.02015 11 5.08215V8.00015H13ZM13.2256 15.1428C12.8903 15.1428 12.6626 14.9404 12.6626 14.6432C12.6626 14.4218 12.7891 14.2257 13.1591 13.8779L14.1616 12.907C14.4937 12.5876 14.6391 12.3789 14.6391 12.1607C14.6391 11.9045 14.4526 11.7337 14.1806 11.7337C13.9687 11.7337 13.8169 11.8255 13.6556 12.0532C13.4785 12.2872 13.3457 12.3694 13.1402 12.3694C12.8524 12.3694 12.65 12.1765 12.65 11.9045C12.65 11.2973 13.371 10.7502 14.247 10.7502C15.1546 10.7502 15.825 11.2973 15.825 12.0373C15.825 12.4959 15.5879 12.926 15.0787 13.3908L14.2881 14.1245V14.172H15.4203C15.765 14.172 15.98 14.3585 15.98 14.6621C15.98 14.9626 15.7713 15.1428 15.4203 15.1428H13.2256Z" fill="white"/>
+</svg>