Revision as of 16:03, 22 June 2026

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,[email protected],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;
    
    --bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);
    --grey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
    --text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
    --accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
    --head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
}

body {
    font-family: var(--sans);
    overflow-wrap: anywhere;
    color: var(--text);
}

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

h2 {
    font-family: "Miasm", var(--sans);
    
    & .mw-editsection {
        font-family: var(--sans);
    }
}

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

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

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

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

table tr:nth-of-type(odd) {
    background-color: var(--grey);
}

a {
    font-weight: 450;
    color: var(--accent);
}

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

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