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

.gitignore

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

Cargo.lock

@@ -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)",
 ]

assets/themes/blog-monospace/theme.scss

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

assets/themes/default/_article.scss

@@ -1,8 +1,8 @@
 // Heading
 main header.article {
   overflow: hidden;
-  background: $white;
+  background: $background;
-  color: $black;
+  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;
+     	color: $primary;
-     	border: solid $purple thin;
+     	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)
+     	background: transparentize($primary, 0.75)
-     	color: $purple;
+     	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;

assets/themes/default/_dark_variables.scss

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

assets/themes/default/_forms.scss

@@ -13,14 +13,14 @@ input, textarea, select {
   -webkit-appearance: textarea;
 
  	background: $form-input-background;
- 	color: $black;
+ 	color: $text-color;
- 	border: solid $black thin;
+ 	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;
+ 	background: $primary;
- 	color: $white;
+ 	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);
     }
   }
 }