Adding paperclip for avatars, fixing design of the public pages

4 files changed, 53 insertions, 55 deletions

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
deleted file mode 100644
index f9cd5b348..000000000
--- a/app/assets/stylesheets/application.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 000000000..91b0d12fe
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,39 @@
+$primary-color: #ff7473;
+$secondary-color: #ffc952;
+$tertiary-color: #47b8e0;
+$quaternary-color: #34314c;
+$background-color: #fff;
+
+@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic");
+@import "font-awesome-sprockets";
+@import "font-awesome";
+
+body {
+  font-family: 'Noto Sans', sans-serif;
+  background: $secondary-color;
+  font-size: 13px;
+  line-height: 18px;
+  color: $quaternary-color;
+}
+
+.container {
+  width: 800px;
+  margin: 0 auto;
+}
+
+.footer {
+  text-align: center;
+  padding: 100px 0;
+  font-size: 12px;
+  color: lighten($quaternary-color, 15%);
+
+  .mastodon-link {
+    color: $quaternary-color;
+    text-decoration: none;
+    font-weight: bold;
+  }
+}
+
+
+@import 'home';
+@import 'profile';
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
index 7c3dbfc31..e69de29bb 100644
--- a/app/assets/stylesheets/home.scss
+++ b/app/assets/stylesheets/home.scss
@@ -1,10 +0,0 @@
-.footer {
-  text-align: center;
-  padding: 100px 0;
-
-  .mastodon-link {
-    color: #566270;
-    text-decoration: none;
-    font-size: 16px;
-  }
-}
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
index 3ef488882..5508b8424 100644
--- a/app/assets/stylesheets/profile.scss
+++ b/app/assets/stylesheets/profile.scss
@@ -1,20 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic);
-
-@import "font-awesome-sprockets";
-@import "font-awesome";
-
-body {
-  font-family: 'Noto Sans', sans-serif;
-  background: #E0E3DA;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.container {
-  width: 800px;
-  margin: 0 auto;
-}
-
 .card {
   padding-top: 20px;
 
@@ -25,7 +8,7 @@ body {
     small {
       display: block;
       font-size: 14px;
-      color: #566270;
+      color: lighten($quaternary-color, 15%);
     }
   }
 
@@ -56,12 +39,12 @@ body {
   box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
 
   .entry {
-    border-bottom: 1px solid #E0E3DA;
-    background: #FFFFF3;
-    border-left: 2px solid #A593E0;
+    border-bottom: 1px solid darken($background-color, 10%);
+    background: $background-color;
+    border-left: 2px solid $primary-color;
 
     &.entry-reblog {
-      border-left: 2px solid #566270;
+      border-left: 2px solid $tertiary-color;
     }
 
     &:last-child {
@@ -77,10 +60,10 @@ body {
 
     .name {
       text-decoration: none;
-      color: #566270;
+      color: lighten($quaternary-color, 15%);
 
       strong {
-        color: #000;
+        color: $quaternary-color;
       }
 
       &:hover {
@@ -92,13 +75,13 @@ body {
   }
 
   .pre-header {
-    border-bottom: 1px solid #E0E3DA;
-    color: #566270;
+    border-bottom: 1px solid darken($background-color, 10%);
+    color: $tertiary-color;
     padding: 5px 10px;
     padding-left: 8px;
 
     .name {
-      color: #566270;
+      color: $tertiary-color;
       font-weight: bold;
       text-decoration: none;
 
@@ -116,7 +99,7 @@ body {
 
   .time {
     text-decoration: none;
-    color: #566270;
+    color: lighten($quaternary-color, 15%);
 
     &:hover {
       text-decoration: underline;
@@ -125,7 +108,7 @@ body {
 
   .counters {
     margin-top: 15px;
-    color: #566270;
+    color: lighten($quaternary-color, 15%);
     cursor: default;
     padding: 10px;
     padding-top: 0;
@@ -134,10 +117,11 @@ body {
     .counter {
       display: inline-block;
       margin-right: 10px;
+      color: lighten($quaternary-color, 50%);
     }
 
     .conversation-link {
-      color: #A593E0;
+      color: $primary-color;
       text-decoration: underline;
       float: right;
     }