Nothing to Hide

A lightweight theme by ~meskin

Information

This theme relies on the Ubuntu font from Google Fonts. Most styles are applied directly to elements so no need to use classes in your code. The colours are fully a11y contrast compliant and change depending on the browser's prefer-color-scheme setting. To see how the page looks with either setting, toggle dark mode on or off, if your brower/operating system allows for it.

Documentation

Setting colors

Nothing to Hide uses CSS variables to set the colours. They're the 1st few lines in the stylesheet. You need a main (text) colour, an alt (links, and various borders) colour, and a background colour, for both the light and dark schemes. I highly recommend using a colour contrast checker to make sure that your website is accessible.

Misc. Styles

There are two <code> styles; inline and block. The block style, when placed inside a <pre> tag, allows you to display multi-line code blocks. You can see this in use below, where the css is displayed.

CSS

Full

/*Dark colour scheme*/

@media (prefers-color-scheme:dark) {
    :root {
        --main-color: #8cdca3;
        --alt-color: #A6E4B8;
        --background-color: #0b0528
    }
}
/*Light colour scheme*/

@media (prefers-color-scheme:light) {
    :root {
        --main-color: #0b0528;
        --alt-color: #231081;
        --background-color: #8cdca3
    }
}
body {
    font-family: Ubuntu;
    font-weight: 400;
    font-style: normal;
    background-color: var(--background-color);
    color: var(--main-color);
    margin: 5%
}
a, a:visited {
    color: var(--alt-color)
}
h1, h2, h3, h4, h5, h6 {
    line-height: 2
}
p {
    line-height: 1.4;
    font-size: 18px
}
code.inline {
    display: inline;
}
code.block {
    display: block;
    border: 1px solid var(--alt-color);
    padding: 20px;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

Minified

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.