minima-rock 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/LICENSE.txt +22 -22
- data/README.md +3 -3
- data/_data/navigation.yml +4 -2
- data/_data/social.yml +21 -21
- data/_includes/disqus_comments.html +20 -20
- data/_includes/footer.html +34 -34
- data/_includes/google-analytics.html +9 -9
- data/_includes/head.html +12 -12
- data/_includes/header.html +23 -23
- data/_includes/share_bar.html +52 -52
- data/_includes/social.html +19 -19
- data/_includes/tags_archive.html +14 -14
- data/_includes/tags_bar.html +10 -10
- data/_layouts/default.html +20 -20
- data/_layouts/home.html +34 -34
- data/_layouts/page.html +14 -14
- data/_layouts/post.html +35 -35
- data/_sass/minima/_base.scss +256 -256
- data/_sass/minima/_layout.scss +314 -314
- data/_sass/minima/_share.scss +86 -86
- data/_sass/minima/_syntax-highlighting.scss +71 -71
- data/_sass/minima.scss +57 -57
- data/assets/css/style.scss +5 -5
- data/assets/js/color.js +46 -46
- data/assets/minima-social-icons.svg +39 -39
- metadata +2 -2
data/_sass/minima/_share.scss
CHANGED
@@ -1,87 +1,87 @@
|
|
1
|
-
/* Share Bar */
|
2
|
-
#share-bar {
|
3
|
-
font-size: 26px;
|
4
|
-
}
|
5
|
-
|
6
|
-
/* All buttons */
|
7
|
-
.share-buttons a {
|
8
|
-
text-decoration: none;
|
9
|
-
}
|
10
|
-
|
11
|
-
/* Each button */
|
12
|
-
.share-button {
|
13
|
-
margin: 0px;
|
14
|
-
margin-bottom: 10px;
|
15
|
-
margin-right: 3px;
|
16
|
-
border: 1px solid #D3D6D2;
|
17
|
-
border-radius: 3px;
|
18
|
-
padding: 5px 10px 5px 10px;
|
19
|
-
}
|
20
|
-
.share-button:hover {
|
21
|
-
opacity: 1;
|
22
|
-
color: #ffffff;
|
23
|
-
}
|
24
|
-
|
25
|
-
/* Facebook button */
|
26
|
-
.fa-facebook-official {
|
27
|
-
color: #3b5998;
|
28
|
-
}
|
29
|
-
.fa-facebook-official:hover {
|
30
|
-
background-color: #3b5998;
|
31
|
-
}
|
32
|
-
|
33
|
-
/* Twitter button */
|
34
|
-
.fa-twitter {
|
35
|
-
color: #55acee;
|
36
|
-
}
|
37
|
-
.fa-twitter:hover {
|
38
|
-
background-color: #55acee;
|
39
|
-
}
|
40
|
-
|
41
|
-
/* Google-PLus button */
|
42
|
-
.fa-google-plus {
|
43
|
-
color: #dd4b39;
|
44
|
-
}
|
45
|
-
.fa-google-plus:hover {
|
46
|
-
background-color: #dd4b39;
|
47
|
-
}
|
48
|
-
|
49
|
-
/* Pinterest button */
|
50
|
-
.fa-pinterest-p {
|
51
|
-
color: #cb2027;
|
52
|
-
}
|
53
|
-
.fa-pinterest-p:hover {
|
54
|
-
background-color: #cb2027;
|
55
|
-
}
|
56
|
-
|
57
|
-
/* Tumblr button */
|
58
|
-
.fa-tumblr {
|
59
|
-
color: #32506d;
|
60
|
-
}
|
61
|
-
.fa-tumblr:hover {
|
62
|
-
background-color: #32506d;
|
63
|
-
}
|
64
|
-
|
65
|
-
/* Reddit button */
|
66
|
-
.fa-reddit-alien {
|
67
|
-
color: #ff4500;
|
68
|
-
}
|
69
|
-
.fa-reddit-alien:hover {
|
70
|
-
background-color: #ff4500;
|
71
|
-
}
|
72
|
-
|
73
|
-
/* LinkedIn button */
|
74
|
-
.fa-linkedin {
|
75
|
-
color: #007bb5;
|
76
|
-
}
|
77
|
-
.fa-linkedin:hover {
|
78
|
-
background-color: #007bb5;
|
79
|
-
}
|
80
|
-
|
81
|
-
/* Email button */
|
82
|
-
.fa-envelope {
|
83
|
-
color: #444444;
|
84
|
-
}
|
85
|
-
.fa-envelope:hover {
|
86
|
-
background-color: #444444;
|
1
|
+
/* Share Bar */
|
2
|
+
#share-bar {
|
3
|
+
font-size: 26px;
|
4
|
+
}
|
5
|
+
|
6
|
+
/* All buttons */
|
7
|
+
.share-buttons a {
|
8
|
+
text-decoration: none;
|
9
|
+
}
|
10
|
+
|
11
|
+
/* Each button */
|
12
|
+
.share-button {
|
13
|
+
margin: 0px;
|
14
|
+
margin-bottom: 10px;
|
15
|
+
margin-right: 3px;
|
16
|
+
border: 1px solid #D3D6D2;
|
17
|
+
border-radius: 3px;
|
18
|
+
padding: 5px 10px 5px 10px;
|
19
|
+
}
|
20
|
+
.share-button:hover {
|
21
|
+
opacity: 1;
|
22
|
+
color: #ffffff;
|
23
|
+
}
|
24
|
+
|
25
|
+
/* Facebook button */
|
26
|
+
.fa-facebook-official {
|
27
|
+
color: #3b5998;
|
28
|
+
}
|
29
|
+
.fa-facebook-official:hover {
|
30
|
+
background-color: #3b5998;
|
31
|
+
}
|
32
|
+
|
33
|
+
/* Twitter button */
|
34
|
+
.fa-twitter {
|
35
|
+
color: #55acee;
|
36
|
+
}
|
37
|
+
.fa-twitter:hover {
|
38
|
+
background-color: #55acee;
|
39
|
+
}
|
40
|
+
|
41
|
+
/* Google-PLus button */
|
42
|
+
.fa-google-plus {
|
43
|
+
color: #dd4b39;
|
44
|
+
}
|
45
|
+
.fa-google-plus:hover {
|
46
|
+
background-color: #dd4b39;
|
47
|
+
}
|
48
|
+
|
49
|
+
/* Pinterest button */
|
50
|
+
.fa-pinterest-p {
|
51
|
+
color: #cb2027;
|
52
|
+
}
|
53
|
+
.fa-pinterest-p:hover {
|
54
|
+
background-color: #cb2027;
|
55
|
+
}
|
56
|
+
|
57
|
+
/* Tumblr button */
|
58
|
+
.fa-tumblr {
|
59
|
+
color: #32506d;
|
60
|
+
}
|
61
|
+
.fa-tumblr:hover {
|
62
|
+
background-color: #32506d;
|
63
|
+
}
|
64
|
+
|
65
|
+
/* Reddit button */
|
66
|
+
.fa-reddit-alien {
|
67
|
+
color: #ff4500;
|
68
|
+
}
|
69
|
+
.fa-reddit-alien:hover {
|
70
|
+
background-color: #ff4500;
|
71
|
+
}
|
72
|
+
|
73
|
+
/* LinkedIn button */
|
74
|
+
.fa-linkedin {
|
75
|
+
color: #007bb5;
|
76
|
+
}
|
77
|
+
.fa-linkedin:hover {
|
78
|
+
background-color: #007bb5;
|
79
|
+
}
|
80
|
+
|
81
|
+
/* Email button */
|
82
|
+
.fa-envelope {
|
83
|
+
color: #444444;
|
84
|
+
}
|
85
|
+
.fa-envelope:hover {
|
86
|
+
background-color: #444444;
|
87
87
|
}
|
@@ -1,71 +1,71 @@
|
|
1
|
-
/**
|
2
|
-
* Syntax highlighting styles
|
3
|
-
*/
|
4
|
-
.highlight {
|
5
|
-
background: #fff;
|
6
|
-
@extend %vertical-rhythm;
|
7
|
-
|
8
|
-
.highlighter-rouge & {
|
9
|
-
background: #eef;
|
10
|
-
}
|
11
|
-
|
12
|
-
.c { color: #998; font-style: italic } // Comment
|
13
|
-
.err { color: #a61717; background-color: #e3d2d2 } // Error
|
14
|
-
.k { font-weight: bold } // Keyword
|
15
|
-
.o { font-weight: bold } // Operator
|
16
|
-
.cm { color: #998; font-style: italic } // Comment.Multiline
|
17
|
-
.cp { color: #999; font-weight: bold } // Comment.Preproc
|
18
|
-
.c1 { color: #998; font-style: italic } // Comment.Single
|
19
|
-
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
|
20
|
-
.gd { color: #000; background-color: #fdd } // Generic.Deleted
|
21
|
-
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
|
22
|
-
.ge { font-style: italic } // Generic.Emph
|
23
|
-
.gr { color: #a00 } // Generic.Error
|
24
|
-
.gh { color: #999 } // Generic.Heading
|
25
|
-
.gi { color: #000; background-color: #dfd } // Generic.Inserted
|
26
|
-
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
|
27
|
-
.go { color: #888 } // Generic.Output
|
28
|
-
.gp { color: #555 } // Generic.Prompt
|
29
|
-
.gs { font-weight: bold } // Generic.Strong
|
30
|
-
.gu { color: #aaa } // Generic.Subheading
|
31
|
-
.gt { color: #a00 } // Generic.Traceback
|
32
|
-
.kc { font-weight: bold } // Keyword.Constant
|
33
|
-
.kd { font-weight: bold } // Keyword.Declaration
|
34
|
-
.kp { font-weight: bold } // Keyword.Pseudo
|
35
|
-
.kr { font-weight: bold } // Keyword.Reserved
|
36
|
-
.kt { color: #458; font-weight: bold } // Keyword.Type
|
37
|
-
.m { color: #099 } // Literal.Number
|
38
|
-
.s { color: #d14 } // Literal.String
|
39
|
-
.na { color: #008080 } // Name.Attribute
|
40
|
-
.nb { color: #0086B3 } // Name.Builtin
|
41
|
-
.nc { color: #458; font-weight: bold } // Name.Class
|
42
|
-
.no { color: #008080 } // Name.Constant
|
43
|
-
.ni { color: #800080 } // Name.Entity
|
44
|
-
.ne { color: #900; font-weight: bold } // Name.Exception
|
45
|
-
.nf { color: #900; font-weight: bold } // Name.Function
|
46
|
-
.nn { color: #555 } // Name.Namespace
|
47
|
-
.nt { color: #000080 } // Name.Tag
|
48
|
-
.nv { color: #008080 } // Name.Variable
|
49
|
-
.ow { font-weight: bold } // Operator.Word
|
50
|
-
.w { color: #bbb } // Text.Whitespace
|
51
|
-
.mf { color: #099 } // Literal.Number.Float
|
52
|
-
.mh { color: #099 } // Literal.Number.Hex
|
53
|
-
.mi { color: #099 } // Literal.Number.Integer
|
54
|
-
.mo { color: #099 } // Literal.Number.Oct
|
55
|
-
.sb { color: #d14 } // Literal.String.Backtick
|
56
|
-
.sc { color: #d14 } // Literal.String.Char
|
57
|
-
.sd { color: #d14 } // Literal.String.Doc
|
58
|
-
.s2 { color: #d14 } // Literal.String.Double
|
59
|
-
.se { color: #d14 } // Literal.String.Escape
|
60
|
-
.sh { color: #d14 } // Literal.String.Heredoc
|
61
|
-
.si { color: #d14 } // Literal.String.Interpol
|
62
|
-
.sx { color: #d14 } // Literal.String.Other
|
63
|
-
.sr { color: #009926 } // Literal.String.Regex
|
64
|
-
.s1 { color: #d14 } // Literal.String.Single
|
65
|
-
.ss { color: #990073 } // Literal.String.Symbol
|
66
|
-
.bp { color: #999 } // Name.Builtin.Pseudo
|
67
|
-
.vc { color: #008080 } // Name.Variable.Class
|
68
|
-
.vg { color: #008080 } // Name.Variable.Global
|
69
|
-
.vi { color: #008080 } // Name.Variable.Instance
|
70
|
-
.il { color: #099 } // Literal.Number.Integer.Long
|
71
|
-
}
|
1
|
+
/**
|
2
|
+
* Syntax highlighting styles
|
3
|
+
*/
|
4
|
+
.highlight {
|
5
|
+
background: #fff;
|
6
|
+
@extend %vertical-rhythm;
|
7
|
+
|
8
|
+
.highlighter-rouge & {
|
9
|
+
background: #eef;
|
10
|
+
}
|
11
|
+
|
12
|
+
.c { color: #998; font-style: italic } // Comment
|
13
|
+
.err { color: #a61717; background-color: #e3d2d2 } // Error
|
14
|
+
.k { font-weight: bold } // Keyword
|
15
|
+
.o { font-weight: bold } // Operator
|
16
|
+
.cm { color: #998; font-style: italic } // Comment.Multiline
|
17
|
+
.cp { color: #999; font-weight: bold } // Comment.Preproc
|
18
|
+
.c1 { color: #998; font-style: italic } // Comment.Single
|
19
|
+
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
|
20
|
+
.gd { color: #000; background-color: #fdd } // Generic.Deleted
|
21
|
+
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
|
22
|
+
.ge { font-style: italic } // Generic.Emph
|
23
|
+
.gr { color: #a00 } // Generic.Error
|
24
|
+
.gh { color: #999 } // Generic.Heading
|
25
|
+
.gi { color: #000; background-color: #dfd } // Generic.Inserted
|
26
|
+
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
|
27
|
+
.go { color: #888 } // Generic.Output
|
28
|
+
.gp { color: #555 } // Generic.Prompt
|
29
|
+
.gs { font-weight: bold } // Generic.Strong
|
30
|
+
.gu { color: #aaa } // Generic.Subheading
|
31
|
+
.gt { color: #a00 } // Generic.Traceback
|
32
|
+
.kc { font-weight: bold } // Keyword.Constant
|
33
|
+
.kd { font-weight: bold } // Keyword.Declaration
|
34
|
+
.kp { font-weight: bold } // Keyword.Pseudo
|
35
|
+
.kr { font-weight: bold } // Keyword.Reserved
|
36
|
+
.kt { color: #458; font-weight: bold } // Keyword.Type
|
37
|
+
.m { color: #099 } // Literal.Number
|
38
|
+
.s { color: #d14 } // Literal.String
|
39
|
+
.na { color: #008080 } // Name.Attribute
|
40
|
+
.nb { color: #0086B3 } // Name.Builtin
|
41
|
+
.nc { color: #458; font-weight: bold } // Name.Class
|
42
|
+
.no { color: #008080 } // Name.Constant
|
43
|
+
.ni { color: #800080 } // Name.Entity
|
44
|
+
.ne { color: #900; font-weight: bold } // Name.Exception
|
45
|
+
.nf { color: #900; font-weight: bold } // Name.Function
|
46
|
+
.nn { color: #555 } // Name.Namespace
|
47
|
+
.nt { color: #000080 } // Name.Tag
|
48
|
+
.nv { color: #008080 } // Name.Variable
|
49
|
+
.ow { font-weight: bold } // Operator.Word
|
50
|
+
.w { color: #bbb } // Text.Whitespace
|
51
|
+
.mf { color: #099 } // Literal.Number.Float
|
52
|
+
.mh { color: #099 } // Literal.Number.Hex
|
53
|
+
.mi { color: #099 } // Literal.Number.Integer
|
54
|
+
.mo { color: #099 } // Literal.Number.Oct
|
55
|
+
.sb { color: #d14 } // Literal.String.Backtick
|
56
|
+
.sc { color: #d14 } // Literal.String.Char
|
57
|
+
.sd { color: #d14 } // Literal.String.Doc
|
58
|
+
.s2 { color: #d14 } // Literal.String.Double
|
59
|
+
.se { color: #d14 } // Literal.String.Escape
|
60
|
+
.sh { color: #d14 } // Literal.String.Heredoc
|
61
|
+
.si { color: #d14 } // Literal.String.Interpol
|
62
|
+
.sx { color: #d14 } // Literal.String.Other
|
63
|
+
.sr { color: #009926 } // Literal.String.Regex
|
64
|
+
.s1 { color: #d14 } // Literal.String.Single
|
65
|
+
.ss { color: #990073 } // Literal.String.Symbol
|
66
|
+
.bp { color: #999 } // Name.Builtin.Pseudo
|
67
|
+
.vc { color: #008080 } // Name.Variable.Class
|
68
|
+
.vg { color: #008080 } // Name.Variable.Global
|
69
|
+
.vi { color: #008080 } // Name.Variable.Instance
|
70
|
+
.il { color: #099 } // Literal.Number.Integer.Long
|
71
|
+
}
|
data/_sass/minima.scss
CHANGED
@@ -1,57 +1,57 @@
|
|
1
|
-
@charset "utf-8";
|
2
|
-
|
3
|
-
// Define defaults for each variable.
|
4
|
-
|
5
|
-
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
6
|
-
$base-font-size: 16px !default;
|
7
|
-
$base-font-weight: 400 !default;
|
8
|
-
$small-font-size: $base-font-size * 0.875 !default;
|
9
|
-
$base-line-height: 1.5 !default;
|
10
|
-
|
11
|
-
$spacing-unit: 30px !default;
|
12
|
-
|
13
|
-
$text-color: #111 !default;
|
14
|
-
$background-color: #fdfdfd !default;
|
15
|
-
$brand-color: #2a7ae2 !default;
|
16
|
-
|
17
|
-
$grey-color: #828282 !default;
|
18
|
-
$grey-color-light: lighten($grey-color, 40%) !default;
|
19
|
-
$grey-color-dark: darken($grey-color, 25%) !default;
|
20
|
-
$orange-color: #f66a0a !default;
|
21
|
-
$table-text-align: left !default;
|
22
|
-
|
23
|
-
// Width of the content area
|
24
|
-
$content-width: 800px !default;
|
25
|
-
|
26
|
-
$on-palm: 600px !default;
|
27
|
-
$on-laptop: 800px !default;
|
28
|
-
|
29
|
-
$on-medium: $on-palm !default;
|
30
|
-
$on-large: $on-laptop !default;
|
31
|
-
|
32
|
-
// Use media queries like this:
|
33
|
-
// @include media-query($on-palm) {
|
34
|
-
// .wrapper {
|
35
|
-
// padding-right: $spacing-unit / 2;
|
36
|
-
// padding-left: $spacing-unit / 2;
|
37
|
-
// }
|
38
|
-
// }
|
39
|
-
// Notice the following mixin uses max-width, in a deprecated, desktop-first
|
40
|
-
// approach, whereas media queries used elsewhere now use min-width.
|
41
|
-
@mixin media-query($device) {
|
42
|
-
@media screen and (max-width: $device) {
|
43
|
-
@content;
|
44
|
-
}
|
45
|
-
}
|
46
|
-
|
47
|
-
@mixin relative-font-size($ratio) {
|
48
|
-
font-size: $base-font-size * $ratio;
|
49
|
-
}
|
50
|
-
|
51
|
-
// Import partials.
|
52
|
-
@import
|
53
|
-
"minima/base",
|
54
|
-
"minima/layout",
|
55
|
-
"minima/share",
|
56
|
-
"minima/syntax-highlighting"
|
57
|
-
;
|
1
|
+
@charset "utf-8";
|
2
|
+
|
3
|
+
// Define defaults for each variable.
|
4
|
+
|
5
|
+
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
6
|
+
$base-font-size: 16px !default;
|
7
|
+
$base-font-weight: 400 !default;
|
8
|
+
$small-font-size: $base-font-size * 0.875 !default;
|
9
|
+
$base-line-height: 1.5 !default;
|
10
|
+
|
11
|
+
$spacing-unit: 30px !default;
|
12
|
+
|
13
|
+
$text-color: #111 !default;
|
14
|
+
$background-color: #fdfdfd !default;
|
15
|
+
$brand-color: #2a7ae2 !default;
|
16
|
+
|
17
|
+
$grey-color: #828282 !default;
|
18
|
+
$grey-color-light: lighten($grey-color, 40%) !default;
|
19
|
+
$grey-color-dark: darken($grey-color, 25%) !default;
|
20
|
+
$orange-color: #f66a0a !default;
|
21
|
+
$table-text-align: left !default;
|
22
|
+
|
23
|
+
// Width of the content area
|
24
|
+
$content-width: 800px !default;
|
25
|
+
|
26
|
+
$on-palm: 600px !default;
|
27
|
+
$on-laptop: 800px !default;
|
28
|
+
|
29
|
+
$on-medium: $on-palm !default;
|
30
|
+
$on-large: $on-laptop !default;
|
31
|
+
|
32
|
+
// Use media queries like this:
|
33
|
+
// @include media-query($on-palm) {
|
34
|
+
// .wrapper {
|
35
|
+
// padding-right: $spacing-unit / 2;
|
36
|
+
// padding-left: $spacing-unit / 2;
|
37
|
+
// }
|
38
|
+
// }
|
39
|
+
// Notice the following mixin uses max-width, in a deprecated, desktop-first
|
40
|
+
// approach, whereas media queries used elsewhere now use min-width.
|
41
|
+
@mixin media-query($device) {
|
42
|
+
@media screen and (max-width: $device) {
|
43
|
+
@content;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
@mixin relative-font-size($ratio) {
|
48
|
+
font-size: $base-font-size * $ratio;
|
49
|
+
}
|
50
|
+
|
51
|
+
// Import partials.
|
52
|
+
@import
|
53
|
+
"minima/base",
|
54
|
+
"minima/layout",
|
55
|
+
"minima/share",
|
56
|
+
"minima/syntax-highlighting"
|
57
|
+
;
|
data/assets/css/style.scss
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
---
|
2
|
-
# Only the main Sass file needs front matter (the dashes are enough)
|
3
|
-
---
|
4
|
-
|
5
|
-
@import "minima";
|
1
|
+
---
|
2
|
+
# Only the main Sass file needs front matter (the dashes are enough)
|
3
|
+
---
|
4
|
+
|
5
|
+
@import "minima";
|
data/assets/js/color.js
CHANGED
@@ -1,47 +1,47 @@
|
|
1
|
-
function invertColor(hex, bw) {
|
2
|
-
if (hex.indexOf('#') === 0) {
|
3
|
-
hex = hex.slice(1);
|
4
|
-
}
|
5
|
-
// convert 3-digit hex to 6-digits.
|
6
|
-
if (hex.length === 3) {
|
7
|
-
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
8
|
-
}
|
9
|
-
if (hex.length !== 6) {
|
10
|
-
throw new Error('Invalid HEX color.');
|
11
|
-
}
|
12
|
-
var r = parseInt(hex.slice(0, 2), 16),
|
13
|
-
g = parseInt(hex.slice(2, 4), 16),
|
14
|
-
b = parseInt(hex.slice(4, 6), 16);
|
15
|
-
if (bw) {
|
16
|
-
// http://stackoverflow.com/a/3943023/112731
|
17
|
-
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
|
18
|
-
? '#000000'
|
19
|
-
: '#FFFFFF';
|
20
|
-
}
|
21
|
-
// invert color components
|
22
|
-
r = (255 - r).toString(16);
|
23
|
-
g = (255 - g).toString(16);
|
24
|
-
b = (255 - b).toString(16);
|
25
|
-
// pad each with zeros and return
|
26
|
-
return "#" + padZero(r) + padZero(g) + padZero(b);
|
27
|
-
}
|
28
|
-
function padZero(str, len) {
|
29
|
-
len = len || 2;
|
30
|
-
var zeros = new Array(len).join('0');
|
31
|
-
return (zeros + str).slice(-len);
|
32
|
-
}
|
33
|
-
|
34
|
-
function randomColor() {
|
35
|
-
color = Math.floor(Math.random()*16777215).toString(16);
|
36
|
-
return '#' + padZero(color, 6);
|
37
|
-
}
|
38
|
-
|
39
|
-
function setInvertedColor(className) {
|
40
|
-
let elems = document.getElementsByClassName(className);
|
41
|
-
for (const elem of elems) {
|
42
|
-
const bgColor = randomColor();
|
43
|
-
let color = invertColor(bgColor, true);
|
44
|
-
elem.style['color'] = color;
|
45
|
-
elem.style['background-color'] = bgColor;
|
46
|
-
}
|
1
|
+
function invertColor(hex, bw) {
|
2
|
+
if (hex.indexOf('#') === 0) {
|
3
|
+
hex = hex.slice(1);
|
4
|
+
}
|
5
|
+
// convert 3-digit hex to 6-digits.
|
6
|
+
if (hex.length === 3) {
|
7
|
+
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
8
|
+
}
|
9
|
+
if (hex.length !== 6) {
|
10
|
+
throw new Error('Invalid HEX color.');
|
11
|
+
}
|
12
|
+
var r = parseInt(hex.slice(0, 2), 16),
|
13
|
+
g = parseInt(hex.slice(2, 4), 16),
|
14
|
+
b = parseInt(hex.slice(4, 6), 16);
|
15
|
+
if (bw) {
|
16
|
+
// http://stackoverflow.com/a/3943023/112731
|
17
|
+
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
|
18
|
+
? '#000000'
|
19
|
+
: '#FFFFFF';
|
20
|
+
}
|
21
|
+
// invert color components
|
22
|
+
r = (255 - r).toString(16);
|
23
|
+
g = (255 - g).toString(16);
|
24
|
+
b = (255 - b).toString(16);
|
25
|
+
// pad each with zeros and return
|
26
|
+
return "#" + padZero(r) + padZero(g) + padZero(b);
|
27
|
+
}
|
28
|
+
function padZero(str, len) {
|
29
|
+
len = len || 2;
|
30
|
+
var zeros = new Array(len).join('0');
|
31
|
+
return (zeros + str).slice(-len);
|
32
|
+
}
|
33
|
+
|
34
|
+
function randomColor() {
|
35
|
+
color = Math.floor(Math.random()*16777215).toString(16);
|
36
|
+
return '#' + padZero(color, 6);
|
37
|
+
}
|
38
|
+
|
39
|
+
function setInvertedColor(className) {
|
40
|
+
let elems = document.getElementsByClassName(className);
|
41
|
+
for (const elem of elems) {
|
42
|
+
const bgColor = randomColor();
|
43
|
+
let color = invertColor(bgColor, true);
|
44
|
+
elem.style['color'] = color;
|
45
|
+
elem.style['background-color'] = bgColor;
|
46
|
+
}
|
47
47
|
}
|