jekyll-sleek 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +104 -8
  3. data/_includes/card.html +2 -2
  4. data/_includes/critical.css +1 -1
  5. data/_includes/form.html +4 -4
  6. data/_includes/head.html +1 -9
  7. data/_includes/header.html +7 -2
  8. data/_includes/loadCss.js +9 -0
  9. data/_includes/modal.html +12 -0
  10. data/_layouts/default.html +1 -1
  11. data/_layouts/post.html +73 -55
  12. data/_sass/abstracts/_mixins.scss +0 -0
  13. data/_sass/abstracts/_variables.scss +10 -10
  14. data/_sass/base/_base.scss +0 -0
  15. data/_sass/base/_helpers.scss +12 -24
  16. data/_sass/base/_typography.scss +13 -32
  17. data/_sass/components/_btn.scss +37 -83
  18. data/_sass/components/_card.scss +4 -1
  19. data/_sass/components/_form.scss +2 -2
  20. data/_sass/components/_modal.scss +73 -0
  21. data/_sass/components/_pagination.scss +0 -0
  22. data/_sass/components/_syntax.scss +209 -60
  23. data/_sass/components/_table.scss +4 -4
  24. data/_sass/layout/_footer.scss +2 -0
  25. data/_sass/layout/_grid.scss +0 -0
  26. data/_sass/layout/_nav.scss +103 -41
  27. data/_sass/main.scss +1 -2
  28. data/_sass/pages/_page.scss +5 -1
  29. data/_sass/pages/_post.scss +48 -0
  30. data/_sass/vendor/_breakpoint.scss +0 -3
  31. data/_sass/vendor/_normalize.scss +0 -0
  32. data/assets/css/main.css +1 -1
  33. data/assets/js/bundle.js +1 -1
  34. metadata +18 -17
  35. data/_sass/components/_top.scss +0 -30
  36. data/_sass/components/_zoom.scss +0 -37
