the home site for me: also iteration 3 or 4 of my site
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add callouts

+125
+83
sass/css/suCSS.css
··· 533 533 font-style: italic; 534 534 } 535 535 536 + /* Callout styles */ 537 + .callout { 538 + margin: 1.5rem 0; 539 + padding: 1rem; 540 + border-left: 0.25rem solid; 541 + border-radius: 0.25rem; 542 + background-color: var(--bg-light); 543 + } 544 + 545 + .callout-title { 546 + display: flex; 547 + align-items: center; 548 + gap: 0.5rem; 549 + margin-bottom: 0.5rem; 550 + font-size: 1rem; 551 + } 552 + 553 + .callout-icon { 554 + display: inline-flex; 555 + width: 1.25rem; 556 + height: 1.25rem; 557 + flex-shrink: 0; 558 + } 559 + 560 + .callout-icon svg { 561 + width: 100%; 562 + height: 100%; 563 + } 564 + 565 + .callout-content { 566 + font-style: normal; 567 + color: var(--text); 568 + } 569 + 570 + .callout-content p:first-child { 571 + margin-top: 0; 572 + } 573 + 574 + .callout-content p:last-child { 575 + margin-bottom: 0; 576 + } 577 + 578 + .callout-blue { 579 + border-color: #8aadf4; 580 + } 581 + 582 + .callout-blue .callout-icon { 583 + color: #8aadf4; 584 + } 585 + 586 + .callout-yellow { 587 + border-color: #eed49f; 588 + } 589 + 590 + .callout-yellow .callout-icon { 591 + color: #eed49f; 592 + } 593 + 594 + .callout-red { 595 + border-color: #ed8796; 596 + } 597 + 598 + .callout-red .callout-icon { 599 + color: #ed8796; 600 + } 601 + 602 + .callout-green { 603 + border-color: #a6da95; 604 + } 605 + 606 + .callout-green .callout-icon { 607 + color: #a6da95; 608 + } 609 + 610 + .callout-gray { 611 + border-color: #6e738d; 612 + } 613 + 614 + .callout-gray .callout-icon { 615 + color: #6e738d; 616 + } 617 + 618 + 536 619 p:has(cite) { 537 620 text-align: right; 538 621 font-size: 0.875rem;
+42
templates/shortcodes/callout.html
··· 1 + {%- set type = type | default(value="info") | lower -%} 2 + {%- set title = title | default(value="") -%} 3 + 4 + {%- if type == "info" -%} 5 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' -%} 6 + {%- set color = "blue" -%} 7 + {%- set default_title = "Info" -%} 8 + {%- elif type == "warning" or type == "warn" -%} 9 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>' -%} 10 + {%- set color = "yellow" -%} 11 + {%- set default_title = "Warning" -%} 12 + {%- elif type == "danger" or type == "error" -%} 13 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' -%} 14 + {%- set color = "red" -%} 15 + {%- set default_title = "Danger" -%} 16 + {%- elif type == "tip" or type == "hint" -%} 17 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>' -%} 18 + {%- set color = "green" -%} 19 + {%- set default_title = "Tip" -%} 20 + {%- elif type == "note" -%} 21 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>' -%} 22 + {%- set color = "gray" -%} 23 + {%- set default_title = "Note" -%} 24 + {%- else -%} 25 + {%- set icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' -%} 26 + {%- set color = "blue" -%} 27 + {%- set default_title = "Info" -%} 28 + {%- endif -%} 29 + 30 + {%- if title == "" -%} 31 + {%- set title = default_title -%} 32 + {%- endif -%} 33 + 34 + <div class="callout callout-{{ color }}"> 35 + <div class="callout-title"> 36 + <span class="callout-icon">{{ icon | safe }}</span> 37 + <strong>{{ title }}</strong> 38 + </div> 39 + <div class="callout-content"> 40 + {{ body | markdown | safe }} 41 + </div> 42 + </div>