whiteblog-theme 0.0.1 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.md +70 -52
  4. data/_includes/comments-providers/disqus.html +15 -0
  5. data/_includes/footer.html +9 -9
  6. data/_includes/head.html +20 -20
  7. data/_includes/header.html +37 -67
  8. data/_layouts/allposts.html +34 -34
  9. data/_layouts/categories.html +24 -0
  10. data/_layouts/default.html +26 -27
  11. data/_layouts/home.html +35 -35
  12. data/_layouts/page.html +13 -13
  13. data/_layouts/post.html +51 -47
  14. data/_sass/whiteblog-theme/_layout.scss +203 -182
  15. data/_sass/whiteblog-theme/_syntax-highlighting.scss +64 -64
  16. data/_sass/whiteblog-theme.scss +5 -5
  17. metadata +18 -31
  18. data/_layouts/compress.html +0 -10
data/_layouts/post.html CHANGED
@@ -1,47 +1,51 @@
1
- ---
2
- layout: default
3
- ---
4
- <article class="post">
5
-
6
- <header>
7
- <h1>{{ page.title | escape }}</h1>
8
- <p class="text-secondary">
9
- <i class="fa fa-calendar-alt"></i><span style="display:inline-block; width: 3px;"></span>
10
- <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
11
- {% assign date_format = site.theme.date_format | default: "%b %-d, %Y" %}
12
- {{ page.date | date: date_format }}
13
- </time><span style="display:inline-block; width: 6px;"></span>
14
- {% if post %}
15
- {% assign categories = post.categories %}
16
- {% else %}
17
- {% assign categories = page.categories %}
18
- {% endif %}
19
- <h5 id="category-badge">
20
- {% for category in categories %}
21
- <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge badge-{{category}} badge-bounce-in" >{{category}}</a>
22
- {% unless forloop.last %}&nbsp;{% endunless %}
23
- {% endfor %}
24
- </h5>
25
- </p>
26
- </header>
27
-
28
- <div class="text-justify" id="content">
29
- {{ content }}
30
- </div>
31
-
32
- <div class="container">
33
- <div class="row">
34
- <div class="previous col text-right">
35
- {% if page.previous.url %}
36
- <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
37
- {% endif %}
38
- </div>
39
- <div class="next col">
40
- {% if page.next.url %}
41
- <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
42
- {% endif %}
43
- </div>
44
- </div>
45
- </div>
46
-
47
- </article>
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post container">
5
+
6
+ <div class="container" id="posts-navigation">
7
+ <div class="row">
8
+ <div class="previous col text-left">
9
+ {% if page.previous.url %}
10
+ <a href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
11
+ {% endif %}
12
+ </div>
13
+ <div class="next col">
14
+ {% if page.next.url %}
15
+ <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
16
+ {% endif %}
17
+ </div>
18
+ </div>
19
+ </div>
20
+
21
+ <header>
22
+ <h1 class="underline">{{ page.title | escape }}</h1>
23
+ <p class="text-secondary">
24
+ <i class="fa fa-calendar-alt"></i><span style="display:inline-block; width: 3px;"></span>
25
+ <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
26
+ {% assign date_format = site.theme.date_format | default: "%b %-d, %Y" %}
27
+ {{ page.date | date: date_format }}
28
+ </time><span style="display:inline-block; width: 6px;"></span>
29
+ {% if post %}
30
+ {% assign categories = post.categories %}
31
+ {% else %}
32
+ {% assign categories = page.categories %}
33
+ {% endif %}
34
+ <h5 id="category-badge">
35
+ {% for category in categories %}
36
+ <a href="{{site.baseurl}}/categories/#{{category|slugize}}" class="badge badge badge-bounce-in" >{{category}}</a>
37
+ {% unless forloop.last %}&nbsp;{% endunless %}
38
+ {% endfor %}
39
+ </h5>
40
+ </p>
41
+ </header>
42
+
43
+ <div class="text-justify" id="content">
44
+ {{ content }}
45
+ </div>
46
+
47
+ {% if site.comments.provider and page.comments %}
48
+ {% include comments.html %}
49
+ {% endif %}
50
+
51
+ </article>
data/_sass/whiteblog-theme/_layout.scss CHANGED
@@ -1,182 +1,203 @@
1
- @import url('https://fonts.googleapis.com/css?family=Nunito');
2
-
3
- html {
4
- overflow-y: overlay
5
- }
6
-
7
- body {
8
- background-color: #fdfdfd;
9
- font-family: "Nunito" !important;
10
- }
11
-
12
- .navbar {
13
- background-color: #8792A3 !important;
14
- a {
15
- //color: #6f777d !important;
16
- font-weight: 600;
17
- }
18
- }
19
-
20
- .navbar-toggler {
21
- border: none;
22
- background: transparent !important;
23
-
24
- &:hover {
25
- background: transparent !important;
26
- }
27
-
28
- .icon-bar {
29
- width: 22px;
30
- transition: all 0.2s;
31
- }
32
- .top-bar {
33
- transform: rotate(45deg);
34
- transform-origin: 10% 10%;
35
- }
36
- .middle-bar {
37
- opacity: 0;
38
- }
39
- .bottom-bar {
40
- transform: rotate(-45deg);
41
- transform-origin: 10% 90%;
42
- }
43
-
44
- &.collapsed {
45
- .top-bar {
46
- transform: rotate(0);
47
- }
48
- .middle-bar {
49
- opacity: 1;
50
- }
51
- .bottom-bar {
52
- transform: rotate(0);
53
- }
54
- }
55
- }
56
-
57
- #nav-header {
58
- border-bottom: 1px solid #e9ecef !important;
59
- }
60
-
61
- #nav-container {
62
- height: 3.5rem;
63
- }
64
-
65
- .title-post-resume a {
66
- color: #2F343D !important;
67
- }
68
-
69
- div#content.text-justify {
70
- margin-top: 35px !important;
71
- }
72
-
73
- .post {
74
- padding-top: 3rem!important;
75
- }
76
-
77
- .posts-list {
78
- padding-top: 1.5rem!important;
79
- }
80
-
81
- #content .py-2 {
82
- padding-top: 1.5rem!important;
83
- }
84
-
85
- blockquote {
86
- background: #f9f9f9;
87
- border-left: 10px solid #5B6B84;
88
- margin: 1.5em 0px;
89
- padding: 0.5em 10px;
90
- quotes: "\201C""\201D""\2018""\2019";
91
- p {
92
- display: inline;
93
- }
94
- }
95
-
96
- .highlight pre {
97
- border: 1px solid;
98
- border-radius: .25rem;
99
- padding: 0.75rem;
100
- margin-bottom: 1rem;
101
- white-space: pre-wrap;
102
- }
103
-
104
- .post .text-secondary {
105
- margin-bottom: 8px !important;
106
- }
107
-
108
- .row .previous, .row .next {
109
- font-size: 25px;
110
- a {
111
- color: #6f777d !important;
112
- }
113
- }
114
-
115
- #site-footer {
116
- padding-top: 60px !important;
117
- color: #6f777d !important;
118
- }
119
-
120
- /* Categories: Color */
121
-
122
- a.badge-Jekyll {
123
- color: #fff;
124
- background-color: #F8BD66;
125
- }
126
- a.badge-Welcome {
127
- color: #fff;
128
- background-color: #42C19E;
129
- }
130
-
131
- a.badge-Ruby {
132
- color: #fff;
133
- background-color: #EC586F;
134
- }
135
-
136
- a.badge-Cloud {
137
- color: #fff;
138
- background-color: #4A8AB2;
139
- }
140
-
141
- a.badge-Development {
142
- color: #fff;
143
- background-color: #5A1F6D;
144
- }
145
-
146
- /* Categories: Effect */
147
-
148
- #category-badge a:hover, #category-badge a:focus, #category-badge a:active {
149
- color: #fff;
150
- -webkit-transform: scale(1.2);
151
- transform: scale(1.2);
152
- -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
153
- transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
154
- }
155
-
156
- .badge-bounce-in {
157
- display: inline-block;
158
- vertical-align: middle;
159
- -webkit-transform: perspective(1px) translateZ(0);
160
- transform: perspective(2px) translateZ(0);
161
- box-shadow: 0 0 1px rgba(0, 0, 0, 0);
162
- -webkit-transition-duration: 0.5s;
163
- transition-duration: 0.5s;
164
- }
165
-
166
- /*
167
- .hvr-grow-rotate {
168
- display: inline-block;
169
- vertical-align: middle;
170
- -webkit-transform: perspective(1px) translateZ(0);
171
- transform: perspective(1px) translateZ(0);
172
- box-shadow: 0 0 1px rgba(0, 0, 0, 0);
173
- -webkit-transition-duration: 0.3s;
174
- transition-duration: 0.3s;
175
- -webkit-transition-property: transform;
176
- transition-property: transform;
177
- }
178
- .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
179
- -webkit-transform: scale(1.1) rotate(4deg);
180
- transform: scale(1.1) rotate(4deg);
181
- }
182
- */
1
+ @import url('https://fonts.googleapis.com/css2?family=Nunito&Fira+Sans&family=Montserrat&display=swap');
2
+
3
+ //Color palette variables:
4
+ $background: #F5F5F5;
5
+ $navbar: #364F6B;
6
+ $highlight: #3FC1C9;
7
+
8
+ body {
9
+ background-color: $background;
10
+ font-family: "Montserrat";
11
+ overflow-y: scroll;
12
+ position: relative;
13
+ min-height: 100vh;
14
+ }
15
+
16
+ main {
17
+ padding-bottom: 2.5rem;
18
+ }
19
+
20
+ .container {
21
+ padding: 0em;
22
+ }
23
+
24
+ .navbar {
25
+ background-color: $navbar !important;
26
+ padding: 10px 16px !important;
27
+ a {
28
+ font-weight: 600;
29
+ }
30
+ }
31
+
32
+ .navbar-toggler {
33
+ border: none;
34
+ background: transparent !important;
35
+
36
+ &:hover {
37
+ background: transparent !important;
38
+ }
39
+
40
+ .icon-bar {
41
+ width: 22px;
42
+ transition: all 0.2s;
43
+ }
44
+
45
+ .top-bar {
46
+ transform: rotate(45deg);
47
+ transform-origin: 10% 10%;
48
+ }
49
+
50
+ .middle-bar {
51
+ opacity: 0;
52
+ }
53
+
54
+ .bottom-bar {
55
+ transform: rotate(-45deg);
56
+ transform-origin: 10% 90%;
57
+ }
58
+
59
+ &.collapsed {
60
+ .top-bar {
61
+ transform: rotate(0);
62
+ }
63
+ .middle-bar {
64
+ opacity: 1;
65
+ }
66
+ .bottom-bar {
67
+ transform: rotate(0);
68
+ }
69
+ }
70
+ }
71
+
72
+ #nav-header {
73
+ border-bottom: 1px solid #e9ecef !important;
74
+ }
75
+
76
+ #nav-container {
77
+ height: 3.5rem;
78
+ }
79
+
80
+ .title-post-resume a {
81
+ color: #2F343D !important;
82
+ }
83
+
84
+ div#content.text-justify {
85
+ margin-top: 35px !important;
86
+ }
87
+
88
+ .post {
89
+ padding-top: 3rem!important;
90
+ height: 100%;
91
+ padding-bottom: 5em;
92
+ }
93
+
94
+ .posts-list {
95
+ padding-top: 1.5rem!important;
96
+ }
97
+
98
+ #content .py-2 {
99
+ padding-top: 1.5rem!important;
100
+ }
101
+
102
+ blockquote {
103
+ background: #f9f9f9;
104
+ border-left: 10px solid #5B6B84;
105
+ margin: 1.5em 0px;
106
+ padding: 0.5em 10px;
107
+ quotes: "\201C""\201D""\2018""\2019";
108
+ p {
109
+ display: inline;
110
+ }
111
+ }
112
+
113
+ .highlight pre {
114
+ border: 1px solid;
115
+ border-radius: .25rem;
116
+ padding: 0.75rem;
117
+ margin-bottom: 1rem;
118
+ white-space: pre-wrap;
119
+ }
120
+
121
+ .underline {
122
+ font-family: "Nunito";
123
+ display: table;
124
+ background: linear-gradient(180deg,rgba(255,255,255,0) 65%, $highlight 8px);
125
+ }
126
+
127
+ .post .text-secondary {
128
+ margin-bottom: 8px !important;
129
+ }
130
+
131
+ .row .previous, .row .next {
132
+ font-size: 20px;
133
+ text-align: right;
134
+ a {
135
+ color: #6f777d !important;
136
+ }
137
+ }
138
+
139
+ #post {
140
+ flex-grow: 1;
141
+ position: relative;
142
+ }
143
+
144
+ #posts-navigation {
145
+ padding-bottom: 1.5rem;
146
+ bottom: 0;
147
+ }
148
+
149
+ #site-footer {
150
+ color: #6f777d !important;
151
+ position: absolute;
152
+ bottom: 0;
153
+ width: 100%;
154
+ height: 4rem;
155
+ }
156
+
157
+ a.badge {
158
+ color: #fff;
159
+ background-color: #FC5185;
160
+ }
161
+
162
+ /* Categories: Effect */
163
+
164
+ #category-badge a:hover, #category-badge a:focus, #category-badge a:active {
165
+ color: #fff;
166
+ -webkit-transform: scale(1.2);
167
+ transform: scale(1.2);
168
+ -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
169
+ transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
170
+ }
171
+
172
+ .badge-bounce-in {
173
+ display: inline-block;
174
+ vertical-align: middle;
175
+ -webkit-transform: perspective(1px) translateZ(0);
176
+ transform: perspective(2px) translateZ(0);
177
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0);
178
+ -webkit-transition-duration: 0.5s;
179
+ transition-duration: 0.5s;
180
+ }
181
+
182
+ #content ul.posts-list h1 {
183
+ a::before {
184
+ transform: scaleX(0);
185
+ transform-origin: bottom right;
186
+ }
187
+
188
+ a:hover::before {
189
+ transform: scaleX(1);
190
+ transform-origin: bottom left;
191
+ }
192
+
193
+ a::before {
194
+ content: " ";
195
+ display: block;
196
+ position: absolute;
197
+ top: 0; right: 0; bottom: 0; left: 0;
198
+ inset: 0 0 0 0;
199
+ background: rgba(117, 11, 11, 0);
200
+ z-index: -1;
201
+ transition: transform .3s ease;
202
+ }
203
+ }
data/_sass/whiteblog-theme/_syntax-highlighting.scss CHANGED
@@ -1,65 +1,65 @@
1
- .highlight {
2
- pre { background-color: #272822; }
3
- .hll { background-color: #272822; }
4
- .c { color: #75715e } /* Comment */
5
- .err { color: #960050; background-color: #1e0010 } /* Error */
6
- .k { color: #66d9ef } /* Keyword */
7
- .l { color: #ae81ff } /* Literal */
8
- .n { color: #f8f8f2 } /* Name */
9
- .o { color: #f92672 } /* Operator */
10
- .p { color: #f8f8f2 } /* Punctuation */
11
- .cm { color: #75715e } /* Comment.Multiline */
12
- .cp { color: #75715e } /* Comment.Preproc */
13
- .c1 { color: #75715e } /* Comment.Single */
14
- .cs { color: #75715e } /* Comment.Special */
15
- .ge { font-style: italic } /* Generic.Emph */
16
- .gs { font-weight: bold } /* Generic.Strong */
17
- .kc { color: #66d9ef } /* Keyword.Constant */
18
- .kd { color: #66d9ef } /* Keyword.Declaration */
19
- .kn { color: #f92672 } /* Keyword.Namespace */
20
- .kp { color: #66d9ef } /* Keyword.Pseudo */
21
- .kr { color: #66d9ef } /* Keyword.Reserved */
22
- .kt { color: #66d9ef } /* Keyword.Type */
23
- .ld { color: #e6db74 } /* Literal.Date */
24
- .m { color: #ae81ff } /* Literal.Number */
25
- .s { color: #e6db74 } /* Literal.String */
26
- .na { color: #a6e22e } /* Name.Attribute */
27
- .nb { color: #f8f8f2 } /* Name.Builtin */
28
- .nc { color: #a6e22e } /* Name.Class */
29
- .no { color: #66d9ef } /* Name.Constant */
30
- .nd { color: #a6e22e } /* Name.Decorator */
31
- .ni { color: #f8f8f2 } /* Name.Entity */
32
- .ne { color: #a6e22e } /* Name.Exception */
33
- .nf { color: #a6e22e } /* Name.Function */
34
- .nl { color: #f8f8f2 } /* Name.Label */
35
- .nn { color: #f8f8f2 } /* Name.Namespace */
36
- .nx { color: #a6e22e } /* Name.Other */
37
- .py { color: #f8f8f2 } /* Name.Property */
38
- .nt { color: #f92672 } /* Name.Tag */
39
- .nv { color: #f8f8f2 } /* Name.Variable */
40
- .ow { color: #f92672 } /* Operator.Word */
41
- .w { color: #f8f8f2 } /* Text.Whitespace */
42
- .mf { color: #ae81ff } /* Literal.Number.Float */
43
- .mh { color: #ae81ff } /* Literal.Number.Hex */
44
- .mi { color: #ae81ff } /* Literal.Number.Integer */
45
- .mo { color: #ae81ff } /* Literal.Number.Oct */
46
- .sb { color: #e6db74 } /* Literal.String.Backtick */
47
- .sc { color: #e6db74 } /* Literal.String.Char */
48
- .sd { color: #e6db74 } /* Literal.String.Doc */
49
- .s2 { color: #e6db74 } /* Literal.String.Double */
50
- .se { color: #ae81ff } /* Literal.String.Escape */
51
- .sh { color: #e6db74 } /* Literal.String.Heredoc */
52
- .si { color: #e6db74 } /* Literal.String.Interpol */
53
- .sx { color: #e6db74 } /* Literal.String.Other */
54
- .sr { color: #e6db74 } /* Literal.String.Regex */
55
- .s1 { color: #e6db74 } /* Literal.String.Single */
56
- .ss { color: #e6db74 } /* Literal.String.Symbol */
57
- .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
58
- .vc { color: #f8f8f2 } /* Name.Variable.Class */
59
- .vg { color: #f8f8f2 } /* Name.Variable.Global */
60
- .vi { color: #f8f8f2 } /* Name.Variable.Instance */
61
- .il { color: #ae81ff } /* Literal.Number.Integer.Long */
62
- .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
63
- .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
64
- .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
1
+ .highlight {
2
+ pre { background-color: #272822; }
3
+ .hll { background-color: #272822; }
4
+ .c { color: #75715e } /* Comment */
5
+ .err { color: #960050; background-color: #1e0010 } /* Error */
6
+ .k { color: #66d9ef } /* Keyword */
7
+ .l { color: #ae81ff } /* Literal */
8
+ .n { color: #f8f8f2 } /* Name */
9
+ .o { color: #f92672 } /* Operator */
10
+ .p { color: #f8f8f2 } /* Punctuation */
11
+ .cm { color: #75715e } /* Comment.Multiline */
12
+ .cp { color: #75715e } /* Comment.Preproc */
13
+ .c1 { color: #75715e } /* Comment.Single */
14
+ .cs { color: #75715e } /* Comment.Special */
15
+ .ge { font-style: italic } /* Generic.Emph */
16
+ .gs { font-weight: bold } /* Generic.Strong */
17
+ .kc { color: #66d9ef } /* Keyword.Constant */
18
+ .kd { color: #66d9ef } /* Keyword.Declaration */
19
+ .kn { color: #f92672 } /* Keyword.Namespace */
20
+ .kp { color: #66d9ef } /* Keyword.Pseudo */
21
+ .kr { color: #66d9ef } /* Keyword.Reserved */
22
+ .kt { color: #66d9ef } /* Keyword.Type */
23
+ .ld { color: #e6db74 } /* Literal.Date */
24
+ .m { color: #ae81ff } /* Literal.Number */
25
+ .s { color: #e6db74 } /* Literal.String */
26
+ .na { color: #a6e22e } /* Name.Attribute */
27
+ .nb { color: #f8f8f2 } /* Name.Builtin */
28
+ .nc { color: #a6e22e } /* Name.Class */
29
+ .no { color: #66d9ef } /* Name.Constant */
30
+ .nd { color: #a6e22e } /* Name.Decorator */
31
+ .ni { color: #f8f8f2 } /* Name.Entity */
32
+ .ne { color: #a6e22e } /* Name.Exception */
33
+ .nf { color: #a6e22e } /* Name.Function */
34
+ .nl { color: #f8f8f2 } /* Name.Label */
35
+ .nn { color: #f8f8f2 } /* Name.Namespace */
36
+ .nx { color: #a6e22e } /* Name.Other */
37
+ .py { color: #f8f8f2 } /* Name.Property */
38
+ .nt { color: #f92672 } /* Name.Tag */
39
+ .nv { color: #f8f8f2 } /* Name.Variable */
40
+ .ow { color: #f92672 } /* Operator.Word */
41
+ .w { color: #f8f8f2 } /* Text.Whitespace */
42
+ .mf { color: #ae81ff } /* Literal.Number.Float */
43
+ .mh { color: #ae81ff } /* Literal.Number.Hex */
44
+ .mi { color: #ae81ff } /* Literal.Number.Integer */
45
+ .mo { color: #ae81ff } /* Literal.Number.Oct */
46
+ .sb { color: #e6db74 } /* Literal.String.Backtick */
47
+ .sc { color: #e6db74 } /* Literal.String.Char */
48
+ .sd { color: #e6db74 } /* Literal.String.Doc */
49
+ .s2 { color: #e6db74 } /* Literal.String.Double */
50
+ .se { color: #ae81ff } /* Literal.String.Escape */
51
+ .sh { color: #e6db74 } /* Literal.String.Heredoc */
52
+ .si { color: #e6db74 } /* Literal.String.Interpol */
53
+ .sx { color: #e6db74 } /* Literal.String.Other */
54
+ .sr { color: #e6db74 } /* Literal.String.Regex */
55
+ .s1 { color: #e6db74 } /* Literal.String.Single */
56
+ .ss { color: #e6db74 } /* Literal.String.Symbol */
57
+ .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
58
+ .vc { color: #f8f8f2 } /* Name.Variable.Class */
59
+ .vg { color: #f8f8f2 } /* Name.Variable.Global */
60
+ .vi { color: #f8f8f2 } /* Name.Variable.Instance */
61
+ .il { color: #ae81ff } /* Literal.Number.Integer.Long */
62
+ .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
63
+ .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
64
+ .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
65
65
  }
data/_sass/whiteblog-theme.scss CHANGED
@@ -1,6 +1,6 @@
1
- @charset "utf-8";
2
-
3
- @import
4
- "whiteblog-theme/layout",
5
- "whiteblog-theme/syntax-highlighting"
1
+ @charset "utf-8";
2
+
3
+ @import
4
+ "whiteblog-theme/layout",
5
+ "whiteblog-theme/syntax-highlighting"
6
6
  ;