data/_sass/base/_base.scss CHANGED
File without changes
data/_sass/base/_helpers.scss CHANGED
@@ -1,30 +1,18 @@
1
- .blur-up {
2
- -webkit-filter: blur(5px);
3
- filter: blur(5px);
4
- transition: filter 400ms, -webkit-filter 400ms;
5
- }
1
+ .blur {
2
+ background: $bg-color;
3
+ filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="16" /></filter></svg>#filter');
4
+ -webkit-filter: blur(1rem);
5
+ filter: blur(1rem);
6
+ transition: filter 400ms, -webkit-filter 400ms;
6
7
 
7
- .blur-up.lazyloaded {
8
- -webkit-filter: blur(0);
9
- filter: blur(0);
8
+ &.lazyloaded {
9
+ -webkit-filter: blur(0);
10
+ filter: blur(0);
11
+ }
10
12
  }
11
13
 
12
- .title {
13
- position: relative;
14
- margin: 0 0 85px;
15
- text-align: center;
16
- text-transform: capitalize;
17
-
18
- &::after {
19
- position: absolute;
20
- content: "";
21
- left: 50%;
22
- transform: translateX(-50%);
23
- bottom: -8px;
24
- width: 50px;
25
- height: 2px;
26
- background-color: $primary;
27
- }
14
+ .dark-bg {
15
+ background-color: $dark-light;
28
16
  }
29
17
 
30
18
  .hidden {
data/_sass/base/_typography.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // General
2
2
  body {
3
3
  background-color: $bg-color;
4
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto,"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
4
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
5
5
  font-size: 1rem;
6
6
  line-height: 1.5;
7
7
  color: $text-color;
@@ -11,7 +11,7 @@ body {
11
11
 
12
12
  ::selection {
13
13
  color: $bg-color;
14
- background-color: #414141;
14
+ background-color: $reverse;
15
15
  }
16
16
 
17
17
  // Reboot
@@ -36,7 +36,8 @@ h6 {
36
36
  a {
37
37
  color: $link-color;
38
38
  text-decoration: none;
39
- transition: color .2s linear;
39
+ transition: all .2s linear;
40
+ border-bottom: 1px dashed $link-color;
40
41
 
41
42
  &:active,
42
43
  &:focus {
@@ -46,34 +47,14 @@ a {
46
47
  &:hover,
47
48
  &:focus {
48
49
  color: $primary-light;
50
+ border-bottom: 1px solid $primary-light;
49
51
  }
50
52
  }
51
53
 
52
- a.link {
53
- position: relative;
54
- display: inline-block;
55
- color: $link-color;
56
- transition: color 0.2s linear;
57
-
58
- &:after {
59
- content: "";
60
- display: block;
61
- position: absolute;
62
- left: 0;
63
- bottom: 0px;
64
- height: 1px;
65
- width: 0;
66
- background: $link-color;
67
- transition: all 0.2 ease-in-out;
68
- }
69
- &:hover {
70
- color: darken($link-color, 20%);
71
- }
72
- &:hover:after, :active:after, :focus:after {
73
- width: 100%;
74
- color: darken($link-color, 20%);
75
- transition: all .35s cubic-bezier(.694,.048,.335,1);
76
- }
54
+ hr {
55
+ height: 1px;
56
+ background: $border;
57
+ border: 0;
77
58
  }
78
59
 
79
60
  em {
@@ -85,17 +66,17 @@ abbr[title] {
85
66
  }
86
67
 
87
68
  mark {
88
- background: #ff0;
89
- color: $heading-color;
69
+ background: #ff0;
70
+ color: $heading-color;
90
71
  }
91
72
 
92
73
  code {
93
- padding: 2px 4px;
74
+ padding: 0.2em 0.4em;
94
75
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
95
76
  font-size: 0.9rem;
96
77
  color: $code-text-color;
97
78
  background-color: $code-bg-color;
98
- border-radius: 0.3rem;
79
+ border-radius: 3px;
99
80
  }
100
81
 
101
82
  pre {
data/_sass/components/_btn.scss CHANGED
@@ -1,100 +1,54 @@
1
- .btn + .btn {
2
- margin-top: 2em;
3
- @include breakpoint(350px) {
4
- margin-top: 0;
5
- margin-left: 2em;
6
- }
7
- }
8
-
9
- .btn, button, input[type="submit"],input[type="reset"],input[type="button"] {
10
- position: relative;
11
- display: inline-block;
12
- padding: 18px 30px;
13
- font-size: 11px;
14
- font-family: inherit;
15
- line-height: 1.5;
16
- letter-spacing: 0.2em;
17
- text-decoration: none;
18
- text-transform: uppercase;
19
- white-space: nowrap;
20
- cursor: pointer;
21
- color: $bg-color;
22
- background-color: $button-dark;
23
- text-align: center;
24
- border: none;
25
- border-radius: 0px;
26
- transition: all 0.45s cubic-bezier(0.25, 1, 0.33, 1);
27
- &:after {
28
- display: none;
29
- }
30
- &:hover, :focus, :active {
31
- color: $bg-color;
32
- background-color: lighten($button-dark, 14%);
33
- outline: 0;
34
- }
35
- }
36
- .btn-lg {
37
- padding: 20px 48px;
38
- padding: 2rem 4.8rem;
1
+ .btn,
2
+ input[type="submit"],
3
+ input[type="reset"],
4
+ input[type="button"] {
39
5
  position: relative;
40
- }
6
+ display: inline-block;
7
+ padding: 18px 30px;
8
+ font-size: 11px;
9
+ font-family: inherit;
10
+ line-height: 1.5;
11
+ letter-spacing: 0.2em;
12
+ text-decoration: none;
13
+ text-transform: uppercase;
14
+ white-space: nowrap;
15
+ cursor: pointer;
16
+ color: $bg-color;
17
+ background-color: $button-dark;
18
+ text-align: center;
19
+ border: 0;
20
+ border-radius: 0;
21
+ transition: all 0.45s cubic-bezier(0.25, 1, 0.33, 1);
22
+ outline: 0;
23
+
24
+ &::after {
25
+ display: none;
26
+ }
41
27
 
42
- .btn-primary {
43
- background-color: $primary!important;
44
- color: $bg-color!important;
45
- &:hover, :focus, :active {
28
+ &:hover,
29
+ :focus,
30
+ :active {
46
31
  color: $bg-color;
47
- background-color: $primary-light;
32
+ background-color: lighten($button-dark, 14%);
48
33
  outline: 0;
49
34
  }
50
35
  }
51
36
 
52
- .pill {
53
- position: relative;
54
- display: inline-block;
55
- padding: 15px 42px;
56
- font-size: 11px;
57
- letter-spacing: 0.2em;
58
- text-decoration: none;
59
- text-transform: capitalize;
60
- color: $bg-color;
61
- background-color: $button-dark;
62
- border-radius: 300px;
63
- line-height: 1.5;
64
- text-align: center;
65
- border: none;
66
- transition: all 0.45s cubic-bezier(0.25, 1, 0.33, 1);
67
- &:after {
68
- display: none;
69
- }
70
- &:hover, :focus, :active {
71
- color: $bg-color;
72
- background-color: $dark-light;
73
- }
74
- &:focus {
75
- outline: none;
76
- }
77
- }
78
- .pill-lg {
79
- padding: 20px 48px;
80
- padding: 2rem 4.8rem;
81
- position: relative;
82
- }
83
- .btn-wrap {
84
- text-align: center;
85
- @include breakpoint($md) {
86
- text-align: left;
37
+ .btn + .btn {
38
+ margin-top: 2em;
39
+ @include breakpoint(350px) {
40
+ margin-top: 0;
41
+ margin-left: 2em;
87
42
  }
88
43
  }
89
- .btn-center {
90
- text-align: center;
91
- }
92
44
 
93
45
  button:disabled {
94
46
  cursor: not-allowed;
95
47
  opacity: .65;
96
48
  transition: background-color .2s ease;
97
- &:hover, :focus {
49
+
50
+ &:hover,
51
+ :focus {
98
52
  background-color: $button-dark;
99
53
  }
100
54
  }
data/_sass/components/_card.scss CHANGED
@@ -7,10 +7,12 @@
7
7
  background-color: $bg-color;
8
8
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
9
9
  margin-bottom: 5.26316%;
10
+ border-bottom: 0;
10
11
  transition: box-shadow .25s ease;
11
12
 
12
13
  &:hover,
13
14
  &:focus {
15
+ border-bottom: 0;
14
16
  box-shadow: 0 2px 40px 0 hsla(232, 8%, 63%, .3);
15
17
  }
16
18
 
@@ -41,8 +43,9 @@
41
43
 
42
44
  .post-card__thumb {
43
45
  margin: 0;
44
- background: $dark-light;
46
+ background: $bg-color;
45
47
  position: relative;
48
+ overflow: hidden;
46
49
 
47
50
  &::after {
48
51
  content: "";
data/_sass/components/_form.scss CHANGED
@@ -47,8 +47,8 @@ textarea {
47
47
  }
48
48
 
49
49
  &:hover::after,
50
- :focus:after,
51
- :active:after {
50
+ :focus::after,
51
+ :active::after {
52
52
  width: 100%;
53
53
  }
54
54
 
data/_sass/components/_modal.scss ADDED
@@ -0,0 +1,73 @@
1
+ .modal {
2
+ position: fixed;
3
+ display: none;
4
+ align-items: center;
5
+ justify-content: center;
6
+ top: 0;
7
+ left: 0;
8
+ width: 100%;
9
+ height: 100%;
10
+ outline: 0;
11
+ overflow-y: auto;
12
+ z-index: 999;
13
+ }
14
+
15
+ .modal__inner {
16
+ flex: 0 1 auto;
17
+ position: relative;
18
+ margin: 1.875em;
19
+ width: auto;
20
+ max-width: 768px;
21
+ outline: 0;
22
+ opacity: 0;
23
+ transform: translateY(200px);
24
+ transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
25
+ z-index: 1050;
26
+ }
27
+
28
+ .modal__content {
29
+ position: relative;
30
+ padding: 2rem 2.5rem;
31
+ display: flex;
32
+ flex-direction: column;
33
+ background-color: $bg-color;
34
+ border-radius: 4px;
35
+
36
+ h1 {
37
+ text-align: center;
38
+ }
39
+ }
40
+
41
+ .modal__close-button {
42
+ position: absolute;
43
+ top: 16px;
44
+ right: 16px;
45
+ background-color: transparent;
46
+ border: 0;
47
+ outline: 0;
48
+ color: $heading-color;
49
+ cursor: pointer;
50
+
51
+ &:hover {
52
+ background-color: transparent;
53
+ }
54
+ }
55
+
56
+ .modal__overlay {
57
+ position: fixed;
58
+ display: none;
59
+ top: 0;
60
+ right: 0;
61
+ bottom: 0;
62
+ left: 0;
63
+ height: 100%;
64
+ width: 100%;
65
+ z-index: 1040;
66
+ opacity: 0;
67
+ background-color: rgba(0, 0 , 0, .75);
68
+ transition: opacity 1s ease 0.1s;
69
+ }
70
+
71
+ body.modal--open {
72
+ overflow: hidden;
73
+ }
data/_sass/components/_pagination.scss CHANGED
File without changes
data/_sass/components/_syntax.scss CHANGED
@@ -1,60 +1,209 @@
1
- .highlight { background: #ffffff; }
2
- .highlight .c { color: #999988; font-style: italic } /* Comment */
3
- .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
4
- .highlight .k { font-weight: bold } /* Keyword */
5
- .highlight .o { font-weight: bold } /* Operator */
6
- .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
7
- .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
8
- .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
9
- .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
10
- .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11
- .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
12
- .highlight .ge { font-style: italic } /* Generic.Emph */
13
- .highlight .gr { color: #aa0000 } /* Generic.Error */
14
- .highlight .gh { color: #999999 } /* Generic.Heading */
15
- .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
16
- .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
17
- .highlight .go { color: #888888 } /* Generic.Output */
18
- .highlight .gp { color: #555555 } /* Generic.Prompt */
19
- .highlight .gs { font-weight: bold } /* Generic.Strong */
20
- .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
21
- .highlight .gt { color: #aa0000 } /* Generic.Traceback */
22
- .highlight .kc { font-weight: bold } /* Keyword.Constant */
23
- .highlight .kd { font-weight: bold } /* Keyword.Declaration */
24
- .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
25
- .highlight .kr { font-weight: bold } /* Keyword.Reserved */
26
- .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
27
- .highlight .m { color: #009999 } /* Literal.Number */
28
- .highlight .s { color: #d14 } /* Literal.String */
29
- .highlight .na { color: #008080 } /* Name.Attribute */
30
- .highlight .nb { color: #0086B3 } /* Name.Builtin */
31
- .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
32
- .highlight .no { color: #008080 } /* Name.Constant */
33
- .highlight .ni { color: #800080 } /* Name.Entity */
34
- .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
35
- .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
36
- .highlight .nn { color: #555555 } /* Name.Namespace */
37
- .highlight .nt { color: #000080 } /* Name.Tag */
38
- .highlight .nv { color: #008080 } /* Name.Variable */
39
- .highlight .ow { font-weight: bold } /* Operator.Word */
40
- .highlight .w { color: #bbbbbb } /* Text.Whitespace */
41
- .highlight .mf { color: #009999 } /* Literal.Number.Float */
42
- .highlight .mh { color: #009999 } /* Literal.Number.Hex */
43
- .highlight .mi { color: #009999 } /* Literal.Number.Integer */
44
- .highlight .mo { color: #009999 } /* Literal.Number.Oct */
45
- .highlight .sb { color: #d14 } /* Literal.String.Backtick */
46
- .highlight .sc { color: #d14 } /* Literal.String.Char */
47
- .highlight .sd { color: #d14 } /* Literal.String.Doc */
48
- .highlight .s2 { color: #d14 } /* Literal.String.Double */
49
- .highlight .se { color: #d14 } /* Literal.String.Escape */
50
- .highlight .sh { color: #d14 } /* Literal.String.Heredoc */
51
- .highlight .si { color: #d14 } /* Literal.String.Interpol */
52
- .highlight .sx { color: #d14 } /* Literal.String.Other */
53
- .highlight .sr { color: #009926 } /* Literal.String.Regex */
54
- .highlight .s1 { color: #d14 } /* Literal.String.Single */
55
- .highlight .ss { color: #990073 } /* Literal.String.Symbol */
56
- .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
57
- .highlight .vc { color: #008080 } /* Name.Variable.Class */
58
- .highlight .vg { color: #008080 } /* Name.Variable.Global */
59
- .highlight .vi { color: #008080 } /* Name.Variable.Instance */
60
- .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
1
+ .highlight table td { padding: 5px; }
2
+ .highlight table pre { margin: 0; }
3
+ .highlight .cm {
4
+ color: #999988;
5
+ font-style: italic;
6
+ }
7
+ .highlight .cp {
8
+ color: #999999;
9
+ font-weight: bold;
10
+ }
11
+ .highlight .c1 {
12
+ color: #999988;
13
+ font-style: italic;
14
+ }
15
+ .highlight .cs {
16
+ color: #999999;
17
+ font-weight: bold;
18
+ font-style: italic;
19
+ }
20
+ .highlight .c, .highlight .cd {
21
+ color: #999988;
22
+ font-style: italic;
23
+ }
24
+ .highlight .err {
25
+ color: #a61717;
26
+ background-color: #e3d2d2;
27
+ }
28
+ .highlight .gd {
29
+ color: #000000;
30
+ background-color: #ffdddd;
31
+ }
32
+ .highlight .ge {
33
+ color: #000000;
34
+ font-style: italic;
35
+ }
36
+ .highlight .gr {
37
+ color: #aa0000;
38
+ }
39
+ .highlight .gh {
40
+ color: #999999;
41
+ }
42
+ .highlight .gi {
43
+ color: #000000;
44
+ background-color: #ddffdd;
45
+ }
46
+ .highlight .go {
47
+ color: #888888;
48
+ }
49
+ .highlight .gp {
50
+ color: #555555;
51
+ }
52
+ .highlight .gs {
53
+ font-weight: bold;
54
+ }
55
+ .highlight .gu {
56
+ color: #aaaaaa;
57
+ }
58
+ .highlight .gt {
59
+ color: #aa0000;
60
+ }
61
+ .highlight .kc {
62
+ color: #000000;
63
+ font-weight: bold;
64
+ }
65
+ .highlight .kd {
66
+ color: #000000;
67
+ font-weight: bold;
68
+ }
69
+ .highlight .kn {
70
+ color: #000000;
71
+ font-weight: bold;
72
+ }
73
+ .highlight .kp {
74
+ color: #000000;
75
+ font-weight: bold;
76
+ }
77
+ .highlight .kr {
78
+ color: #000000;
79
+ font-weight: bold;
80
+ }
81
+ .highlight .kt {
82
+ color: #445588;
83
+ font-weight: bold;
84
+ }
85
+ .highlight .k, .highlight .kv {
86
+ color: #000000;
87
+ font-weight: bold;
88
+ }
89
+ .highlight .mf {
90
+ color: #009999;
91
+ }
92
+ .highlight .mh {
93
+ color: #009999;
94
+ }
95
+ .highlight .il {
96
+ color: #009999;
97
+ }
98
+ .highlight .mi {
99
+ color: #009999;
100
+ }
101
+ .highlight .mo {
102
+ color: #009999;
103
+ }
104
+ .highlight .m, .highlight .mb, .highlight .mx {
105
+ color: #009999;
106
+ }
107
+ .highlight .sb {
108
+ color: #d14;
109
+ }
110
+ .highlight .sc {
111
+ color: #d14;
112
+ }
113
+ .highlight .sd {
114
+ color: #d14;
115
+ }
116
+ .highlight .s2 {
117
+ color: #d14;
118
+ }
119
+ .highlight .se {
120
+ color: #d14;
121
+ }
122
+ .highlight .sh {
123
+ color: #d14;
124
+ }
125
+ .highlight .si {
126
+ color: #d14;
127
+ }
128
+ .highlight .sx {
129
+ color: #d14;
130
+ }
131
+ .highlight .sr {
132
+ color: #009926;
133
+ }
134
+ .highlight .s1 {
135
+ color: #d14;
136
+ }
137
+ .highlight .ss {
138
+ color: #990073;
139
+ }
140
+ .highlight .s {
141
+ color: #d14;
142
+ }
143
+ .highlight .na {
144
+ color: #008080;
145
+ }
146
+ .highlight .bp {
147
+ color: #999999;
148
+ }
149
+ .highlight .nb {
150
+ color: #0086B3;
151
+ }
152
+ .highlight .nc {
153
+ color: #445588;
154
+ font-weight: bold;
155
+ }
156
+ .highlight .no {
157
+ color: #008080;
158
+ }
159
+ .highlight .nd {
160
+ color: #3c5d5d;
161
+ font-weight: bold;
162
+ }
163
+ .highlight .ni {
164
+ color: #800080;
165
+ }
166
+ .highlight .ne {
167
+ color: #990000;
168
+ font-weight: bold;
169
+ }
170
+ .highlight .nf {
171
+ color: #990000;
172
+ font-weight: bold;
173
+ }
174
+ .highlight .nl {
175
+ color: #990000;
176
+ font-weight: bold;
177
+ }
178
+ .highlight .nn {
179
+ color: #555555;
180
+ }
181
+ .highlight .nt {
182
+ color: #000080;
183
+ }
184
+ .highlight .vc {
185
+ color: #008080;
186
+ }
187
+ .highlight .vg {
188
+ color: #008080;
189
+ }
190
+ .highlight .vi {
191
+ color: #008080;
192
+ }
193
+ .highlight .nv {
194
+ color: #008080;
195
+ }
196
+ .highlight .ow {
197
+ color: #000000;
198
+ font-weight: bold;
199
+ }
200
+ .highlight .o {
201
+ color: #000000;
202
+ font-weight: bold;
203
+ }
204
+ .highlight .w {
205
+ color: #bbbbbb;
206
+ }
207
+ .highlight {
208
+ background-color: #f8f8f8;
209
+ }