commit 8298475ed8e3b2ec610a9e79cc883fe3438361f9 · dunkirk.sh/zera

+83

sass/css/suCSS.css

···

       533
       533
        
         font-style: italic;

     

       534
       534
        
       }

     

       535
       535
        
       

     

       536
       536
       +
       /* Callout styles */

     

       537
       537
       +
       .callout {

     

       538
       538
       +
         margin: 1.5rem 0;

     

       539
       539
       +
         padding: 1rem;

     

       540
       540
       +
         border-left: 0.25rem solid;

     

       541
       541
       +
         border-radius: 0.25rem;

     

       542
       542
       +
         background-color: var(--bg-light);

     

       543
       543
       +
       }

     

       544
       544
       +
       

     

       545
       545
       +
       .callout-title {

     

       546
       546
       +
         display: flex;

     

       547
       547
       +
         align-items: center;

     

       548
       548
       +
         gap: 0.5rem;

     

       549
       549
       +
         margin-bottom: 0.5rem;

     

       550
       550
       +
         font-size: 1rem;

     

       551
       551
       +
       }

     

       552
       552
       +
       

     

       553
       553
       +
       .callout-icon {

     

       554
       554
       +
         display: inline-flex;

     

       555
       555
       +
         width: 1.25rem;

     

       556
       556
       +
         height: 1.25rem;

     

       557
       557
       +
         flex-shrink: 0;

     

       558
       558
       +
       }

     

       559
       559
       +
       

     

       560
       560
       +
       .callout-icon svg {

     

       561
       561
       +
         width: 100%;

     

       562
       562
       +
         height: 100%;

     

       563
       563
       +
       }

     

       564
       564
       +
       

     

       565
       565
       +
       .callout-content {

     

       566
       566
       +
         font-style: normal;

     

       567
       567
       +
         color: var(--text);

     

       568
       568
       +
       }

     

       569
       569
       +
       

     

       570
       570
       +
       .callout-content p:first-child {

     

       571
       571
       +
         margin-top: 0;

     

       572
       572
       +
       }

     

       573
       573
       +
       

     

       574
       574
       +
       .callout-content p:last-child {

     

       575
       575
       +
         margin-bottom: 0;

     

       576
       576
       +
       }

     

       577
       577
       +
       

     

       578
       578
       +
       .callout-blue {

     

       579
       579
       +
         border-color: #8aadf4;

     

       580
       580
       +
       }

     

       581
       581
       +
       

     

       582
       582
       +
       .callout-blue .callout-icon {

     

       583
       583
       +
         color: #8aadf4;

     

       584
       584
       +
       }

     

       585
       585
       +
       

     

       586
       586
       +
       .callout-yellow {

     

       587
       587
       +
         border-color: #eed49f;

     

       588
       588
       +
       }

     

       589
       589
       +
       

     

       590
       590
       +
       .callout-yellow .callout-icon {

     

       591
       591
       +
         color: #eed49f;

     

       592
       592
       +
       }

     

       593
       593
       +
       

     

       594
       594
       +
       .callout-red {

     

       595
       595
       +
         border-color: #ed8796;

     

       596
       596
       +
       }

     

       597
       597
       +
       

     

       598
       598
       +
       .callout-red .callout-icon {

     

       599
       599
       +
         color: #ed8796;

     

       600
       600
       +
       }

     

       601
       601
       +
       

     

       602
       602
       +
       .callout-green {

     

       603
       603
       +
         border-color: #a6da95;

     

       604
       604
       +
       }

     

       605
       605
       +
       

     

       606
       606
       +
       .callout-green .callout-icon {

     

       607
       607
       +
         color: #a6da95;

     

       608
       608
       +
       }

     

       609
       609
       +
       

     

       610
       610
       +
       .callout-gray {

     

       611
       611
       +
         border-color: #6e738d;

     

       612
       612
       +
       }

     

       613
       613
       +
       

     

       614
       614
       +
       .callout-gray .callout-icon {

     

       615
       615
       +
         color: #6e738d;

     

       616
       616
       +
       }

     

       617
       617
       +
       

     

       618
       618
       +
       

     

       536
       619
        
       p:has(cite) {

     

       537
       620
        
         text-align: right;

     

       538
       621
        
         font-size: 0.875rem;

+42

templates/shortcodes/callout.html

···

       1
       1
       +
       {%- set type = type | default(value="info") | lower -%}

     

       2
       2
       +
       {%- set title = title | default(value="") -%}

     

       3
       3
       +
       

     

       4
       4
       +
       {%- if type == "info" -%}

     

       5
       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
       6
       +
         {%- set color = "blue" -%}

     

       7
       7
       +
         {%- set default_title = "Info" -%}

     

       8
       8
       +
       {%- elif type == "warning" or type == "warn" -%}

     

       9
       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
       10
       +
         {%- set color = "yellow" -%}

     

       11
       11
       +
         {%- set default_title = "Warning" -%}

     

       12
       12
       +
       {%- elif type == "danger" or type == "error" -%}

     

       13
       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
       14
       +
         {%- set color = "red" -%}

     

       15
       15
       +
         {%- set default_title = "Danger" -%}

     

       16
       16
       +
       {%- elif type == "tip" or type == "hint" -%}

     

       17
       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
       18
       +
         {%- set color = "green" -%}

     

       19
       19
       +
         {%- set default_title = "Tip" -%}

     

       20
       20
       +
       {%- elif type == "note" -%}

     

       21
       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
       22
       +
         {%- set color = "gray" -%}

     

       23
       23
       +
         {%- set default_title = "Note" -%}

     

       24
       24
       +
       {%- else -%}

     

       25
       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
       26
       +
         {%- set color = "blue" -%}

     

       27
       27
       +
         {%- set default_title = "Info" -%}

     

       28
       28
       +
       {%- endif -%}

     

       29
       29
       +
       

     

       30
       30
       +
       {%- if title == "" -%}

     

       31
       31
       +
         {%- set title = default_title -%}

     

       32
       32
       +
       {%- endif -%}

     

       33
       33
       +
       

     

       34
       34
       +
       <div class="callout callout-{{ color }}">

     

       35
       35
       +
         <div class="callout-title">

     

       36
       36
       +
           <span class="callout-icon">{{ icon | safe }}</span>

     

       37
       37
       +
           <strong>{{ title }}</strong>

     

       38
       38
       +
         </div>

     

       39
       39
       +
         <div class="callout-content">

     

       40
       40
       +
           {{ body | markdown | safe }}

     

       41
       41
       +
         </div>

     

       42
       42
       +
       </div>