Theming (#624)
* 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
|
@ -7,7 +7,7 @@ translations
|
|||
.env
|
||||
Rocket.toml
|
||||
!.gitkeep
|
||||
static/media
|
||||
static
|
||||
docker-compose.yml
|
||||
*.db
|
||||
*.sqlite
|
||||
|
@ -16,8 +16,5 @@ docker-compose.yml
|
|||
tags.*
|
||||
!tags.rs
|
||||
search_index
|
||||
main.css
|
||||
*.wasm
|
||||
*.js
|
||||
.buildconfig
|
||||
__pycache__
|
||||
|
|
|
@ -2084,8 +2084,10 @@ dependencies = [
|
|||
"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)",
|
||||
"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)",
|
||||
"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)",
|
||||
"whatlang 0.7.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 352 B After Width: | Height: | Size: 352 B |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 462 B After Width: | Height: | Size: 462 B |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 571 B |
Before Width: | Height: | Size: 612 B After Width: | Height: | Size: 612 B |
Before Width: | Height: | Size: 711 B After Width: | Height: | Size: 711 B |
Before Width: | Height: | Size: 820 B After Width: | Height: | Size: 820 B |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 618 B After Width: | Height: | Size: 618 B |
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 942 B After Width: | Height: | Size: 942 B |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 562 B |
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 905 B After Width: | Height: | Size: 905 B |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 432 B After Width: | Height: | Size: 432 B |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 501 B After Width: | Height: | Size: 501 B |
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 516 B |
Before Width: | Height: | Size: 575 B After Width: | Height: | Size: 575 B |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 728 B After Width: | Height: | Size: 728 B |
Before Width: | Height: | Size: 797 B After Width: | Height: | Size: 797 B |
Before Width: | Height: | Size: 851 B After Width: | Height: | Size: 851 B |
Before Width: | Height: | Size: 916 B After Width: | Height: | Size: 916 B |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 485 B After Width: | Height: | Size: 485 B |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 595 B After Width: | Height: | Size: 595 B |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 648 B After Width: | Height: | Size: 648 B |
Before Width: | Height: | Size: 737 B After Width: | Height: | Size: 737 B |
Before Width: | Height: | Size: 828 B After Width: | Height: | Size: 828 B |
Before Width: | Height: | Size: 839 B After Width: | Height: | Size: 839 B |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 938 B After Width: | Height: | Size: 938 B |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
@ -0,0 +1,3 @@
|
|||
* {
|
||||
font-family: monospace;
|
||||
}
|
|
@ -1,8 +1,8 @@
|
|||
// Heading
|
||||
main header.article {
|
||||
overflow: hidden;
|
||||
background: $white;
|
||||
color: $black;
|
||||
background: $background;
|
||||
color: $text-color;
|
||||
display: grid;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
@ -52,14 +52,14 @@ main header.article {
|
|||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, transparent 20vh, black 80vh);
|
||||
background: linear-gradient(180deg, transparent 20vh, $black 80vh);
|
||||
}
|
||||
|
||||
& > img {
|
||||
z-index: 1;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
background: $purple;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -141,7 +141,7 @@ main .article-meta {
|
|||
padding: 0px;
|
||||
margin: 0px 10px 10px 0px;
|
||||
transition: all 0.2s ease-in;
|
||||
border: 1px solid $purple;
|
||||
border: 1px solid $primary;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
|
@ -149,7 +149,7 @@ main .article-meta {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: transparentize($purple, 0.9);
|
||||
background: transparentize($primary, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -181,7 +181,7 @@ main .article-meta {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: $black;
|
||||
color: $text-color;
|
||||
border: none;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
|
@ -201,7 +201,7 @@ main .article-meta {
|
|||
|
||||
&.reshared, &.liked {
|
||||
svg.feather {
|
||||
color: $white;
|
||||
color: $background;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
@ -234,26 +234,26 @@ main .article-meta {
|
|||
}
|
||||
|
||||
.reshares {
|
||||
p, .action:hover { color: $purple; }
|
||||
p, .action:hover { color: $primary; }
|
||||
|
||||
.action svg.feather {
|
||||
padding: 0.7em;
|
||||
box-sizing: border-box;
|
||||
color: $purple;
|
||||
border: solid $purple thin;
|
||||
color: $primary;
|
||||
border: solid $primary thin;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action:hover svg.feather {
|
||||
background: transparentize($purple, 0.85);
|
||||
background: transparentize($primary, 0.85);
|
||||
}
|
||||
|
||||
.action.reshared svg.feather {
|
||||
background: $purple;
|
||||
background: $primary;
|
||||
}
|
||||
.action.reshared:hover svg.feather {
|
||||
background: transparentize($purple, 0.75)
|
||||
color: $purple;
|
||||
background: transparentize($primary, 0.75)
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -262,7 +262,7 @@ main .article-meta {
|
|||
margin: 0 $horizontal-margin;
|
||||
|
||||
h2 {
|
||||
color: $purple;
|
||||
color: $primary;
|
||||
font-size: 1.5em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -281,17 +281,17 @@ main .article-meta {
|
|||
a.button, form.inline, form.inline input {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: $black;
|
||||
color: $text-color;
|
||||
margin-right: 2em;
|
||||
font-family: $route159;
|
||||
font-weight: normal;
|
||||
|
||||
&::before {
|
||||
color: $purple;
|
||||
color: $primary;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
&:hover { color: $purple; }
|
||||
&:hover { color: $primary; }
|
||||
}
|
||||
|
||||
.comment {
|
||||
|
@ -325,7 +325,7 @@ main .article-meta {
|
|||
}
|
||||
|
||||
.dt-published a {
|
||||
color: transparentize($black, 0.6);
|
||||
color: transparentize($text-color, 0.6);
|
||||
}
|
||||
|
||||
.author {
|
||||
|
@ -339,11 +339,11 @@ main .article-meta {
|
|||
}
|
||||
|
||||
.display-name {
|
||||
color: $black;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.display-name { color: $purple; }
|
||||
.display-name { color: $primary; }
|
||||
small { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
@ -384,7 +384,7 @@ main .article-meta {
|
|||
}
|
||||
|
||||
.placeholder {
|
||||
color: transparentize($black, 0.6);
|
||||
color: transparentize($text-color, 0.6);
|
||||
}
|
||||
|
||||
article {
|
||||
|
@ -400,7 +400,7 @@ main .article-meta {
|
|||
left: 20vw;
|
||||
right: 20vw;
|
||||
background: $gray;
|
||||
border: 1px solid $purple;
|
||||
border: 1px solid $primary;
|
||||
z-index: 2;
|
||||
padding: 2em;
|
||||
overflow-y: auto;
|
|
@ -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;
|
|
@ -13,14 +13,14 @@ input, textarea, select {
|
|||
-webkit-appearance: textarea;
|
||||
|
||||
background: $form-input-background;
|
||||
color: $black;
|
||||
border: solid $black thin;
|
||||
color: $text-color;
|
||||
border: solid $form-input-border thin;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
|
||||
&:focus {
|
||||
border-color: $purple;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
form input[type="submit"] {
|
||||
|
@ -64,7 +64,7 @@ form.inline {
|
|||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $purple;
|
||||
color: $primary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
@ -78,15 +78,15 @@ form.inline {
|
|||
margin: 0.5em auto;
|
||||
padding: 0.75em 1em;
|
||||
|
||||
background: $purple;
|
||||
color: $white;
|
||||
background: $primary;
|
||||
color: $primary-text-color;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($purple, 0.1);
|
||||
background: transparentize($primary, 0.1);
|
||||
}
|
||||
|
||||
&.destructive {
|
||||
|
@ -99,10 +99,10 @@ form.inline {
|
|||
|
||||
&.secondary {
|
||||
background: $gray;
|
||||
color: $black;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($black, 0.9);
|
||||
background: transparentize($text-color, 0.9);
|
||||
}
|
||||
}
|
||||
}
|