Brighter Shores:Theme: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary |
No edit summary |
||
| (15 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{shortcut|BS:THEME|BS:SKIN}} |
|||
This page contains information about the '''look of the Brighter Shores Wiki'''. |
This page contains information about the '''look of the Brighter Shores Wiki'''. |
||
==Colours== |
==Colours== |
||
===Brand=== |
|||
<div class="color-container"> |
<div class="color-container"> |
||
| Line 14: | Line 16: | ||
<p class="hexcode">#e7e5e4</p> |
<p class="hexcode">#e7e5e4</p> |
||
</div> |
</div> |
||
<div class="color-group" style="background: # |
<div class="color-group" style="background: #cbb7ae;"> |
||
<p class="variable">--body-mid</p> |
<p class="variable">--body-mid</p> |
||
<p class="hexcode"># |
<p class="hexcode">#cbb7ae</p> |
||
</div> |
</div> |
||
<div class="color-group" style="background: # |
<div class="color-group dark" style="background: #9f847a;"> |
||
<p class="variable">--body-border</p> |
|||
<p class="hexcode">#bdb2ae</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #6d5b54;"> |
|||
<p class="variable">--body-dark</p> |
<p class="variable">--body-dark</p> |
||
<p class="hexcode"># |
<p class="hexcode">#9f847a</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: # |
<div class="color-group dark" style="background: #755c52;"> |
||
<p class="variable">--body-darker</p> |
<p class="variable">--body-darker</p> |
||
<p class="hexcode"># |
<p class="hexcode">#755c52</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: #173a4d;"> |
<div class="color-group dark" style="background: #173a4d;"> |
||
| Line 53: | Line 51: | ||
<p class="variable">--link-color</p> |
<p class="variable">--link-color</p> |
||
<p class="hexcode">#8b694f</p> |
<p class="hexcode">#8b694f</p> |
||
</div> |
|||
<div class="color-group dark" style="background: #6d5248;"> |
|||
<p class="variable">--table-header-link</p> |
|||
<p class="hexcode">#6d5248</p> |
|||
</div> |
</div> |
||
<div class="color-group dark" style="background: #e2bd8a;"> |
<div class="color-group dark" style="background: #e2bd8a;"> |
||
| Line 58: | Line 60: | ||
<p class="hexcode">#e2bd8a</p> |
<p class="hexcode">#e2bd8a</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: # |
<div class="color-group dark" style="background: #d5ab9c;"> |
||
<p class="variable">@infobox-link</p> |
<p class="variable">@infobox-link</p> |
||
<p class="hexcode"># |
<p class="hexcode">#d5ab9c</p> |
||
</div> |
</div> |
||
</div> |
</div> |
||
| Line 70: | Line 72: | ||
<p class="hexcode">#FFE233</p> |
<p class="hexcode">#FFE233</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: # |
<div class="color-group dark" style="background: #3f3b2a;"> |
||
<p class="variable">@hopeport-dark</p> |
<p class="variable">@hopeport-dark</p> |
||
<p class="hexcode"># |
<p class="hexcode">#3b382f</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: #68ABF1;"> |
<div class="color-group dark" style="background: #68ABF1;"> |
||
| Line 86: | Line 88: | ||
<p class="hexcode">#72D757</p> |
<p class="hexcode">#72D757</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: # |
<div class="color-group dark" style="background: #2e3930;"> |
||
<p class="variable">@hopeforest-dark</p> |
<p class="variable">@hopeforest-dark</p> |
||
<p class="hexcode"># |
<p class="hexcode">#2e3930</p> |
||
</div> |
</div> |
||
<div class="color-group dark" style="background: #979797;"> |
<div class="color-group dark" style="background: #979797;"> |
||
| Line 97: | Line 99: | ||
<p class="variable">@crenopolis-dark</p> |
<p class="variable">@crenopolis-dark</p> |
||
<p class="hexcode">#3f3f3f</p> |
<p class="hexcode">#3f3f3f</p> |
||
</div> |
|||
<div class="color-group dark" style="background: #C57F41;"> |
|||
<p class="variable">@stonemaw</p> |
|||
<p class="hexcode">#C57F41</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #3b3430;"> |
|||
<p class="variable">@stonemaw-dark</p> |
|||
<p class="hexcode">#3b3430</p> |
|||
</div> |
</div> |
||
</div> |
</div> |
||
</div> |
|||
===Status=== |
|||
<div class="color-container"> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #801c13;"> |
|||
<p class="variable">@mocaccino</p> |
|||
<p class="hexcode">#801c13</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #9f261e;"> |
|||
<p class="variable">@old-brick</p> |
|||
<p class="hexcode">#9f261e</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #ee4231;"> |
|||
<p class="variable">@flamingo</p> |
|||
<p class="hexcode">#ee4231</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fbc0ba;"> |
|||
<p class="variable">@apricot-peach</p> |
|||
<p class="hexcode">#fbc0ba</p> |
|||
</div> |
|||
<div class="color-group" style="background: #feecea;"> |
|||
<p class="variable">@bridesmaid</p> |
|||
<p class="hexcode">#feecea</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #7a3f08;"> |
|||
<p class="variable">@antique-bronze</p> |
|||
<p class="hexcode">#7a3f08</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #b55e0c;"> |
|||
<p class="variable">@korma</p> |
|||
<p class="hexcode">#b55e0c</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #f7861b;"> |
|||
<p class="variable">@ecstasy</p> |
|||
<p class="hexcode">#f7861b</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fbcfa6;"> |
|||
<p class="variable">@corvette</p> |
|||
<p class="hexcode">#fbcfa6</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fef0e4;"> |
|||
<p class="variable">@lace</p> |
|||
<p class="hexcode">#fef0e4</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #786300;"> |
|||
<p class="variable">@cinnamon</p> |
|||
<p class="hexcode">#786300</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #a48900;"> |
|||
<p class="variable">@olive</p> |
|||
<p class="hexcode">#a48900</p> |
|||
</div> |
|||
<div class="color-group" style="background: #f9d000;"> |
|||
<p class="variable">@supernova</p> |
|||
<p class="hexcode">#f9d000</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fcea94;"> |
|||
<p class="variable">@golden</p> |
|||
<p class="hexcode">#fcea94</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fef9de;"> |
|||
<p class="variable">@half-dutch</p> |
|||
<p class="hexcode">#fef9de</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #2e5e05;"> |
|||
<p class="variable">@san-felix</p> |
|||
<p class="hexcode">#2e5e05</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #3c780a;"> |
|||
<p class="variable">@la-palma</p> |
|||
<p class="hexcode">#3c780a</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #6bc71f;"> |
|||
<p class="variable">@lima</p> |
|||
<p class="hexcode">#6bc71f</p> |
|||
</div> |
|||
<div class="color-group" style="background: #c3e8a3;"> |
|||
<p class="variable">@caper</p> |
|||
<p class="hexcode">#c3e8a3</p> |
|||
</div> |
|||
<div class="color-group" style="background: #ecf8e3;"> |
|||
<p class="variable">@frost</p> |
|||
<p class="hexcode">#ecf8e3</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="color-container"> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #03436b;"> |
|||
<p class="variable">@regal-blue</p> |
|||
<p class="hexcode">#03436b</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #0b5884;"> |
|||
<p class="variable">@venice-blue</p> |
|||
<p class="hexcode">#0b5884</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #3ea6e6;"> |
|||
<p class="variable">@curious-blue</p> |
|||
<p class="hexcode">#3ea6e6</p> |
|||
</div> |
|||
<div class="color-group" style="background: #aad9f5;"> |
|||
<p class="variable">@jordy-blue</p> |
|||
<p class="hexcode">#aad9f5</p> |
|||
</div> |
|||
<div class="color-group" style="background: #e5f3fc;"> |
|||
<p class="variable">@tropical-blue</p> |
|||
<p class="hexcode">#e5f3fc</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #3d276b;"> |
|||
<p class="variable">@honey-flower</p> |
|||
<p class="hexcode">#3d276b</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #4f348b;"> |
|||
<p class="variable">@seance</p> |
|||
<p class="hexcode">#4f348b</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #855cd8;"> |
|||
<p class="variable">@medium-purple</p> |
|||
<p class="hexcode">#855cd8</p> |
|||
</div> |
|||
<div class="color-group" style="background: #cebbf7;"> |
|||
<p class="variable">@perfume</p> |
|||
<p class="hexcode">#cfc0f0</p> |
|||
</div> |
|||
<div class="color-group" style="background: #f0ecfa;"> |
|||
<p class="variable">@heliotrope</p> |
|||
<p class="hexcode">#f0ecfa</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #6d3662;"> |
|||
<p class="variable">@cosmic</p> |
|||
<p class="hexcode">#6d3662</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #984c89;"> |
|||
<p class="variable">@cannon-pink</p> |
|||
<p class="hexcode">#984c89</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #e874cf;"> |
|||
<p class="variable">@lavender</p> |
|||
<p class="hexcode">#e874cf</p> |
|||
</div> |
|||
<div class="color-group" style="background: #f5c8ec;"> |
|||
<p class="variable">@cherub</p> |
|||
<p class="hexcode">#f5c8ec</p> |
|||
</div> |
|||
<div class="color-group" style="background: #fceef9;"> |
|||
<p class="variable">@french-lilac</p> |
|||
<p class="hexcode">#fceef9</p> |
|||
</div> |
|||
</div> |
|||
<div class="color-column"> |
|||
<div class="color-group dark" style="background: #444e5a;"> |
|||
<p class="variable">@river-bed</p> |
|||
<p class="hexcode">#444e5a</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #5d6773;"> |
|||
<p class="variable">@shuttle-gray</p> |
|||
<p class="hexcode">#5d6773</p> |
|||
</div> |
|||
<div class="color-group dark" style="background: #949eaa;"> |
|||
<p class="variable">@gray-chateau</p> |
|||
<p class="hexcode">#949eaa</p> |
|||
</div> |
|||
<div class="color-group" style="background: #e4eaee;"> |
|||
<p class="variable">@mystic</p> |
|||
<p class="hexcode">#e4eaee</p> |
|||
</div> |
|||
<div class="color-group" style="background: #f9fafa;"> |
|||
<p class="variable">@black-haze</p> |
|||
<p class="hexcode">#f9fafa</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
===Recommended pairings=== |
|||
Having good color contrast benefits all users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors ([https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast MDN]). To achieve at least a passing '''WCAG AA contrast ratio''' (4.5), these are the recommended color pairings for backgrounds against the default text colors in light mode and dark mode: |
|||
{| class="wikitable" style="text-align: center" |
|||
! Base color |
|||
! Background for dark text<ref>This is the ''darkest'' the background should be, assuming the text color is the light mode default, <code>#36414f</code>; the background should only be adjusted lighter.</ref> |
|||
! Ratio |
|||
! rowspan="100" | |
|||
! Background for light text<ref>This is the ''lightest'' the background should be, assuming the text color is the dark mode default, <code>#cbd9f4</code>; the background should only be adjusted darker.</ref> |
|||
! Ratio |
|||
|- |
|||
| Red |
|||
| style="color: #36414f; background: #fbc0ba" | '''@apricot-peach'''<br>(#fbc0ba) |
|||
| 6.55 |
|||
| style="color: #cbd9f4; background: #9f261e" | '''@old-brick'''<br>(#9f261e) |
|||
| 5.35 |
|||
|- |
|||
| Orange |
|||
| style="color: #36414f; background: #fbcfa6" | '''@corvette'''<br>(#fbcfa6) |
|||
| 7.19 |
|||
| style="color: #cbd9f4; background: #7a3f08" | '''@antique-bronze'''<br>(#7a3f08) |
|||
| 5.84 |
|||
|- |
|||
| Yellow |
|||
| style="color: #36414f; background: #fcea94" | '''@golden'''<br>(#fcea94) |
|||
| 8.55 |
|||
| style="color: #cbd9f4; background: #786300" | '''@cinnamon'''<br>(#786300) |
|||
| 4.51 |
|||
|- |
|||
| Green |
|||
| style="color: #36414f; background: #c3e8a3" | '''@caper'''<br>(#c3e8a3) |
|||
| 7.57 |
|||
| style="color: #cbd9f4; background: #2e5e05" | '''@san-felix'''<br>(#2e5e05) |
|||
| 5.45 |
|||
|- |
|||
| Blue |
|||
| style="color: #36414f; background: #aad9f5" | '''@jordy-blue'''<br>(#aad9f5) |
|||
| 6.88 |
|||
| style="color: #cbd9f4; background: #0b5884" | '''@venice-blue'''<br>(#0b5884) |
|||
| 5.39 |
|||
|- |
|||
| Purple |
|||
| style="color: #36414f; background: #cfc0f0" | '''@perfume'''<br>(#cfc0f0) |
|||
| 5.96 |
|||
| style="color: #cbd9f4; background: #4f348b" | '''@seance'''<br>(#4f348b) |
|||
| 6.76 |
|||
|- |
|||
| Pink |
|||
| style="color: #36414f; background: #f5c8ec" | '''@cherub'''<br>(#f5c8ec) |
|||
| 7.08 |
|||
| style="color: #cbd9f4; background: #6d3662" | '''@cosmic'''<br>(#6d3662) |
|||
| 6.29 |
|||
|- |
|||
| Grey |
|||
| style="color: #36414f; background: #e4eaee" | '''@mystic'''<br>(#e4eaee) |
|||
| 8.52 |
|||
| style="color: #cbd9f4; background: #444e5a" | '''@river-bed'''<br>(#444e5a) |
|||
| 5.95 |
|||
|} |
|||
{{Reflist}} |
|||
===Classes=== |
|||
{{Main|/Classes}} |
|||
The wiki stylesheets contain various helper classes for applying colours, some of which are documented [[/Classes|here]]. |
|||
==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]] |
|||
Revision as of 01:31, 12 November 2024
This page contains information about the look of the Brighter Shores Wiki.
Colours
Brand
Body
--body-main
#fdfcfc
--body-light
#e7e5e4
--body-mid
#cbb7ae
--body-dark
#9f847a
--body-darker
#755c52
--body-background-color
#173a4d
Buttons and links
--button-border
#3c352a
--button-dark
#18140c
--button-light
#3a301d
--link-color
#8b694f
--table-header-link
#6d5248
--background-link-color
#e2bd8a
@infobox-link
#d5ab9c
Game class colors
@hopeport
#FFE233
@hopeport-dark
#3b382f
@mantuban
#68ABF1
@mantuban-dark
#26323d
@hopeforest
#72D757
@hopeforest-dark
#2e3930
@crenopolis
#979797
@crenopolis-dark
#3f3f3f
@stonemaw
#C57F41
@stonemaw-dark
#3b3430
Status
@mocaccino
#801c13
@old-brick
#9f261e
@flamingo
#ee4231
@apricot-peach
#fbc0ba
@bridesmaid
#feecea
@antique-bronze
#7a3f08
@korma
#b55e0c
@ecstasy
#f7861b
@corvette
#fbcfa6
@lace
#fef0e4
@cinnamon
#786300
@olive
#a48900
@supernova
#f9d000
@golden
#fcea94
@half-dutch
#fef9de
@san-felix
#2e5e05
@la-palma
#3c780a
@lima
#6bc71f
@caper
#c3e8a3
@frost
#ecf8e3
@regal-blue
#03436b
@venice-blue
#0b5884
@curious-blue
#3ea6e6
@jordy-blue
#aad9f5
@tropical-blue
#e5f3fc
@honey-flower
#3d276b
@seance
#4f348b
@medium-purple
#855cd8
@perfume
#cfc0f0
@heliotrope
#f0ecfa
@cosmic
#6d3662
@cannon-pink
#984c89
@lavender
#e874cf
@cherub
#f5c8ec
@french-lilac
#fceef9
@river-bed
#444e5a
@shuttle-gray
#5d6773
@gray-chateau
#949eaa
@mystic
#e4eaee
@black-haze
#f9fafa
Recommended pairings
Having good color contrast benefits all users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors (MDN). To achieve at least a passing WCAG AA contrast ratio (4.5), these are the recommended color pairings for backgrounds against the default text colors in light mode and dark mode:
| Base color | Background for dark text[1] | Ratio | Background for light text[2] | Ratio | |
|---|---|---|---|---|---|
| Red | @apricot-peach (#fbc0ba) |
6.55 | @old-brick (#9f261e) |
5.35 | |
| Orange | @corvette (#fbcfa6) |
7.19 | @antique-bronze (#7a3f08) |
5.84 | |
| Yellow | @golden (#fcea94) |
8.55 | @cinnamon (#786300) |
4.51 | |
| Green | @caper (#c3e8a3) |
7.57 | @san-felix (#2e5e05) |
5.45 | |
| Blue | @jordy-blue (#aad9f5) |
6.88 | @venice-blue (#0b5884) |
5.39 | |
| Purple | @perfume (#cfc0f0) |
5.96 | @seance (#4f348b) |
6.76 | |
| Pink | @cherub (#f5c8ec) |
7.08 | @cosmic (#6d3662) |
6.29 | |
| Grey | @mystic (#e4eaee) |
8.52 | @river-bed (#444e5a) |
5.95 |
Classes
The wiki stylesheets contain various helper classes for applying colours, some of which are documented here.
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 PT Serif for headings and 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.
The quick brown fox jumps over the lazy dog.
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.
The quick brown fox jumps over the lazy dog.
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.