v2.1.0, refactor w/ crimson

6 files changed, 63 insertions, 9 deletions

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index bcb795d..9707093 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,7 +1,8 @@
 @mixin font-face($name) {
   @font-face {
     font-family: $name;
-    src: url("../font/" + $name + ".woff2") format("woff2"),
+    src:
+       //url("../font/" + $name + ".woff2") format("woff2"),
        url("../font/" + $name + ".woff") format("woff"),
        url("../font/" + $name + ".ttf") format("truetype"),
        url("../font/" + $name + ".otf") format("opentype");
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e3230cd..1a48cdd 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,5 +1,5 @@
 
-$varient: "dark";
+$variant: "dark";
 
 $white: #e4e6eb;
 $white-alt: #b0b3b8;
@@ -13,6 +13,7 @@ $blue: #1778f2;
 $blue-alt: #1d85fc;
 $yellow: #dcde81;
 $yellow-alt: #808037;
+$grey-000: #121315;
 $grey-100: #18191a;
 $grey-200: #242526;
 $grey-300: #3a3b3c;
@@ -30,7 +31,7 @@ $text: null !default;
 $subtext: null !default;
 $btntext: null !default;
 
-@if $varient == "dark" {
+@if $variant == "dark" {
   $base: $grey-100;
   $surface0: $grey-200;
   $surface1: $grey-300;
@@ -40,8 +41,8 @@ $btntext: null !default;
   $btntext: $white;
 }
 
-@if $varient == "light" {
-  $base: $grey-900;
+@if $variant == "light" {
+  $base: $grey-800;
   $surface0: $grey-900;
   $surface1: $grey-800;
   $surface2: $grey-700;
@@ -50,6 +51,16 @@ $btntext: null !default;
   $btntext: $grey-500;
 }
 
+@if $variant == "amoled" {
+  $base: $black;
+  $surface0: $grey-000;
+  $surface1: $black;
+  $surface2: $grey-200;
+  $text: $white;
+  $subtext: $white-alt;
+  $btntext: $white;
+}
+
 $font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
 $header-font: "Facebook";
 
diff --git a/src/scss/common.scss b/src/scss/common.scss
index 4a9a291..4c3bd77 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -33,6 +33,12 @@ button {
   cursor: pointer;
 }
 
+button {
+  font-size: inherit;
+  font-weight: inherit;
+  font-family: inherit;
+}
+
 html {
   color: $text;
   font-family: $font;
@@ -197,6 +203,7 @@ footer#footer {
 }
 
 .btn {
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -492,6 +499,16 @@ object.inner {
   }
 }
 
+.ilang {
+  i + span:not(empty) {
+    margin-left: $inner-gap / 2;
+  }
+
+  span:empty {
+    display: none;
+  }
+}
+
 #toast-container {
   position: fixed;
   top: $header-height;
diff --git a/src/scss/people.scss b/src/scss/people.scss
index 4511aa8..84a4f4c 100644
--- a/src/scss/people.scss
+++ b/src/scss/people.scss
@@ -9,16 +9,20 @@ main#main {
 		font-size: 3rem;
 		margin-bottom: 0;
 	}
+
+	> hr {
+		margin-bottom: $outer-gap;
+	}
 }
 
 #people-container {
 	display: grid;
 	width: 100%;
-	padding: $inner-gap;
-	margin-bottom: $outer-gap;
 	grid-template-columns: repeat(auto-fill, minmax($profile-width, 1fr) );
 	grid-auto-rows: max-content;
 	grid-gap: 2em;
+	padding-left: $outer-gap;
+	padding-right: $outer-gap;
 
 	.profile {
 		width: $profile-width;
@@ -42,5 +46,12 @@ main#main {
 			margin-bottom: $inner-gap;
 		}
 	}
+}
 
+#no-people {
+	font-weight: bold;
+	font-size: 1.2em;
+	width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
 }
diff --git a/src/scss/post.scss b/src/scss/post.scss
index 8913be0..5d78991 100644
--- a/src/scss/post.scss
+++ b/src/scss/post.scss
@@ -13,3 +13,14 @@
 #new-post {
   width: 100%;
 }
+
+#no-posts {
+	span {
+		display: block;
+	}
+
+	.no-posts-title {
+		font-size: 1.4em;
+		font-weight: bold;
+	}
+}
diff --git a/src/scss/settings.scss b/src/scss/settings.scss
index eb8463d..ca5cc43 100644
--- a/src/scss/settings.scss
+++ b/src/scss/settings.scss
@@ -1,9 +1,12 @@
 @import "./variables";
 @import "./mixins";
 
+main#main {
+	padding: $outer-gap;
+	padding-bottom: 0;
+}
+
 #settings {
-	margin: 0 $outer-gap;
-	margin-bottom: $outer-gap;
 	max-width: $content-width * 1.5;
 	min-width: $content-width;
 	width: 100%;