bocpages | Boards of Canada wiki - User contributions [en]

User:Hellomynameisjoe/Infobox song

2026-07-06T13:06:01Z

Hellomynameisjoe:

{| class="bocpagestable" style="float: right; clear: right; margin: 0 0 0.5em 0.5em; width: 45%; background-color: white;"
|-
! colspan="2" style="font-size: 12px; padding-bottom: 0em;" | '''{{{name}}}'''
|-
|Running time||{{{runtime}}}
|-
|Appears on||{{{appearson}}}
|-
!Previous||Next
|-
|{{{prev}}}||{{{next}}}
|}<noinclude>

{| class="bocpagestable" style="float: right; clear: right; margin: 0 0 0.5em 0.5em; width: 45%; background-color: white;"
|-
! colspan="2" style="font-size: 12px; padding-bottom: 0em;" | '''{{{name}}}'''
|-
|Running time||{{{runtime}}}
|-
|Appears on||{{{appearson}}}
|-
|colspan="2" style="text-align:center;"|<small>prev</small> {{{prev}}} ← ⬢ → {{{next}}} <small>next</small>
|}</noinclude>

User:Hellomynameisjoe/Infobox song

2026-07-06T13:02:20Z

Hellomynameisjoe:

User:Hellomynameisjoe/Infobox song

2026-07-06T12:59:56Z

Hellomynameisjoe:

User:Hellomynameisjoe/Infobox song

2026-07-06T12:59:07Z

Hellomynameisjoe:

User:Hellomynameisjoe/Infobox song

2026-07-06T12:58:31Z

Hellomynameisjoe:

User:Hellomynameisjoe/Infobox song

2026-07-06T12:58:05Z

Hellomynameisjoe:

User:Hellomynameisjoe/Infobox song

2026-07-06T12:54:27Z

Hellomynameisjoe: Created page with "{| class="bocpagestable" style="float: right; clear: right; margin: 0 0 0.5em 0.5em; width: 45%; background-color: white;" |- ! colspan="2" style="font-size: 12px; padding-bot..."

Template:Infobox Song

2026-07-06T12:47:46Z

Hellomynameisjoe: Small suggestion. Feel free to revert if everyone thinks this is awful.

User:Hellomynameisjoe/foreground.css

2026-07-04T17:25:27Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new, a.new * {
color: var(--red);
}

a.new:hover, a.new:hover * {
color: var(--dred);
}

/* external links */

a.external, a.external * {
color: var(--med);
}

a.external:hover, a.external:hover * {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
background-color: var(--llgrey);
}

