#258 Fix var / add max with / beautify sass

.jsbeautifyrc

@@ -1,41 +1,50 @@
 {
-  "editorconfig"         : true,
+  "editorconfig": true,
-  "indent_size"          : 2,
+  "indent_char": " ",
+  "force_indentation": true,
+  "preserve_newlines": false,
+  "indent_with_tabs": false,
+  "keep_array_indentation": false,
+  "break_chained_methods": false,
+  "indent_scripts": "keep",
+  "brace_style": "collapse",
+  "space_before_conditional": true,
+  "unescape_strings": false,
+  "jslint_happy": false,
+  "end_with_newline": true,
+  "wrap_line_length": "0",
+  "indent_inner_html": true,
+  "comma_first": false,
+  "e4x": true,
+  "indent_empty_lines": false,
+
+  "beautifiers": [
+    "JS-Beautify",
+    "Prettier",
+    "Pretty Diff",
+    "ESLint"
+  ],
   "html": {
-    "indent_size"        : 4,
+    "allowed_file_extensions": ["htm", "html", "xhtml", "xml"],
-    "indent_char"        : " ",
+    "indent_size": 4,
-    "end_with_newline"   : true,
+    "wrap_attributes": "auto",
-    "wrap_attributes"    : "force-aligned",
+    "unformatted": ["img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "svg"]
-    "brace_style"        : "end-expand",
-    "unformatted"        : ["abbr", "area", "audio", "b", "bdi", "bdo", "br","canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt", "link", "meta", "option", "script"],
-    "beautifiers"        : [
-      "JS-Beautify"
-    ],
-    "js": {
-            "indent_size": 2
-        },
-        "css": {
-            "indent_size": 2
-        }
   },
   "css": {
-    "beautifiers"        : [
+    "allowed_file_extensions": ["css", "scss", "sass", "less"],
-        "Prettier",
+    "indent_size": 2,
-        "Pretty Diff",
+    "align_assignments": true,
-        "JS-Beautify"
+    "end_with_comma": true
-      ],
-    "align_assignments"  : true,
-    "indent_size"        : 2,
-    "end_with_comma"     : true,
-    "end_with_newline"   : true
   },
-   "JavaScript": {
+  "js": {
-    "indent_size"        : 2,
+    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
-    "indent_char"        : " ",
+    "indent_size": 2,
-    "align_assignments"  : true,
+    "indent_level": 0,
-    "preserve-newlines"  : true,
+    "quotes": "single",
-    "beautifiers"        : [
+    "align_assignments": true,
-      "Pretty Diff"
+    "space_after_anon_function": true,
-    ]
+    "space_in_empty_paren": true,
+    "end_with_comma": true,
+    "end_with_semicolon": true
   }
 }

gh-pages/index.src.html

@@ -195,7 +195,7 @@
                     <p :style="'color: ' + data.brightPurple">
                          &block;&block;&block; <span>*** AaBbMmYyZz . Color 14 ---</span>  &block;&block;&block;
                     </p>
-                    <p :style="'color: ' + data.blabrightCyanck">
+                    <p :style="'color: ' + data.brightCyan">
                          &block;&block;&block; <span>*** AaBbMmYyZz . Color 15 ---</span>  &block;&block;&block;
                     </p>
                     <p :style="'color: ' + data.brightWhite">

gh-pages/sass/main.scss

@@ -1,58 +1,16 @@
-@mixin m360 {
+@mixin m360  { @media (min-width: 360px)  { @content; } }
-  @media (min-width: 359px) {
+@mixin m450  { @media (min-width: 450px)  { @content; } }
-    @content;
+@mixin m576  { @media (min-width: 576px)  { @content; } }
-  }
+@mixin m600  { @media (min-width: 600px)  { @content; } }
-}
+@mixin m650  { @media (min-width: 650px)  { @content; } }
-@mixin m450 {
+@mixin m768  { @media (min-width: 768px)  { @content; } }
-  @media (min-width: 449px) {
+@mixin m800  { @media (min-width: 800px)  { @content; } }
-    @content;
+@mixin m900  { @media (min-width: 900px)  { @content; } }
-  }
+@mixin m992  { @media (min-width: 992px)  { @content; } }
-}
+@mixin m1200 { @media (min-width: 1200px) { @content; } }
-@mixin m576 {
+@mixin m1400 { @media (min-width: 1400px) { @content; } }
-  @media (min-width: 575px) {
+@mixin m1800 { @media (min-width: 1800px) { @content; } }
-    @content;
+@mixin m2200 { @media (min-width: 2200px) { @content; } }
-  }
-}
-@mixin m600 {
-  @media (min-width: 599px) {
-    @content;
-  }
-}
-@mixin m768 {
-  @media (min-width: 767px) {
-    @content;
-  }
-}
-@mixin m900 {
-  @media (min-width: 889px) {
-    @content;
-  }
-}
-@mixin m992 {
-  @media (min-width: 991px) {
-    @content;
-  }
-}
-@mixin m1200 {
-  @media (min-width: 1199px) {
-    @content;
-  }
-}
-@mixin m1400 {
-  @media (min-width: 1399px) {
-    @content;
-  }
-}
-@mixin m1800 {
-  @media (min-width: 1799px) {
-    @content;
-  }
-}
-@mixin m2200 {
-  @media (min-width: 2199px) {
-    @content;
-  }
-}
 
 a,
 abbr,
@@ -137,11 +95,8 @@ var,
 video {
   margin        : 0;
   padding       : 0;
-
   vertical-align: baseline;
-
   border        : 0;
-
   font          : inherit;
 }
 
@@ -162,7 +117,6 @@ section {
 
 body {
   background-color: #e7e7e7;
-
   font-family     : "Open Sans", sans-serif;
   font-size       : 1.6rem;
   line-height     : 1;
@@ -198,13 +152,11 @@ q {
 .cd-tab-filter-wrapper:after {
   display: table;
   clear  : both;
-
   content: "";
 }
 
 table {
   border-spacing : 0;
-
   border-collapse: collapse;
 }
 
@@ -226,18 +178,15 @@ html {
 
 a {
   text-decoration: none;
-
   color          : #41307c;
 }
 
 .cd-header {
   position: relative;
-
   height  : 150px;
 
   h1 {
     color      : #fff;
-
     font-size  : 2.4rem;
     font-weight: 300;
   }
@@ -254,15 +203,27 @@ a {
 
 .cd-main-content {
   position  : relative;
-
   min-height: 100vh;
+  @include m360 {}
+  @include m450 {}
+  @include m576 {}
+  @include m650 {}
+  @include m768 {}
+  @include m900 {}
+  @include m992 {}
+  @include m1200 {}
+  @include m1400 {
+    max-width: 72%;
+    margin: 0 auto;
+  }
+  @include m1800 {}
+  @include m2200 {}
 
   &.is-fixed {
     .cd-tab-filter-wrapper {
       position: fixed;
       top     : 0;
       left    : 0;
-
       width   : 100%;
     }
 
@@ -272,15 +233,12 @@ a {
 
     .cd-filter {
       position: fixed;
-
       overflow: hidden;
-
       height  : 100vh;
 
       form {
         overflow                  : auto;
         -webkit-overflow-scrolling: touch;
-
         height                    : 100vh;
       }
     }
@@ -303,7 +261,6 @@ a {
 
 .cd-tab-filter-wrapper {
   z-index           : 1;
-
   background-color  : #fff;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
   box-shadow        : 0 1px 1px rgba(0, 0, 0, 0.08);
@@ -312,7 +269,6 @@ a {
 .cd-tab-filter {
   position: relative;
   z-index : 1;
-
   width   : 140px;
   height  : 50px;
   margin  : 0 auto;
@@ -322,19 +278,15 @@ a {
     top               : 50%;
     right             : 14px;
     bottom            : auto;
-
     display           : inline-block;
-
     width             : 1pc;
     height            : 1pc;
-
     content           : "";
     -webkit-transition: all 0.3s;
     transition        : all 0.3s;
     -webkit-transform : translateY(-50%);
     transform         : translateY(-50%);
     pointer-events    : none;
-
     background        : url("../img/cd-icon-arrow.svg") center center no-repeat;
   }
 
@@ -342,7 +294,6 @@ a {
     position          : absolute;
     top               : 0;
     left              : 0;
-
     background-color  : #fff;
     -webkit-box-shadow: inset 0 -2px 0 #41307c;
     box-shadow        : inset 0 -2px 0 #41307c;
@@ -358,11 +309,9 @@ a {
 
   a {
     display     : block;
-
     width       : 140px;
     height      : 50px;
     padding-left: 14px;
-
     line-height : 50px;
 
     &.selected {
@@ -394,7 +343,6 @@ a {
 @media only screen and (min-width: 768px) {
   .cd-tab-filter {
     width : auto;
-
     cursor: auto;
 
     &::after {
@@ -403,9 +351,7 @@ a {
 
     ul {
       position          : static;
-
       text-align        : center;
-
       background        : 0 0;
       -webkit-box-shadow: none;
       box-shadow        : none;
@@ -427,11 +373,8 @@ a {
     a {
       width         : auto;
       padding       : 0 1em;
-
       text-transform: uppercase;
-
       color         : #9a9a9a;
-
       font-size     : 1.3rem;
       font-weight   : 700;
     }
@@ -465,10 +408,8 @@ a {
 @media only screen and (min-width: 1170px) {
   .cd-tab-filter {
     float             : right;
-
     width             : 100%;
     margin            : 0;
-
     -webkit-transition: width 0.3s;
     transition        : width 0.3s;
 
@@ -484,31 +425,25 @@ a {
 
   li {
     display           : inline-block;
-
     margin-right      : 2em;
     margin-bottom     : 1.6em;
-
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
     box-shadow        : 0 1px 4px rgba(0, 0, 0, 0.1);
 
     &.gap {
       display: inline-block;
-
       height : 0;
-
       opacity: 0;
     }
   }
 
   img {
     display: block;
-
     width  : 100%;
   }
 
   .cd-fail-message {
     display   : none;
-
     text-align: center;
   }
 }
@@ -522,7 +457,6 @@ a {
       &:after {
         display: table;
         clear  : both;
-
         content: "";
       }
     }
@@ -536,9 +470,7 @@ a {
 @media only screen and (min-width: 1170px) {
   .cd-gallery {
     float             : right;
-
     padding           : 50px 2%;
-
     -webkit-transition: width 0.3s;
     transition        : width 0.3s;
 
@@ -555,7 +487,6 @@ a {
 .cd-filter {
   width                      : 280px;
   height                     : 100%;
-
   -webkit-transition         : -webkit-transform 0.3s, box-shadow 0.3s;
   -webkit-transition         : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
   transition                 : -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
@@ -565,18 +496,15 @@ a {
   -webkit-transform          : translateX(-100%);
   transform                  : translateZ(0);
   transform                  : translateX(-100%);
-
   background                 : #fff;
   -webkit-box-shadow         : 4px 4px 20px transparent;
   box-shadow                 : 4px 4px 20px transparent;
-
   -webkit-backface-visibility: hidden;
   backface-visibility        : hidden;
 
   &::before {
     width  : 100%;
     height : 50px;
-
     content: "";
   }
 
@@ -584,9 +512,7 @@ a {
     position   : absolute;
     z-index    : 3;
     top        : 0;
-
     height     : 50px;
-
     line-height: 50px;
   }
 }
@@ -595,9 +521,7 @@ a {
   position   : absolute;
   z-index    : 3;
   top        : 0;
-
   height     : 50px;
-
   line-height: 50px;
 }
 
@@ -608,16 +532,12 @@ a {
 
   .cd-close {
     right             : 0;
-
     width             : 60px;
-
     -webkit-transition: opacity 0.3s;
     transition        : opacity 0.3s;
     text-align        : center;
-
     opacity           : 0;
     color             : #fff;
-
     font-size         : 1.3rem;
   }
 }
@@ -629,7 +549,6 @@ a {
 .cd-filter.filter-is-visible {
   -webkit-transform : translateX(0);
   transform         : translateX(0);
-
   -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   box-shadow        : 4px 4px 20px rgba(0, 0, 0, 0.2);
 
@@ -649,14 +568,10 @@ a {
 
 .cd-filter-trigger {
   left       : 0;
-
   overflow   : hidden;
-
   width      : 60px;
-
   white-space: nowrap;
   text-indent: 100%;
-
   color      : transparent;
   background : url("../img/cd-icon-filter.svg") center center no-repeat;
 }
@@ -665,7 +580,6 @@ a {
   .cd-select::after,
   h4::before {
     top              : 50%;
-
     content          : "";
     -webkit-transform: translateY(-50%);
     -ms-transform    : translateY(-50%);
@@ -678,18 +592,14 @@ a {
 @media only screen and (min-width: 1170px) {
   .cd-filter-trigger {
     left               : 2%;
-
     width              : auto;
     padding-left       : 24px;
-
     -webkit-transition : color 0.3s;
     transition         : color 0.3s;
     text-indent        : 0;
     text-transform     : uppercase;
-
     color              : #9a9a9a;
     background-position: left center;
-
     font-size          : 1.3rem;
     font-weight        : 700;
   }
@@ -712,19 +622,15 @@ a {
 
   h4 {
     position           : relative;
-
     margin-bottom      : 0.2em;
     padding            : 10px 0 10px 20px;
-
     cursor             : pointer;
     -webkit-user-select: none;
     -moz-user-select   : none;
     -ms-user-select    : none;
     user-select        : none;
     text-transform     : uppercase;
-
     color              : #9a9a9a;
-
     font-size          : 1.3rem;
     font-weight        : 700;
   }
@@ -739,17 +645,14 @@ a {
     &::before {
       position          : absolute;
       left              : 0;
-
       width             : 1pc;
       height            : 1pc;
-
       -webkit-transition: -webkit-transform 0.3s;
       transition        : -webkit-transform 0.3s;
       transition        : transform 0.3s;
       transition        : transform 0.3s, -webkit-transform 0.3s;
       -webkit-transform : translateY(-50%);
       transform         : translateY(-50%);
-
       background        : url("../img/cd-icon-arrow.svg") center center no-repeat;
     }
 
@@ -766,7 +669,6 @@ a {
     border          : 2px solid #e6e6e6;
     border-radius   : 0;
     background-color: #fff;
-
     font-family     : "Open Sans", sans-serif;
   }
 
@@ -775,10 +677,8 @@ a {
     &[type=text] {
       width             : 100%;
       padding           : 0.8em;
-
       -webkit-box-shadow: none;
       box-shadow        : none;
-
       -webkit-appearance: none;
       -moz-appearance   : none;
       -ms-appearance    : none;
@@ -790,10 +690,8 @@ a {
   select {
     width             : 100%;
     padding           : 0.8em;
-
     -webkit-box-shadow: none;
     box-shadow        : none;
-
     -webkit-appearance: none;
     -moz-appearance   : none;
     -ms-appearance    : none;
@@ -819,7 +717,6 @@ a {
   input[type=search] {
     border-color    : transparent;
     background-color: #e6e6e6;
-
     font-size       : 1.6rem !important;
 
     &::-webkit-search-cancel-button {
@@ -834,23 +731,18 @@ a {
       position         : absolute;
       z-index          : 1;
       right            : 14px;
-
       display          : block;
-
       width            : 1pc;
       height           : 1pc;
-
       -webkit-transform: translateY(-50%);
       transform        : translateY(-50%);
       pointer-events   : none;
-
       background       : url("../img/cd-icon-arrow.svg") center center no-repeat;
     }
   }
 
   select {
     cursor   : pointer;
-
     font-size: 1.4rem;
 
     &::-ms-expand {
@@ -860,7 +752,6 @@ a {
 
   .list li {
     position     : relative;
-
     margin-bottom: 0.8em;
 
     &:last-of-type {
@@ -875,10 +766,8 @@ a {
       z-index : 2;
       top     : 0;
       left    : 0;
-
       margin  : 0;
       padding : 0;
-
       opacity : 0;
     }
   }
@@ -886,12 +775,10 @@ a {
   .checkbox-label,
   .radio-label {
     padding-left       : 24px;
-
     -webkit-user-select: none;
     -moz-user-select   : none;
     -ms-user-select    : none;
     user-select        : none;
-
     font-size          : 1.4rem;
   }
 
@@ -900,9 +787,7 @@ a {
     &::before {
       position         : absolute;
       top              : 50%;
-
       display          : block;
-
       content          : "";
       -webkit-transform: translateY(-50%);
       transform        : translateY(-50%);
@@ -914,9 +799,7 @@ a {
     &::before {
       position         : absolute;
       top              : 50%;
-
       display          : block;
-
       content          : "";
       -webkit-transform: translateY(-50%);
       transform        : translateY(-50%);
@@ -926,7 +809,6 @@ a {
   .checkbox-label::before,
   .radio-label::before {
     left  : 0;
-
     width : 1pc;
     height: 1pc;
   }
@@ -939,7 +821,6 @@ a {
   .checkbox-label::after {
     width     : 1pc;
     height    : 1pc;
-
     background: url("../img/cd-icon-check.svg") center center no-repeat;
   }
 
@@ -951,10 +832,8 @@ a {
 
     &::after {
       left            : 5px;
-
       width           : 6px;
       height          : 6px;
-
       background-color: #fff;
     }
   }
@@ -1015,40 +894,32 @@ body {
 
   h2 {
     margin-bottom: 30px;
-
     color        : #595647;
-
     font-size    : 26px;
   }
 
   h3 {
     margin   : 30px 0 20px;
-
     color    : #595647;
-
     font-size: 22px;
   }
 
   code[class*=language-],
   pre[class*=language-] {
     margin   : 0;
-
     font-size: 14px;
   }
 }
 
 .cd-header h1 {
   text-align : center;
-
   line-height: 30px;
 
   span {
     display    : block;
     overflow   : hidden;
-
     white-space: nowrap;
     text-indent: 100%;
-
     color      : #fff;
   }
 }
@@ -1069,7 +940,6 @@ body {
 
 .cd-header {
   text-align      : center;
-
   background-color: #fff;
 }
 @media only screen and (min-width: 768px) {
@@ -1094,7 +964,6 @@ body {
  */
 .code-wrap {
   position  : relative;
-
   margin-top: 15px;
 
   pre {
@@ -1105,13 +974,9 @@ body {
     position        : absolute;
     top             : 25px;
     right           : 3px;
-
     display         : inline-block;
-
     padding         : 3px 5px 2px 7px;
-
     cursor          : pointer;
-
     border          : 1px solid #d8d8d8;
     border-radius   : 3px;
     background-color: #F5F2F0;
@@ -1137,20 +1002,15 @@ body {
 .terminal {
   box-sizing: border-box;
   margin    : 0 0 50px;
-
   box-shadow: 5px 5px 11px #737373, -5px -5px 11px #b1b1b1;
 
   .bar {
     position        : relative;
-
     width           : 100%;
     height          : 25px;
-
     text-align      : center;
-
     border-radius   : 5px 5px 0 0;
     background-color: #D9D9D9;
-
     font-size       : 0;
 
     .bar__title {
@@ -1158,11 +1018,8 @@ body {
       top        : 4px;
       right      : 0;
       left       : 0;
-
       margin     : 0 auto;
-
       color      : #5e5e5e;
-
       font-family: Arial;
       font-size  : 14px;
       font-weight: 400;
@@ -1179,7 +1036,6 @@ body {
   .body {
     box-sizing   : border-box;
     padding      : 30px;
-
     border       : 1px solid #D9D9D9;
     border-radius: 0 0 5px 5px;
 
@@ -1189,10 +1045,8 @@ body {
       p {
         margin     : 0;
         padding    : 0;
-
         font-size  : 20px;
         line-height: 1.1;
-
         @include m360 {}
         @include m450 {}
         @include m576 {}
@@ -1213,22 +1067,18 @@ body {
 
         span {
           letter-spacing: 2px;
-
           font-size     : 16px;
-
           @include m360 {}
           @include m450 {}
           @include m576 {}
           @include m600 {}
           @include m768 {
             letter-spacing: 1px;
-
             font-size     : 12px;
           }
           @include m900 {}
           @include m992 {
             letter-spacing: 1.5px;
-
             font-size     : 15px;
           }
           @include m1200 {
@@ -1245,11 +1095,9 @@ body {
       font-size: 0;
 
       span {
-        display       : inline-block;
+        display: inline-block;
-
+        width  : 12.5%;
-        width         : 12.5%;
+        height : 30px;
-        height: 30px;
-
       }
     }
 
@@ -1261,13 +1109,10 @@ body {
 
 .btn {
   display         : inline-block;
-
   width           : 10px;
   height          : 10px;
   margin          : 0 4px;
-
   cursor          : pointer;
-
   border-radius   : 100px;
   background-color: #000000;
 }