console-theme 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +172 -0
  4. data/_includes/category.html +91 -0
  5. data/_includes/comment.html +25 -0
  6. data/_includes/footer.html +25 -0
  7. data/_includes/global.html +33 -0
  8. data/_includes/head.html +29 -0
  9. data/_includes/header.html +20 -0
  10. data/_includes/home.html +51 -0
  11. data/_includes/navigation.html +21 -0
  12. data/_includes/not_found.html +8 -0
  13. data/_includes/search.html +44 -0
  14. data/_layouts/category.html +21 -0
  15. data/_layouts/default.html +1 -0
  16. data/_layouts/home.html +21 -0
  17. data/_layouts/main.html +21 -0
  18. data/_layouts/page.html +21 -0
  19. data/_layouts/post.html +27 -0
  20. data/_layouts/search.html +22 -0
  21. data/_sass/_blocks/card.scss +26 -0
  22. data/_sass/_blocks/category.scss +43 -0
  23. data/_sass/_blocks/container.scss +181 -0
  24. data/_sass/_blocks/icon.scss +139 -0
  25. data/_sass/_blocks/menu.scss +36 -0
  26. data/_sass/_blocks/post.scss +202 -0
  27. data/_sass/_blocks/site.scss +141 -0
  28. data/_sass/_configurations/base.scss +390 -0
  29. data/_sass/_configurations/color.scss +30 -0
  30. data/_sass/_mixins/_breakpoint.scss +57 -0
  31. data/_sass/style.scss +12 -0
  32. data/assets/css/simplePagination.css +196 -0
  33. data/assets/images/graphics/svg-symbols.svg +122 -0
  34. data/assets/js/jquery.simplePagination.js +393 -0
  35. data/assets/js/lunr.min.js +6 -0
  36. data/assets/js/main.js +26 -0
  37. data/assets/js/search.js +174 -0
  38. data/assets/js/svg4everybody.legacy.min.js +1 -0
  39. data/assets/js/svg4everybody.min.js +1 -0
  40. metadata +124 -0
