Editing Brighter Shores:Theme (section)

==Components==
===Typography===
Typography is used to create hierarchy and structure that guides users through information, giving them a smooth experience. The Brighter Shores Wiki's primary typefaces are [https://fonts.google.com/specimen/PT+Serif PT Serif] for headings and [https://fonts.google.com/specimen/IBM+Plex+Sans IBM Plex Sans] for body copy.

===Layout===
Elements should have adequate whitespace and margins; at least 20px padding and 15px margins are recommended for elements like the example below.

<div style="display: flex; width: 80%; max-width: 1000px; margin: 2em auto; justify-content: center;">

<div class="tile" style="flex: 1; margin-right: 15px;">
    <p class="byline">Byline</p>
    <h2>The quick brown fox jumps over the lazy dog.</h2>
    <p>Pig boudin chicken fatback shankle jowl kielbasa ball tip. Swine fatback porchetta, spare ribs brisket flank burgdoggen doner short loin. Frankfurter tenderloin pork loin alcatra kielbasa.</p>
</div>

<div class="tile dark" style="flex: 1;">
    <p class="byline">Byline</p>
    <h2>The quick brown fox jumps over the lazy dog.</h2>
    <p>Pig boudin chicken fatback shankle jowl kielbasa ball tip. Swine fatback porchetta, spare ribs brisket flank burgdoggen doner short loin. Frankfurter tenderloin pork loin alcatra kielbasa.</p>
</div>

</div>

===Shadows===
<div style="display: flex; width: 80%; max-width: 1000px; height: 200px; margin: 2em auto; justify-content: center;">
    <div class="tile" style="width: 30%; margin-right: 15px; box-sizing: border-box;"></div>
    <div class="tile dark" style="width: 30%; margin-right: 15px; box-sizing: border-box;"></div>
    <div class="tile-halves" style="width: 30%; box-sizing: border-box;">
        <div class="tile-top"></div>
        <div class="tile-bottom read-more"></div>
    </div>
</div>

[[Category:Brighter Shores Wiki community]]