WriteAS Fastodon Theme CSS

writeas_fastodon.css

/* Fosstodon Hub theme written by Kev Quirk (https://kevq.uk) and released under the GPL v3 license (https://www.gnu.org/licenses/gpl-3.0.en.html). */

/* Import required font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism-tomorrow.min.css');

/* Load PrismJS scripts and CSS */


/* Create colour variables to be used throughout the theme (makes colours easier to change globally). */
:root {
    --main: #2b90d9;
    --light: #9baec8;
    --lighter: #d9e1e8;
    --dark: #1f232b;
    --accent: #282c37;
}

/* ----------BODY ITEMS---------- */
body {
    background-color: var(--dark);
    color: var(--light);
    font-family: "Open Sans","Segoe UI",Tahoma,Arial,sans-serif !important;
    font-size: 100% !important;
}

.font.norm,
body#collection article.norm,
body#post article.norm,
body#subpage article.norm,
pre.norm, span.norm,
textarea.norm {
    font-family: "Open Sans","Segoe UI",Tahoma,Arial,sans-serif !important;
}

article#post-body {
    font-size: 100% !important;
}

body#post article li {
    margin-bottom: -1rem !important;
}

body h1 a, body header h2 a {
    color: var(--lighter);
}

body h1 a:hover, body header h2 a:hover {
    color: var(--light);
}

body#post article h2, body#post article h3, body#post article h4, body#post article h5 {
    color: var(--lighter);
}
body footer nav {
    color: var(--light);
}

body #post footer nav a, body#collection footer nav a, body#post footer nav a, body#subpage footer nav a {
    margin-top: 0;
    color: var(--lighter);
}

body #post code, body#collection code, body#post code, body#subpage code {
    background-color: var(--light);
    border: 1px solid var(--light);
    color: var(--dark);
    padding: .2em .4em;
    font-size: .86em;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
}

body#collection a.read-more, body#subpage a.read-more {
    color: var(--lighter);
}
/* ----------END BODY ITEMS---------- */


/* ----------NAVIGATION & LINKS---------- */
a {
    color: var(--main);
}

a.user.hidden.pin.action, a.user.hidden.delete.action, a.user.hidden.action {
    color: var(--light);
}

a.pinned {
    color: var(--lighter);
}

a.btn.cta, a.btn.submit, a.btn[type="submit"], button.cta, button.submit, button[type="submit"], input.cta, input.submit, input[type="submit"], select.inputform.cta, select.inputform.submit, select.inputform[type="submit"], textarea.inputform.cta, textarea.inputform.submit, textarea.inputform[type="submit"] {
    border: 1px solid var(--light);
    background: var(--light);
    color: var(--dark);
}

a.btn.cta:hover, a.btn.submit:hover, a.btn[type="submit"]:hover, button.cta:hover, button.submit:hover, button[type="submit"]:hover, input.cta:hover, input.submit:hover, input[type="submit"]:hover, select.inputform.cta:hover, select.inputform.submit:hover, select.inputform[type="submit"]:hover, textarea.inputform.cta:hover, textarea.inputform.submit:hover, textarea.inputform[type="submit"]:hover {
    border: 1px solid var(--lighter);
    background-color: var(--lighter);
    text-decoration: none;
}

.post-title a:link, .post-title a:visited {
    color: var(--lighter);
}

#post nav a:not(.home), header nav a {
    color: var(--light);
}

nav#manage ul a {
    display: block;
    color: var(--lighter);
    background-color: var(--accent);
    padding: 0 .5em;
    margin: 0;
}

nav#manage ul a:hover {
    color: var(--light);
}

nav#manage ul ul {
    background: var(--accent);
}
/* ----------END NAVIGATION & LINKS---------- */


/* ----------HEADERS---------- */

#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4 {
    color: var(--lighter);
}

header p.description {
    color: var(--light);
}
/* ----------END HEADERS---------- */


/* ----------TABLES---------- */
th {
    background: var(--main);
    color: var(--dark);
    padding-left: 10px;
    padding-right: 10px;
}
td {
    border: solid 1px var(--accent);
    padding-left: 10px;
    padding-right: 10px;
}
/* ----------END TABLES---------- */