* Theming

- Custom CSS for blogs
- Custom themes for instance
- New dark theme
- UI to choose your instance theme
- Option to disable blog themes if you prefer to only have the instance theme
- UI to choose a blog theme
This commit is contained in:
Ana Gelez 2019-08-21 00:42:04 +02:00 committed by GitHub
parent fb60236a54
commit a6c84daa1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
203 changed files with 667 additions and 334 deletions

5
.gitignore vendored
View File

@ -7,7 +7,7 @@ translations
.env .env
Rocket.toml Rocket.toml
!.gitkeep !.gitkeep
static/media static
docker-compose.yml docker-compose.yml
*.db *.db
*.sqlite *.sqlite
@ -16,8 +16,5 @@ docker-compose.yml
tags.* tags.*
!tags.rs !tags.rs
search_index search_index
main.css
*.wasm
*.js
.buildconfig .buildconfig
__pycache__ __pycache__

2
Cargo.lock generated
View File

@ -2084,8 +2084,10 @@ dependencies = [
"serde_derive 1.0.91 (registry+https://github.com/rust-lang/crates.io-index)", "serde_derive 1.0.91 (registry+https://github.com/rust-lang/crates.io-index)",
"serde_json 1.0.40 (registry+https://github.com/rust-lang/crates.io-index)", "serde_json 1.0.40 (registry+https://github.com/rust-lang/crates.io-index)",
"shrinkwraprs 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)", "shrinkwraprs 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
"tantivy 0.10.1 (registry+https://github.com/rust-lang/crates.io-index)", "tantivy 0.10.1 (registry+https://github.com/rust-lang/crates.io-index)",
"url 2.1.0 (registry+https://github.com/rust-lang/crates.io-index)", "url 2.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
"walkdir 2.2.7 (registry+https://github.com/rust-lang/crates.io-index)",
"webfinger 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)", "webfinger 0.4.1 (registry+https://github.com/rust-lang/crates.io-index)",
"whatlang 0.7.1 (registry+https://github.com/rust-lang/crates.io-index)", "whatlang 0.7.1 (registry+https://github.com/rust-lang/crates.io-index)",
] ]

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 352 B

After

Width:  |  Height:  |  Size: 352 B

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 462 B

After

Width:  |  Height:  |  Size: 462 B

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

Before

Width:  |  Height:  |  Size: 571 B

After

Width:  |  Height:  |  Size: 571 B

View File

Before

Width:  |  Height:  |  Size: 612 B

After

Width:  |  Height:  |  Size: 612 B

View File

Before

Width:  |  Height:  |  Size: 711 B

After

Width:  |  Height:  |  Size: 711 B

View File

Before

Width:  |  Height:  |  Size: 820 B

After

Width:  |  Height:  |  Size: 820 B

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

Before

Width:  |  Height:  |  Size: 618 B

After

Width:  |  Height:  |  Size: 618 B

View File

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

Before

Width:  |  Height:  |  Size: 942 B

After

Width:  |  Height:  |  Size: 942 B

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

Before

Width:  |  Height:  |  Size: 562 B

After

Width:  |  Height:  |  Size: 562 B

View File

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 905 B

After

Width:  |  Height:  |  Size: 905 B

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 358 B

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 432 B

After

Width:  |  Height:  |  Size: 432 B

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 501 B

View File

Before

Width:  |  Height:  |  Size: 516 B

After

Width:  |  Height:  |  Size: 516 B

View File

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 575 B

View File

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

Before

Width:  |  Height:  |  Size: 728 B

After

Width:  |  Height:  |  Size: 728 B

View File

Before

Width:  |  Height:  |  Size: 797 B

After

Width:  |  Height:  |  Size: 797 B

View File

Before

Width:  |  Height:  |  Size: 851 B

After

Width:  |  Height:  |  Size: 851 B

View File

Before

Width:  |  Height:  |  Size: 916 B

After

Width:  |  Height:  |  Size: 916 B

View File

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 485 B

After

Width:  |  Height:  |  Size: 485 B

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 595 B

After

Width:  |  Height:  |  Size: 595 B

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 648 B

View File

Before

Width:  |  Height:  |  Size: 737 B

After

Width:  |  Height:  |  Size: 737 B

View File

Before

Width:  |  Height:  |  Size: 828 B

After

Width:  |  Height:  |  Size: 828 B

View File

Before

Width:  |  Height:  |  Size: 839 B

After

Width:  |  Height:  |  Size: 839 B

View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 938 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,3 @@
* {
font-family: monospace;
}

View File

