* 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
pull/647/head
Ana Gelez 5 years ago committed by GitHub
parent fb60236a54
commit a6c84daa1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

5
.gitignore vendored

@ -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__

2
Cargo.lock generated

@ -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.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: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

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);
}
}
}

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

Loading…
Cancel
Save