Add proper css vars to user style config (#2105)

forem · Mar 18, 2019 · 2b2ecaa · 2b2ecaa
1 parent 2658185
commit 2b2ecaa
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 33 deletions.
diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
@@ -86,6 +86,7 @@ article {
   box-shadow: var(--theme-container-box-shadow, $bold-shadow);
   @media screen and (min-width: 880px) {
     border: 1px solid darken($light-medium-gray, 2%);
+    border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
   }
   @media screen and (min-width: 950px) {
     border-radius: 3px;
@@ -173,6 +174,7 @@ article {
       padding: 0px 3px 16px;
       font-weight: 500;
       color: $medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
       font-size: 13.5px;
       line-height: 1.5em;
       @media screen and (min-width: 430px) {
@@ -190,6 +192,7 @@ article {
       }
       a {
         color: $medium-gray;
+        color: var(--theme-secondary-color, $medium-gray);
         text-decoration: none;
       }
       .icon-img {

diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
@@ -217,7 +217,7 @@
       box-shadow: $bold-shadow;
       box-shadow: var(--theme-container-box-shadow, $bold-shadow);
       border-radius: 3px;
-      width: 94%;
+      width: 96%;
       margin: auto;
       position: relative;
       @media screen and (min-width: 950px) {
@@ -415,6 +415,7 @@
         text-overflow: ellipsis;
         a {
           color: #666666;
+          color: var(--theme-secondary-color, #666666);
         }
         @media screen and (min-width: 430px) {
           bottom: 90px;
@@ -582,6 +583,7 @@
       font-size: 14px;
       a {
         color: #666666;
+        color: var(--theme-secondary-color, #666666);
       }
       &:hover {
         opacity: 0.9;
@@ -608,6 +610,7 @@
       }
       .tag {
         color: $black;
+        color: var(--theme-color, $black);
         margin-right: 3px;
       }
       left: 62px;
@@ -627,6 +630,7 @@
       font-weight: 600;
       z-index: 8;
       color: darken($medium-gray, 5%);
+      color: var(--theme-secondary-color, darken($medium-gray, 5%));
     }
     .article-engagement-count {
       font-size: 13px;
@@ -912,6 +916,7 @@
           font-weight: 500;
           font-size: 0.9em;
           background: darken($light-gray, 4%);
+          background: var(--theme-background, darken($light-gray, 4%));
           a {
             color: $black;
           }
@@ -1165,6 +1170,7 @@
             margin: 10px auto;
             width: 92%;
             color: $dark-gray;
+            color: var(--theme-secondary-color, $dark-gray);
             .sponsor-learn-more {
               display: block;
               margin: 8px auto;
@@ -1196,6 +1202,7 @@
           padding-bottom: 8px;
           a {
             color: $black;
+            color: var(--theme-color, $black);
             font-weight: 500;
           }
         }
@@ -1342,7 +1349,9 @@
         padding: 8px 0px;
         font-size: 0.93em;
         color: darken($sky-blue, 17%);
+        color: var(--theme-color, darken($sky-blue, 17%));
         background: white;
+        background: var(--theme-container-background, #fff);
         display: block;
         width: 92%;
         text-align: left;

diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -525,7 +525,6 @@ a.header-link {
     padding-bottom: 5px;
     margin: 0;
     width: 96%;
-    color: $black;
     font-size: 0.95em;
     line-height: 1.35em;
     overflow: hidden;
@@ -653,6 +652,7 @@ a.header-link {
     border-top-left-radius: 3px;
     border-top-left-radius: 3px;
     color: $dark-gray;
+    color: var(--theme-secondary-color, $dark-gray);
     position: relative;
     // background:$light-gray;
     .comment-date {
@@ -664,6 +664,7 @@ a.header-link {
       text-align: right;
       a {
         color: $medium-gray;
+        color: var(--theme-secondary-color, $dark-gray);
       }
     }
     .dropbtn {
@@ -757,6 +758,7 @@ a.header-link {
     }
     a {
       color: lighten($dark-gray, 3%);
+      color: var(--theme-secondary-color, $dark-gray);
     }
   }
   .reaction-button,
@@ -929,6 +931,7 @@ a.header-link {
     padding: 0px;
     border: 1px solid $light-medium-gray;
     background: white;
+    background: var(--theme-container-background, #fff);
     &.comment-created-via-fetch {
       animation: comment-create 1.2s;
       .body {
@@ -971,5 +974,6 @@ a.header-link {
   }
   to {
     background-color: white;
+    background-color: var(--theme-container-background, #fff);
   }
 }
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss
@@ -17,6 +17,7 @@ footer{
     }
     a{
       color: $black;
+      color: var(--theme-color, $black);
       display:inline-block;
       margin-right: 12px;
       &:hover{
@@ -26,7 +27,9 @@ footer{
     .inner-footer-container{
       max-width: 820px;
       background: $tan;
+      background: var(--theme-container-background, $tan);
       border: 1px solid darken($light-medium-gray, 2%);
+      border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
       box-shadow: $bold-shadow;
       box-shadow: var(--theme-container-box-shadow, $bold-shadow);
       padding:50px 30px;

diff --git a/app/assets/stylesheets/index-comments.scss b/app/assets/stylesheets/index-comments.scss
@@ -4,6 +4,7 @@
   text-align:left;
   padding-bottom:calc(0.6vw + 5px);
   background:white;
+  background: var(--theme-container-background, white);
   border-radius:3px;
   border:1px solid $outline-color;
   border: var(--theme-container-border, 1px solid $outline-color);
@@ -25,6 +26,7 @@
     a{
       padding:5px 10px;
       color:$dark-gray;
+      color: var(--theme-color, $dark-gray);
       font-weight:500;
       font-size:0.85em;
     }
@@ -44,6 +46,7 @@
   }
   a{
     color:$black;
+    color: var(--theme-color, $black);
     display:block;
     padding-left:13px;
     padding-right:13px;
@@ -59,13 +62,15 @@
     .comment-date{
       font-size:0.7em;
       color:$medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
       margin-left:5px;
       vertical-align:2px;
       display:inline-block;
     }
     .comment-preview{
       font-size:0.9em;
       color:$medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
     }
     @media screen and ( min-width: 430px ){
       padding:5px 0px;

diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss
@@ -9,7 +9,8 @@
     margin-left: 25px;
   }
   a{
-    color:rgb(19, 19, 19);
+    color:$black;
+    color: var(--theme-color, $black);
   }
   .single-other-article{
     width:94%;
@@ -58,6 +59,7 @@
       margin:0;
       font-weight:500;
       color:lighten($medium-gray,4%);
+      color: var(--theme-secondary-color, lighten($medium-gray,4%));
       font-size:1em;
       @media screen and ( min-width: 480px ){
         font-size:0.88em;

diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
@@ -51,6 +51,7 @@ pre {
 
 a {
   color: $sky-blue;
+  color: var(--theme-secondary-color, $sky-blue);
   text-decoration:none;
   &:hover{
     opacity:0.9;

diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss
@@ -74,6 +74,7 @@
         width: 210px;
         display:inline-block;
         color: $black;
+        color: var(--theme-color, $black);
         &.selected {
           background: $purple;
         }

diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss
@@ -37,6 +37,7 @@
     .primary-sticky-nav-author-summary{
       font-weight: 400;
       color: $medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
       padding: 10px 0px 5px;
       font-style: italic;
       font-size:0.88em;
@@ -117,6 +118,7 @@
       margin-top:9px;
       font-size: 0.8em;
       color: $medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
     }
     &:hover{
       border: 1px solid darken($light-medium-gray, 17%);
@@ -137,6 +139,7 @@
       font-weight: 800;
       margin-bottom: 2px;
       color: $medium-gray;
+      color: var(--theme-secondary-color, $medium-gray);
     }
     .value{
       display: inline-block;

diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss
@@ -222,6 +222,7 @@
       padding: 5px 10px;
       text-align: left;
       background: $tan;
+      background: var(--theme-top-bar-background, $tan);
       border: 1px solid rgb(219, 222, 225);
       border-top: 0px;
       display: none;
@@ -260,10 +261,12 @@
         }
         &:hover {
           background: darken($tan, 2%);
+          background: var(--theme-top-bar-background, darken($tan, 2%));
         }
       }
       a {
         color: $black;
+        color: var(--theme-color, $black);
       }
     }
   }

diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
@@ -8,6 +8,7 @@
   max-width:92%;
   margin: 30px auto 20px;
   background: white;
+  background: var(--theme-container-background, #fff);
   border-radius: 3px;
   @media screen and ( min-width: 950px ){
     max-width:98%;
@@ -162,6 +163,7 @@
         margin:0;
         font-style: italic;
         color:$medium-gray;
+        color: var(--theme-secondary-color, $medium-gray);
         width: 94%;
         font-size:0.9em;
         margin-top:12px;
@@ -251,6 +253,7 @@
         font-weight: 800;
         margin-bottom: 2px;
         color: $medium-gray;
+        color: var(--theme-secondary-color, $medium-gray);
       }
       .value{
         display: inline-block;

diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
@@ -35,29 +35,6 @@ $bold-shadow: 3px 3px 0px darken($light-medium-gray, 13%);
 $ease-in-cubic : cubic-bezier(0.55, 0.055, 0.675, 0.19);
 $ease-out-cubic : cubic-bezier(0.215, 0.61, 0.355, 1);
 
-body.night-theme {
-  #top-bar,
-  #page-content,
-  footer {
-    & {
-      background-color: #ececcc !important;
-
-      &,
-      & *:not(.highlight) > .highlight,
-      & iframe,
-      & video,
-      & img {
-        -webkit-filter: invert(100%);
-        filter: invert(100%);
-      }
-
-      & * {
-        background-blend-mode: difference;
-      }
-    }
-  }
-}
-
 body.sans-serif-article-body {
   .body {
     font-family: $helvetica;
@@ -67,3 +44,13 @@ body.sans-serif-article-body {
     font-size: 0.98em;
   }
 }
+body.comic-sans-article-body {
+  .body {
+    font-family: "Comic Sans MS", cursive, sans-serif;
+  }
+  .body p {
+    font-family: "Comic Sans MS", cursive, sans-serif;
+    font-size: 0.98em;
+  }
+
+}
diff --git a/app/models/user.rb b/app/models/user.rb
@@ -114,10 +114,10 @@ class User < ApplicationRecord
                            message: "%{value} must be either v1 or v2" }
 
   validates :config_theme,
-              inclusion: { in: %w(default night_theme),
+              inclusion: { in: %w[default night_theme],
                            message: "%{value} must be either default or night theme" }
   validates :config_font,
-              inclusion: { in: %w(default sans_serif),
+              inclusion: { in: %w[default sans_serif comic_sans],
                            message: "%{value} must be either default or sans serif" }
   validates :shipping_country,
               length: { in: 2..2 },
@@ -131,7 +131,7 @@ class User < ApplicationRecord
                 length: { maximum: 500 }
   validates :mentee_description, :mentor_description,
               length: { maximum: 1000 }
-  validates :inbox_type, inclusion: { in: ["open", "private"] }
+  validates :inbox_type, inclusion: { in: %w[open private] }
   validate  :conditionally_validate_summary
   validate  :validate_mastodon_url
   validate  :validate_feed_url