@ -1,8 +1,8 @@
// Heading // Heading
main header.article { main header.article {
overflow: hidden; overflow: hidden;
background: $white; background: $background;
color: $black; color: $text-color;
display: grid; display: grid;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -52,14 +52,14 @@ main header.article {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: linear-gradient(180deg, transparent 20vh, black 80vh); background: linear-gradient(180deg, transparent 20vh, $black 80vh);
} }
& > img { & > img {
z-index: 1; z-index: 1;
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
background: $purple; background: $primary;
} }
} }
@ -141,7 +141,7 @@ main .article-meta {
padding: 0px; padding: 0px;
margin: 0px 10px 10px 0px; margin: 0px 10px 10px 0px;
transition: all 0.2s ease-in; transition: all 0.2s ease-in;
border: 1px solid $purple; border: 1px solid $primary;
a { a {
display: inline-block; display: inline-block;
@ -149,7 +149,7 @@ main .article-meta {
} }
&:hover { &:hover {
background: transparentize($purple, 0.9); background: transparentize($primary, 0.9);
} }
} }
} }
@ -181,7 +181,7 @@ main .article-meta {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: none; background: none;
color: $black; color: $text-color;
border: none; border: none;
font-size: 1.1em; font-size: 1.1em;
cursor: pointer; cursor: pointer;
@ -201,7 +201,7 @@ main .article-meta {
&.reshared, &.liked { &.reshared, &.liked {
svg.feather { svg.feather {
color: $white; color: $background;
font-weight: 900; font-weight: 900;
} }
} }
@ -234,26 +234,26 @@ main .article-meta {
} }
.reshares { .reshares {
p, .action:hover { color: $purple; } p, .action:hover { color: $primary; }
.action svg.feather { .action svg.feather {
padding: 0.7em; padding: 0.7em;
box-sizing: border-box; box-sizing: border-box;
color: $purple; color: $primary;
border: solid $purple thin; border: solid $primary thin;
font-weight: 600; font-weight: 600;
} }
.action:hover svg.feather { .action:hover svg.feather {
background: transparentize($purple, 0.85); background: transparentize($primary, 0.85);
} }
.action.reshared svg.feather { .action.reshared svg.feather {
background: $purple; background: $primary;
} }
.action.reshared:hover svg.feather { .action.reshared:hover svg.feather {
background: transparentize($purple, 0.75) background: transparentize($primary, 0.75)
color: $purple; color: $primary;
} }
} }
@ -262,7 +262,7 @@ main .article-meta {
margin: 0 $horizontal-margin; margin: 0 $horizontal-margin;
h2 { h2 {
color: $purple; color: $primary;
font-size: 1.5em; font-size: 1.5em;
font-weight: 600; font-weight: 600;
} }
@ -281,17 +281,17 @@ main .article-meta {
a.button, form.inline, form.inline input { a.button, form.inline, form.inline input {
padding: 0; padding: 0;
background: none; background: none;
color: $black; color: $text-color;
margin-right: 2em; margin-right: 2em;
font-family: $route159; font-family: $route159;
font-weight: normal; font-weight: normal;
&::before { &::before {
color: $purple; color: $primary;
padding-right: 0.5em; padding-right: 0.5em;
} }
&:hover { color: $purple; } &:hover { color: $primary; }
} }
.comment { .comment {
@ -325,7 +325,7 @@ main .article-meta {
} }
.dt-published a { .dt-published a {
color: transparentize($black, 0.6); color: transparentize($text-color, 0.6);
} }
.author { .author {
@ -339,11 +339,11 @@ main .article-meta {
} }
.display-name { .display-name {
color: $black; color: $text-color;
} }
&:hover { &:hover {
.display-name { color: $purple; } .display-name { color: $primary; }
small { opacity: 1; } small { opacity: 1; }
} }
} }
@ -384,7 +384,7 @@ main .article-meta {
} }
.placeholder { .placeholder {
color: transparentize($black, 0.6); color: transparentize($text-color, 0.6);
} }
article { article {
@ -400,7 +400,7 @@ main .article-meta {
left: 20vw; left: 20vw;
right: 20vw; right: 20vw;
background: $gray; background: $gray;
border: 1px solid $purple; border: 1px solid $primary;
z-index: 2; z-index: 2;
padding: 2em; padding: 2em;
overflow-y: auto; overflow-y: auto;

View File

@ -0,0 +1,19 @@
@import '_variables';
// Color Scheme
$gray: #1a3854;
$black: #102e4a;
$white: #F8F8F8;
$purple: #7765E3;
$lightpurple: #c2bbee;
$red: #d16666;
$yellow: #ff934f;
$blue: #7f96ff;
$background: $black;
$form-input-background: $gray;
$form-input-border: $white;
$text-color: $white;
$primary: $purple;
$primary-text-color: $white; // text color on primary background (buttons for instance)
$success-color: $blue;

View File

@ -13,14 +13,14 @@ input, textarea, select {
-webkit-appearance: textarea; -webkit-appearance: textarea;
background: $form-input-background; background: $form-input-background;
color: $black; color: $text-color;
border: solid $black thin; border: solid $form-input-border thin;
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
&:focus { &:focus {
border-color: $purple; border-color: $primary;
} }
} }
form input[type="submit"] { form input[type="submit"] {
@ -64,7 +64,7 @@ form.inline {
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
color: $purple; color: $primary;
font-weight: normal; font-weight: normal;
} }
} }
@ -78,15 +78,15 @@ form.inline {
margin: 0.5em auto; margin: 0.5em auto;
padding: 0.75em 1em; padding: 0.75em 1em;
background: $purple; background: $primary;
color: $white; color: $primary-text-color;
font-weight: bold; font-weight: bold;
border: none; border: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: transparentize($purple, 0.1); background: transparentize($primary, 0.1);
} }
&.destructive { &.destructive {
@ -99,10 +99,10 @@ form.inline {
&.secondary { &.secondary {
background: $gray; background: $gray;
color: $black; color: $text-color;
&:hover { &:hover {
background: transparentize($black, 0.9); background: transparentize($text-color, 0.9);
} }
} }
} }

Some files were not shown because too many files have changed in this diff Show More