Skip to content

Instantly share code, notes, and snippets.

@jbfriedrich
Created May 3, 2020 06:44
Show Gist options
  • Save jbfriedrich/e8326206d4d0d844bbd5f2aac8f8db42 to your computer and use it in GitHub Desktop.
Save jbfriedrich/e8326206d4d0d844bbd5f2aac8f8db42 to your computer and use it in GitHub Desktop.
WriteAS Fastodon Theme 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---------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment