<div class="prose">
    <section class="prose__section prose__intro">
        <h1 class="h1">Spreadsheet format</h1>
        <p class="intro">To produce 360Giving data in a spreadsheet, it is possible to start with an empty spreadsheet and construct the column titles (and any additional sheets), using the information given below.</p>
    </section>

    <section class="prose__section">
        <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>

        <div class="prose">

            <figure>
                <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" alt="">
                <figcaption>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. <em>Fuga deleniti architecto nisi</em>, rerum aliquid aperiam minima <strong>saepe magnam eum. Odit aliquid similique magnam minima</strong>, corrupti, aliquam laudantium eos asperiores possimus?</figcaption>
            </figure>

        </div>

        <h2>This is a level 2 heading</h2>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h3>Nested list</h3>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>
                <p>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</p>
                <blockquote>
                    <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                </blockquote>
                <ul>
                    <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                    <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
                    <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                </ul>
            </li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h4>This is a heading 4</h4>

        <blockquote>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
        </blockquote>

        <h2>Spreadsheet template</h2>
        <p>For convenience we provide a <a href="#">360Giving Spreadsheet Template</a> that can be used directly, or adapted to your needs.</p>
        <p>The template is a multi-sheet <strong><a href="#">spreadsheet</a></strong>, and each sheet is described below.</p>
        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>

        <article class="media-card media-card--red">
            <div class="media-card__content">
                <header class="media-card__header">
                    <h3 class="media-card__heading">Rachel Rank</h3>
                    <span class="media-card__subtitle">Chief Operating Officer</span>
                </header>
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Harum quod vel voluptas recusandae dignissimos fugit deserunt molestiae, quae, blanditiis autem nesciunt odio consectetur error facilis. Ipsum, maiores cumque quo atque. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni. </p>
            </div>

            <div class="media-card__image-wrapper">
                <div class="media-card__image" style="background-image: url(https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg)"></div>
            </div>
        </article>

        <ul>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ul>

        <h5>This is a heading 5</h5>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
        <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>

        <p>Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus.</p>

        <div class="box box--teal">
            <h3 class="box__heading">Developers</h3>
            <p>For a JSON feed of published datasets visit <a href="http://standard.threesixtygiving.org/en/latest/getdata/" target="_blank">standard.threesixtygiving.org</a></p>
        </div>

        <h3>Spreadsheet</h3>
        <p>Data placed in a spreadsheet can make use of easy to read, user-friendly column titles, and is ideal for recording one grant per row. This is the most common format that publishers choose. More complex representations of data can also be reported if required.</p>

        <div class="table table--zebra">
            <table>

                <thead>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Type</th>
                    <th>Required</th>
                </thead>

                <tbody>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Identifier</td>
                        <td data-header="Description">The unique identifier for this grant. Made up of your 360Giving prefix, and an identifier from your records. See the 360Giving Grant identifier guidance for details.</td>
                        <td data-header="Type"><code>string</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Title</td>
                        <td data-header="Description">A title for this grant activity. This should be under 140 characters long.</td>
                        <td data-header="Type"><code>string</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Description</td>
                        <td data-header="Description">A short description of this grant activity.</td>
                        <td data-header="Type"><code>string</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Currency</td>
                        <td data-header="Description">The currency used in amounts. Use the three-letter <a href='#'>currency code from ISO 4217</a> eg: Use GBP for Pounds Sterling.</td>
                        <td data-header="Type"><code>string</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Amount Applied For</td>
                        <td data-header="Description">Total amount applied for in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the application transactions for this grant.</td>
                        <td data-header="Type"><code>number</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--false">close</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Amount Awarded</td>
                        <td data-header="Description">Total amount awarded in numbers (do not include commas or currency symbols such as £). If you have provided detailed transaction information on a separate table, this should equal the sum of all the award transactions for this grant.</td>
                        <td data-header="Type"><code>number</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Amount Disbursed</td>
                        <td data-header="Description">Total amount disbursed (paid) to this grantee when this record was last updated (in numbers: do not include commas or currency symbols such as £)). If you have provided detailed transaction information on a separate table, this should equal the sum of all the disbursement transactions for this grant.</td>
                        <td data-header="Type"><code>number</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--false">close</i>

                        </td>
                    </tr>

                    <tr>
                        <td class="table__lead-cell" data-header="Title">Award Date</td>
                        <td data-header="Description">When was the decision to award this grant made. The date should be written as YYYY-MM-DD, or in full date-time format.</td>
                        <td data-header="Type"><code>string</code></td>
                        <td data-header="Required" class="table__checks">

                            <i class="material-icons table--true">check</i>

                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

        <h4>json</h4>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h1>This is a heading 1</h1>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h2>This is a heading 2</h2>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h3>This is a heading 3</h3>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h4>This is a heading 4</h4>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h5>This is a heading 5</h5>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h6>This is a heading 6</h6>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </section>