button.secondary *, .button.secondary * {
color: var(--ddgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T17:23:10Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new, a.new * {
color: var(--red);
}

a.new:hover, a.new:hover * {
color: var(--dred);
}

/* external links */

a.external, a.external * {
color: var(--med);
}

a.external:hover, a.external:hover * {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
background-color: var(--llgrey);
}

button.secondary a *, .button.secondary a * {
color: var(--ddgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T17:20:01Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new, a.new * {
color: var(--red);
}

a.new:hover, a.new:hover * {
color: var(--dred);
}

/* external links */

a.external, a.external * {
color: var(--med);
}

a.external:hover, a.external:hover * {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
background-color: var(--llgrey);
}

button.secondary a, .button.secondary a {
color: var(--ddgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:39:37Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new, a.new * {
color: var(--red);
}

a.new:hover, a.new:hover * {
color: var(--dred);
}

/* external links */

a.external, a.external * {
color: var(--med);
}

a.external:hover, a.external:hover * {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:36:34Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a, strong a, b a, em a, i a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover, strong a:hover, b a:hover, em a:hover, i a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new, strong a.new, b a.new, em a.new, i a.new {
color: var(--red);
}

a.new:hover, strong a.new:hover, b a.new:hover, em a.new:hover, i a.new:hover {
color: var(--dred);
}

/* external links */

a.external, strong a.external, b a.external, em a.external, i a.external {
color: var(--med);
}

a.external:hover, strong a.external:hover, b a.external:hover, em a.external:hover, i a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:30:37Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

em, i {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:15:44Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b, em, i {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:14:49Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b, em, i {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:13:05Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b, em, i {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:11:39Z

Hellomynameisjoe: Undo revision 22107 by Hellomynameisjoe (talk)

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T14:09:06Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: max(450, inherit);
}

p a.external, li a.external {
font-weight: max(500, inherit);
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:52:52Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:51:47Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
font-weight: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 550;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:51:26Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
all: unset;
}

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 550;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:50:19Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-weight: 550;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:49:19Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa::before {
font-family: "FontAwesome";
}

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:47:58Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa:not(::before) {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:47:17Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:46:16Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--llgrey);
font-family: var(--sans);
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:44:45Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
background-color: var(--lgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:43:25Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown {
background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

.f-dropdown li a:hover {
color: var(--dark);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:41:08Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--llgrey);
}

button.secondary, .button.secondary {
color: var(--ddgrey);
}

.f-dropdown li a {
color: var(--dgrey);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:40:22Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.f-dropdown li:hover, .f-dropdown li:focus {
background-color: var(--lgrey);
}

button.secondary, .button.secondary, .f-dropdown li a {
color: var(--ddgrey);
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:33:38Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\2003";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:32:20Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

li {
margin-left: 1em;
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

#mw-content-text ul {
margin: 0.3em 0 0 3.2em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:23:51Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

li::marker {
margin: 1em;
padding: 1em;
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

#mw-content-text ul {
margin: 0.3em 0 0 3.2em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:22:41Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

li::marker {
margin-right: 1em;
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

#mw-content-text ul {
margin: 0.3em 0 0 3.2em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:21:15Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

#mw-content-text ul {
margin: 0.3em 0 0 3.2em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:18:24Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
}

ol li::marker {
color: var(--head);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:16:20Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::marker {
color: var(--dark);
font-size: 0.75em;
display: inline-block;
vertical-align: top;
}

ol li::marker {
color: var(--dark);
font-weight: 450;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:14:13Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::before {
color: var(--dark);
font-size: 0.5em;
display: inline-block;
vertical-align: top;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:13:50Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::before {
color: var(--dark);
font-size: 0.67em;
display: inline-block;
vertical-align: top;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:12:48Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::before {
color: var(--dark);
font-size: calc(2em / 3);
vertical-align: top;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:11:47Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul li::before {
color: var(--dark);
font-size: 0.75em;
vertical-align: middle;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:04:31Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
list-style-type: "\2B22\20";
}

html #toc ul ul, .toc ul ul, ul ul {
list-style-type: "\2B21\20";
}

ul ::marker {
color: var(--dark);
font-size: 0.5em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:03:22Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

html ul {
list-style-type: "\2B22\20";
}

html ul ul {
list-style-type: "\2B21\20";
}

ul ::marker {
color: var(--dark);
font-size: 0.5em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T13:02:10Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style lists */

ul {
list-style-type: "\2B22\20";
}

ul ul {
list-style-type: "\2B21\20";
}

::marker {
color: var(--dark);
font-size: 0.5em;
}

/* style toc */

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T12:58:34Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--ddgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style toc */

html #toc ul, .toc ul {
list-style-type: "\2B22\20";
color: var(--dark);
}

html #toc ul ul, .toc ul ul {
list-style-type: "\2B21\20";
}

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T12:57:12Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* self links */

.selflink {
color: var(--dgrey);
}

/* link font weights */

p a, li a {
font-weight: 450;
}

p a.external, li a.external {
font-weight: 500;
}

strong a, b a {
font-weight: inherit;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style toc */

html #toc ul, .toc ul {
list-style-type: "\2B22\20";
color: var(--dark);
}

html #toc ul ul, .toc ul ul {
list-style-type: "\2B21\20";
}

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T12:53:58Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

.selflink {
color: var(--dgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* link font weight */

p :not(b) a, li :not(b) a {
font-weight: 450;
}

p :not(b) a.external, li :not(b) a.external {
font-weight: 500;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style toc */

html #toc ul, .toc ul {
list-style-type: "\2B22\20";
color: var(--dark);
}

html #toc ul ul, .toc ul ul {
list-style-type: "\2B21\20";
}

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T12:53:03Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

.selflink {
color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* link font weight */

p :not(b) a, li :not(b) a {
font-weight: 450;
}

p :not(b) a.external, li :not(b) a.external {
font-weight: 500;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style toc */

html #toc ul, .toc ul {
list-style-type: "\2B22\20";
color: var(--dark);
}

html #toc ul ul, .toc ul ul {
list-style-type: "\2B21\20";
}

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

User:Hellomynameisjoe/foreground.css

2026-07-04T12:52:10Z

Hellomynameisjoe:

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
font-family: "Miasm";
src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
font-family: "Strasua";
src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
font-display: swap;
unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
--sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
--mono: "Noto Sans Mono", "Andale Mono", monospace;

/* define colour scheme */

--white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
--bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

--llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
--lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
--grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
--dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
--ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

--head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
--text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
--black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

--selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
--light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
--med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
--accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
--dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

--yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
--orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
--red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
--dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

/* prevent overscroll */

overscroll-behavior: none;
}

body {

/* prevent overflowing lines and font synthesis */

overflow-wrap: anywhere;
font-synthesis: none;

/* make black background */

background-color: var(--black);
background-blend-mode: screen;
background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
color: var(--head);
}

.previewnote {
color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6 {
font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
font-family: var(--mono) !important;
}

h2 {
font-family: "Miasm", var(--sans);
font-size: 2em;

& .mw-editsection {
font-family: var(--sans);
}
}

.title {
font-family: "Strasua", var(--sans);
font-size: 4em;
color: var(--ddgrey);
}

h3, .ns-subject h3 {
text-decoration: none;
font-weight: 700;
color: var(--dark);
font-size: 1.5em;
padding-left: 0;
}

h4 {
font-weight: 800;
color: var(--dark);
font-size: 1.25em;
}

h5 {
font-weight: 900;
color: var(--dark);
font-size: 1em;
}

h6 {
font-weight: 700;
color: var(--dark);
font-size: 1em;
}

.mw-editsection {
margin-left: 1em;
font-size: small;
}

strong, b {
color: var(--head);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
display: none;
}

/* backgrounds for content */

#page-content .row {
background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
background-color: var(--llgrey);
border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
background-color: var(--llgrey);
}

table.wikitable tr > th {
background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
background-color: var(--white);
}

/* line styles */

table, table * {
border-color: var(--white);
}

tbody, textarea, hr {
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
}

/* table title size */

th[style] {
font-size: 1em !important;
}

/* link styles */

a, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
color: var(--accent);
}

body a:hover, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
color: var(--dark);
text-decoration: underline;
}

/* red links */

a.new {
color: var(--red);
}

a.new:hover {
color: var(--dred);
}

/* external links */

a.external {
color: var(--med);
}

a.external:hover {
color: var(--accent);
}

/* link font weight */

p :not(b) a, li :not(b) a {
font-weight: 450;
}

p :not(b) a.external, li :not(b) a.external {
font-weight: 500;
}

#latestnewsv2 a {
font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
background: var(--accent);
}

ul.dropdown li {
background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
background-color: var(--accent);
border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
background-color: var(--dark);
}

a.label.new {
background-color: var(--lgrey);
}

a.label.new:hover {
background-color: var(--grey);
}

.wikiEditor-ui .label {
background: none;
}

input#wpPreview:hover {
background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
transition: none;
}

/* quote colours */

blockquote {
color: var(--lgrey);
border-left-color: var(--orange);
}

blockquote cite {
color: var(--dgrey);
}

blockquote p, footer.row {
color: var(--ddgrey);
}

/* style toc */

html #toc ul, .toc ul {
list-style-type: "\2B22\20";
color: var(--dark);
}

html #toc ul ul, .toc ul ul {
list-style-type: "\2B21\20";
}

#toc, .toc {
background-color: var(--white);
border-color: var(--lgrey);
border-style: solid;
border-width: 1px;
padding: 8px;
max-width: fit-content;
}

/* style diff */

.diffchange {
--opacity: calc(1 / 2);
}

td.diff-deletedline {
border-color: var(--orange);
}

td.diff-deletedline .diffchange {
background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
border-color: var(--accent);
}

td.diff-addedline .diffchange {
background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
--opacity: calc(1 / 3);
background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}