data/_layouts/post.html ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ layout: post
3
+ ---
4
+ <!DOCTYPE html>
5
+ <html>
6
+ <head>
7
+ {% include head.html %}
8
+ </head>
9
+ <body>
10
+ {% include navigation.html %}
11
+ <div class="application">
12
+ {% include global.html %}
13
+ {% include search.html %}
14
+ {% include header.html %}
15
+ <section class="wrapper post">
16
+ {{content}}
17
+ {% if page.comments %}
18
+ {% include comment.html %}
19
+ {% endif %}
20
+ </section>
21
+ </div>
22
+ {% if page.comments %}
23
+ <script id="dsq-count-scr" src="//philsensus.disqus.com/count.js" async></script>
24
+ {% endif %}
25
+ </body>
26
+ {% include footer.html %}
27
+ </html>
data/_layouts/search.html ADDED
@@ -0,0 +1,22 @@
1
+ ---
2
+ layout: search
3
+ ---
4
+ <!DOCTYPE html>
5
+ <html>
6
+ <head>
7
+ {% include head.html %}
8
+ </head>
9
+ <body>
10
+ {% include navigation.html %}
11
+ <div class="application">
12
+ {% include global.html %}
13
+ {% include search.html %}
14
+ {% include header.html %}
15
+ <section class="wrapper search">
16
+ {{content}}
17
+ </section>
18
+ </div>
19
+ </body>
20
+
21
+ {% include footer.html %}
22
+ </html>
data/_sass/_blocks/card.scss ADDED
@@ -0,0 +1,26 @@
1
+ .card{
2
+ &-details{
3
+ border-top: 4px solid map-get($colors, _blue-global);
4
+ padding: 24px 19px;
5
+ width: 100%;
6
+
7
+ &-header{
8
+ display: flex;
9
+ flex-direction: column;
10
+ margin-bottom: 10px;
11
+
12
+ &-title{
13
+ font-weight: bold;
14
+ }
15
+
16
+ &-date{
17
+ font-style: italic;
18
+ }
19
+ }
20
+
21
+ &-readmore{
22
+ display: flex;
23
+ justify-content: flex-end;
24
+ }
25
+ }
26
+ }
data/_sass/_blocks/category.scss ADDED
@@ -0,0 +1,43 @@
1
+ .category{
2
+ border: 3px solid map-get($colors, _white);
3
+ background-color: map-get($colors, _blue-header);
4
+ border-radius: 25px;
5
+ padding: 16px;
6
+
7
+ &-list{
8
+ list-style-type: none;
9
+
10
+ @include breakpoint(mobile){
11
+ margin-left: 0px !important;
12
+ }
13
+
14
+ &-link{
15
+ color: map-get($colors, _green-lime) !important;
16
+ font-size: 20px;
17
+ line-height: 3;
18
+ &:hover{
19
+ color: map-get($colors, _white) !important;
20
+ }
21
+ }
22
+ }
23
+
24
+ &-sub{
25
+
26
+ &-list{
27
+
28
+ @include breakpoint(mobile){
29
+ margin-left: 0px !important;
30
+ }
31
+
32
+ list-style-type: none;
33
+
34
+ &-link{
35
+ color: map-get($colors, _white) !important;
36
+
37
+ &:hover{
38
+ color: map-get($colors, _green-lime) !important;
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
data/_sass/_blocks/container.scss ADDED
@@ -0,0 +1,181 @@
1
+ .container{
2
+
3
+ flex-basis: 100%;
4
+
5
+ &-inner{
6
+ display: flex;
7
+
8
+ &-hamburger{
9
+
10
+ min-height: 50px;
11
+ display: flex;
12
+
13
+ @include breakpoint(computers){
14
+ flex-basis: 5%;
15
+ justify-content: center;
16
+ align-items: center;
17
+ }
18
+
19
+ @include breakpoint(mobile){
20
+ flex-basis: 15%;
21
+ }
22
+
23
+ }
24
+
25
+ }
26
+
27
+ &-main{
28
+
29
+ display: flex;
30
+ justify-content: flex-start;
31
+ align-items: center;
32
+
33
+ @include breakpoint(computers){
34
+ flex-basis: 95%;
35
+ }
36
+
37
+ @include breakpoint(mobile){
38
+ flex-basis: 70%;
39
+ }
40
+
41
+ &-title{
42
+
43
+ @include breakpoint(computers){
44
+ flex-basis: 50%;
45
+ font: 400 25px "Pacifico", Helvetica, Arial, sans-serif;
46
+ color: map-get($colors, _green-lime) !important;
47
+ padding-left: 30px;
48
+ }
49
+
50
+ @include breakpoint(mobile){
51
+ display: none;
52
+ }
53
+
54
+ }
55
+
56
+ &-language{
57
+
58
+ display: flex;
59
+
60
+ @include breakpoint(computers){
61
+ flex-basis: 50%;
62
+ justify-content: flex-end;
63
+ padding-right: 30px;
64
+ }
65
+
66
+ @include breakpoint(mobile){
67
+ flex-basis: 100%;
68
+ justify-content: center;
69
+ }
70
+
71
+ &-link{
72
+ margin-left: 25px;
73
+
74
+ &:first-child{
75
+ margin: 0px;
76
+ }
77
+
78
+ @include breakpoint(mobile){
79
+ font-size: 13px;
80
+ }
81
+ }
82
+
83
+ }
84
+ }
85
+
86
+ &-search{
87
+
88
+ display: flex;
89
+
90
+ @include breakpoint(computers){
91
+ flex-basis: 5%;
92
+ justify-content: center;
93
+ }
94
+
95
+ @include breakpoint(mobile){
96
+ flex-basis: 15%;
97
+ justify-content: flex-end;
98
+ }
99
+
100
+ &-main{
101
+
102
+ display: flex;
103
+ justify-content: center;
104
+ align-items: center;
105
+ position: fixed;
106
+ min-width: 100%;
107
+ min-height: 100px;
108
+ background-color: map-get($colors, _blue-header);
109
+ visibility: hidden; /* never use display: block and none when giving animation!*/
110
+ opacity: 0;
111
+ transition: visibility 0.2s, opacity 0.2s linear;
112
+
113
+ @include breakpoint(computers){
114
+ padding: 30px 50px 50px 50px;
115
+ }
116
+
117
+ &.active{
118
+ visibility: visible;
119
+ opacity: 1;
120
+ }
121
+
122
+ }
123
+
124
+ &-inner{
125
+
126
+ display: flex;
127
+ flex-wrap: wrap;
128
+ flex-basis: 50%;
129
+
130
+ &-label{
131
+ flex-basis: 100%;
132
+ font-size: 20px;
133
+ margin: 3px;
134
+ color: map-get($colors, _white);
135
+ }
136
+
137
+ &-form{
138
+
139
+ flex-basis: 100%;
140
+ display: flex;
141
+
142
+ &-box{
143
+
144
+ min-width: 100%;
145
+ border: none;
146
+ padding: 15px;
147
+ line-height: 1.5em;
148
+ font-size: 15px;
149
+ font-family: 'PT Sans', sans-serif;
150
+
151
+ }
152
+
153
+ &-input{
154
+
155
+ flex-basis: 95%;
156
+ min-height: 40px;
157
+ background-color: map-get($colors, _white);
158
+
159
+ }
160
+
161
+ &-submit{
162
+
163
+ flex-basis: 5%;
164
+
165
+ &-button{
166
+ height: 100%;
167
+ padding: 15px;
168
+ background-color: map-get($colors, _blue-global);
169
+ color: map-get($colors, _white);
170
+ border: 2px solid map-get($colors, _white);
171
+ }
172
+
173
+ }
174
+
175
+ }
176
+
177
+ }
178
+
179
+ }
180
+
181
+ }
data/_sass/_blocks/icon.scss ADDED
@@ -0,0 +1,139 @@
1
+ .icon{
2
+
3
+ &-en{
4
+ width: 20px;
5
+ height: 10px;
6
+ }
7
+
8
+ &-ko{
9
+ width: 20px;
10
+ height: 10px;
11
+ }
12
+
13
+ &-de{
14
+ width: 20px;
15
+ height: 10px;
16
+ }
17
+
18
+ &-chevron{
19
+ &-top{
20
+ width: 30px;
21
+ height: 30px;
22
+ margin: 10px;
23
+ fill: map-get($colors, _white);
24
+ }
25
+ }
26
+
27
+ &-wrench{
28
+ width: 50px;
29
+ height: 50px;
30
+ margin: 10px;
31
+ fill: map-get($colors, _blue-linkedin);
32
+ }
33
+
34
+ &-warning{
35
+ width: 30px;
36
+ height: 20px;
37
+ fill: map-get($colors, _green-light);
38
+ }
39
+
40
+ &-tablet{
41
+ width: 30px;
42
+ height: 20px;
43
+ fill: map-get($colors, _green-light);
44
+ }
45
+
46
+ &-linkedin{
47
+ width: 50px;
48
+ height: 50px;
49
+ padding: 10px;
50
+ fill: map-get($colors, _white);
51
+ transition: fill 0.4s ease;
52
+
53
+ &:hover{
54
+ fill: map-get($colors, _blue-linkedin);
55
+ }
56
+ }
57
+
58
+ &-github{
59
+ width: 50px;
60
+ max-height: 50px;
61
+ padding: 10px;
62
+ fill: map-get($colors, _white);
63
+ transition: fill 0.4s ease;
64
+
65
+ &:hover{
66
+ fill: map-get($colors, _blue-github);
67
+ }
68
+ }
69
+
70
+ &-youtube{
71
+ width: 50px;
72
+ max-height: 50px;
73
+ padding: 10px;
74
+ fill: map-get($colors, _white);
75
+ transition: fill 0.4s ease;
76
+
77
+ &:hover{
78
+ fill: map-get($colors, _red-youtube);
79
+ }
80
+ }
81
+
82
+ &-jekyll{
83
+ width: 20px;
84
+ max-height: 20px;
85
+ fill: map-get($colors, _white);
86
+ }
87
+
88
+ &-hamburger{
89
+
90
+ cursor: pointer;
91
+
92
+ @include breakpoint(largest){
93
+ width: 50px !important;
94
+ }
95
+
96
+ @include breakpoint(computers){
97
+ width: 40px;
98
+ }
99
+
100
+ @include breakpoint(mobile){
101
+ width: 40px;
102
+ }
103
+
104
+ max-height: 50px;
105
+ padding: 10px;
106
+ fill: map-get($colors, _white);
107
+
108
+ }
109
+
110
+ &-search{
111
+
112
+ cursor: pointer;
113
+
114
+ @include breakpoint(largest){
115
+ width: 50px !important;
116
+ }
117
+
118
+ @include breakpoint(computers){
119
+ width: 40px;
120
+ }
121
+
122
+ @include breakpoint(mobile){
123
+ width: 40px;
124
+ }
125
+
126
+ max-height: 50px;
127
+ padding: 10px;
128
+ fill: map-get($colors, _white);
129
+ }
130
+
131
+ &-cross{
132
+ cursor: pointer;
133
+ max-height: 45px;
134
+ padding: 5px;
135
+ width: 100%;
136
+ fill: map-get($colors, _white);
137
+ }
138
+
139
+ }
data/_sass/_blocks/menu.scss ADDED
@@ -0,0 +1,36 @@
1
+ .menu{
2
+ &-list{
3
+ margin: 0;
4
+ padding: 0;
5
+ list-style: none;
6
+ display: flex;
7
+ flex-direction: column;
8
+ height: 80%;
9
+ }
10
+
11
+ &-item{
12
+ @include breakpoint(computers){
13
+ margin: 15px;
14
+ padding: 20px;
15
+ display: flex;
16
+ justify-content: flex-start;
17
+ }
18
+
19
+ @include breakpoint(mobile){
20
+ margin: 5px;
21
+ padding: 5px;
22
+ display: flex;
23
+ justify-content: flex-start;
24
+ }
25
+ }
26
+
27
+ &-link{
28
+ @include breakpoint(computers){
29
+ font-size: 30px;
30
+ }
31
+
32
+ @include breakpoint(mobile){
33
+ font-size: 15px;
34
+ }
35
+ }
36
+ }
data/_sass/_blocks/post.scss ADDED
@@ -0,0 +1,202 @@
1
+ .post{
2
+
3
+ display: flex;
4
+ flex-direction: column;
5
+
6
+ &-content{
7
+ margin-bottom: 30px;
8
+
9
+ & h2{
10
+ font-size: 32px;
11
+ }
12
+
13
+ & h3{
14
+ font-size: 28px;
15
+ }
16
+
17
+ & h4{
18
+ font-size: 20px;
19
+ }
20
+
21
+ }
22
+
23
+ &-header{
24
+ margin-bottom: 30px;
25
+ }
26
+
27
+ &-title{
28
+ font-size: 42px;
29
+ letter-spacing: -1px;
30
+ line-height: 1;
31
+ @include breakpoint(smallest){
32
+ font-size: 25px;
33
+ }
34
+ }
35
+
36
+ &-pagination{
37
+ display: flex;
38
+ flex-direction: column;
39
+ justify-content: center;
40
+ align-items: center;
41
+ margin-top: 10px;
42
+
43
+ &-page{
44
+
45
+ &-number{
46
+ border: 2px solid map-get($colors, _blue-header);
47
+ border-radius: 5px;
48
+ margin-right: 10px;
49
+ padding-left: 10px;
50
+ padding-right: 5px;
51
+
52
+ &:first-child{
53
+ padding-left: 10px;
54
+ padding-right: 5px;
55
+ }
56
+
57
+ &:last-child{
58
+ padding-left: 10px;
59
+ padding-right: 10px;
60
+ }
61
+
62
+ background-color: map-get($colors, _blue-header);
63
+ color: map-get($colors, _white);
64
+
65
+ &.active{
66
+ background-color: map-get($colors, _white);
67
+ }
68
+
69
+ &-link{
70
+ color: white !important;
71
+
72
+ &:visited{
73
+ color: white !important;
74
+ }
75
+
76
+ &.active{
77
+
78
+ color: map-get($colors, _blue-header) !important;
79
+
80
+ &:visited{
81
+ color: map-get($colors, _blue-header) !important;
82
+ }
83
+ }
84
+ }
85
+
86
+ }
87
+
88
+ }
89
+
90
+ &-list{
91
+ margin: 5px;
92
+ padding-left: 10px;
93
+ }
94
+
95
+ &-direction{
96
+ display: flex;
97
+ }
98
+
99
+ &-button{
100
+ &-outline{
101
+ padding: 1px 5px;
102
+ }
103
+ }
104
+ }
105
+
106
+ &-list{
107
+ display: flex;
108
+ flex-wrap: wrap;
109
+ align-items: stretch;
110
+ justify-content: flex-start;
111
+ list-style: none;
112
+ margin: 0;
113
+ padding: 0;
114
+
115
+ &-input-required{
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ flex-basis: 100%;
120
+ margin: 30px;
121
+ font: 13px "Press Start 2P", Helvetica, Arial, sans-serif;
122
+ }
123
+
124
+ &-no-results{
125
+ display: flex;
126
+ flex-direction: column;
127
+ justify-content: center;
128
+ align-items: center;
129
+ flex-basis: 100%;
130
+ margin: 50px;
131
+ font: 20px "Press Start 2P", Helvetica, Arial, sans-serif;
132
+ }
133
+
134
+ &-title{
135
+ display: flex;
136
+ justify-content: center;
137
+ margin-bottom: 20px;
138
+ }
139
+
140
+ &-enclosure{
141
+
142
+ /*two posts per row*/
143
+ &-2pr{
144
+ flex-basis: 48.5%;
145
+ border: 1px solid #d9d9d6;
146
+ border-bottom: 3px solid #d9d9d6;
147
+ display: flex;
148
+
149
+ @include breakpoint(smallest){
150
+ flex-basis: 100%;
151
+ }
152
+
153
+ @include breakpoint(tablet){
154
+ &:nth-child(odd){
155
+ margin-right: 16px;
156
+ }
157
+ }
158
+ }
159
+
160
+ /*one post per row*/
161
+ &-1pr{
162
+ border: 1px solid #d9d9d6;
163
+ border-bottom: 3px solid #d9d9d6;
164
+ display: flex;
165
+ flex-basis: 100%;
166
+ }
167
+ }
168
+
169
+ &-full{
170
+ display: flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+
174
+ &-button{
175
+
176
+ &-outline{
177
+ border: 2px solid map-get($colors, _blue-global);
178
+ padding: 10px 20px;
179
+ margin-top: 20px;
180
+ background-color: map-get($colors, _white);
181
+ color: map-get($colors, _blue-global);
182
+ transition: all 0.4s ease;
183
+ &:hover{
184
+ background-color: map-get($colors, _blue-global);
185
+ color: map-get($colors, _white);
186
+ }
187
+ }
188
+
189
+ }
190
+ }
191
+ }
192
+
193
+ &-meta{
194
+ font-size: 14px;
195
+ color: #828282;
196
+ }
197
+
198
+ &-link{
199
+ display: block;
200
+ font-size: 24px;
201
+ }
202
+ }