</div>
<div class="prose">
    <section class="prose__section prose__intro">
        <h1 class="h1">Spreadsheet format</h1>
        <p class="intro">To produce 360Giving data in a spreadsheet, it is possible to start with an empty spreadsheet and construct the column titles (and any additional sheets), using the information given below.</p>
    </section>

    <section class="prose__section">
        <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>

        {% render '@prose-figure' %}

        <h2>This is a level 2 heading</h2>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h3>Nested list</h3>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>
                <p>The 360Giving Spreadsheet <a href="#">template consists</a> of a ‘grants’ sheet which contains the most common data fields.</p>
                <blockquote>
                    <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
                </blockquote>
                <ul>
                    <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
                    <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
                    <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
                </ul>
            </li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h4>This is a heading 4</h4>

        <blockquote>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
            <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
        </blockquote>

        <h2>Spreadsheet template</h2>
        <p>For convenience we provide a <a href="#">360Giving Spreadsheet Template</a> that can be used directly, or adapted to your needs.</p>
        <p>The template is a multi-sheet <strong><a href="#">spreadsheet</a></strong>, and each sheet is described below.</p>
        <p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>

        {% render '@media-card' %}        

        <ul>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ul>

        <h5>This is a heading 5</h5>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
        <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Fuga nesciunt culpa pariatur assumenda corrupti consectetur quibusdam reprehenderit commodi dolore natus praesentium repudiandae possimus sunt, eos, beatae quod maiores, incidunt soluta!</p>
        
        <p>Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt maxime sunt ipsa repellat dolorem, aperiam quas nemo natus tempore enim id totam blanditiis error rerum debitis vel laboriosam doloribus.</p>


        {# {% render '@code-block' %} #}

        {% render '@box--teal' %}

        <h3>Spreadsheet</h3>
        <p>Data placed in a spreadsheet can make use of easy to read, user-friendly column titles, and is ideal for recording one grant per row. This is the most common format that publishers choose. More complex representations of data can also be reported if required.</p>

        {% render '@table' %}

        <h4>json</h4>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <ol>
            <li>Where data producers have more complex information, for example where a grant has many beneficiary locations, we call this a One to many relationships. Information about how to create data with One to many relationships is described below.</li>
            <li>The 360Giving Spreadsheet template consists of a ‘grants’ sheet which contains the most common data fields.</li>
            <li>The Additional fields section provides details of all other possible fields that can be reported. (These are derived from the 360Giving JSON Schemas ).</li>
        </ol>

        <h1>This is a heading 1</h1>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h2>This is a heading 2</h2>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
 
        <h3>This is a heading 3</h3>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h4>This is a heading 4</h4>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h5>This is a heading 5</h5>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>

        <h6>This is a heading 6</h6>
        <p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
    </section>
</div>
/* No context defined. */
  • Content:
    .prose__section,
    .prose__section .section { 
      > * + * { margin-top: 1rem; }
      .grid > * + * { margin-top: 0; } // Patches a conflict when a .grid is inserted inside a .prose__section
    
      .media-card {
        margin-top: 2.2rem;
        margin-bottom: 2.2rem;
    
        &__content {
          padding-top: 1.8rem;
          padding-bottom: 1.8rem;
        }
        h3 { margin: 0; }
      }
    }
    
    .prose,
    .prose table,
    .p {
      @include text;
    }
    
    .prose a {
      font-weight: inherit;
      color: hsla(var(--teal-dark-hsl), 1);
    
      &:hover {
        background-color: hsl(var(--teal-hsl), 0.1);
      }
    
      &.button {
        text-decoration: none;
        color: var(--text-color);
      }
    
      @media print {
        font-weight: bolder;
        text-decoration: none;
        
        &[href^=http]:after {
            content:" (" attr(href) ")";
        }
      }
    }
    
    .prose__author {
      font-style: italic;
      padding-bottom: 32px;
      a { color: hsla(var(--teal-dark-hsl), 1);}
    }
    
    .prose h1, 
    .h1 {
      @include h1;
      line-height: 1.3;
    }
    
    .prose .intro,
    // .prose > p:not[class="prose__author"]:first-of-type, // adding specificity 0020 to be higher than the 0011 of .prose p {...}(line 5)
    .intro,
    .prose__intro p {
      @include big-lead;
    }
    
    .prose h2,
    .h2 {
      @include h2;
    }
    
    .prose h3,
    .h3 {
      @include h3;
    }
    
    .prose h4,
    .h4 {
      @include h4;
    }
    
    .prose h5,
    .h5 {
      @include h5;
    }
    
    .prose h6,
    .h6 {
      @include h6;
    }
    
    .prose {
      ul, ol {
        padding-bottom: 1.4rem;
        padding-top: 1.4rem;
        padding-left: 0;
    
        li + li { margin-top: 1rem;}
      }
      
      ol {
        > li {
          margin-left: 24px;
          &::marker {
            color: hsla(var(--teal-dark-hsl), 1);
          }
        }
      }
      
      ul {
        > li {
          margin-left: 24px;
          &::marker {
            color: hsla(var(--teal-hsl), 1);
            font-size: 1.3rem;
          }
        }
      }
      
      max-width: 800px;
      margin: 0 auto;
    
      &--left {
        margin: 0 2rem;
    
        & ol {
          margin-left: 42px;
        }
      }
    
      h1 {
        margin-top: 3rem;
        margin-bottom: 2rem;
      }
    
      h2, h3, h4, h5, h6, .intro {
        margin-top: 3rem;
        margin-bottom: 1.4rem;
      }
    
      &__intro, 
      > p:first-of-type { margin-bottom: 2rem; }
      &__section + &__section { padding-top: 1.4rem; }
    
      .box {
        margin-bottom: 1.4rem;
        margin-top: 1.4rem;
      }
    
      @media print {
        max-width: 100%;
        padding: 0px;
        margin: 0px;
      }
    }
    
    .prose blockquote,
    .prose blockquote p {
      line-height: 1.6;
      color: hsla(var(--orange-dark-hsl), 1);
      position: relative;
      z-index: 1;
    }
    
    .prose blockquote {
      padding-left: 4rem;
    
      &:before {
        content: "format_quote";
        transform: scaleX(-0.9);
        font-size: 10rem;
        @extend .u-material-icons; 
        position: absolute;
        left: -65px;
        top: -50px;
        color: hsla(var(--orange-hsl), .15);
        z-index: -1;
      }
    
      @media print {
        &:before {
          content: "";
        }
    
        margin-left: 5mm;
        padding-left: 5mm;
        font-style: italic;
        border-left: 3px solid hsla(var(--orange-hsl), .2);
      }
    }
    
    .prose blockquote {
      p + p { padding-top: .8rem; }
    }
    
    .prose {
    
      &__h1-long {
        margin-bottom: 1.5rem;
        margin-top: 0;
        font-size: 2.2rem;
        line-height: 1.5;
      }
    }
    
    .prose--wp {
      /* = WordPress Core -------------------------------------------------------------- */
      .alignnone {
        margin: 5px 20px 20px 0;
      }
    
      .aligncenter,
      div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
      }
    
      .alignright {
        float: right;
        margin: 5px 0 20px 20px;
      }
    
      .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
      }
    
      a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
      }
    
      a img.alignnone {
        margin: 5px 20px 20px 0;
      }
    
      a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
      }
    
      a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    
      .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Image does not overflow the content area */
        padding: 5px 3px 10px;
        text-align: center;
      }
    
      .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
      }
    
      .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
      }
    
      .wp-caption.alignright {
        margin: 5px 0 20px 20px;
      }
    
      .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
      }
    
      .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
      }
    
      /* Text meant only for screen readers. */
      .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
      }
    
      .screen-reader-text:focus {
        background-color: #eee;
        clip: auto !important;
        clip-path: none;
        color: #444;
        display: block;
        font-size: 1em;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
      /* Above WP toolbar. */
      }
    
      img[class*="wp-image-"] {
        height: auto;
        width: auto;
      }
    }
    
    
  • URL: /components/raw/prose/prose.scss
  • Filesystem Path: src/components/04-modules/prose/prose.scss
  • Size: 5.2 KB

No notes defined.