minima-rock 0.3.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
}
|