concrete-jekyll 1.0.1 → 1.2.0
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/_includes/footer.html +22 -0
- data/_includes/head.html +1 -1
- data/_includes/header.html +44 -2
- data/_includes/main.html +10 -1
- data/_includes/sections/announcement-bar.html +12 -0
- data/_layouts/home.html +1 -0
- data/_sass/_code.scss +2 -2
- data/_sass/_footer.scss +5 -0
- data/_sass/_forms.scss +142 -25
- data/_sass/_global.scss +21 -0
- data/_sass/_grid.scss +169 -0
- data/_sass/_header.scss +17 -0
- data/_sass/_icons.scss +2 -2
- data/_sass/_main.scss +6 -0
- data/_sass/_navigation.scss +71 -0
- data/_sass/_reset.scss +3 -24
- data/_sass/_tables.scss +43 -0
- data/_sass/_typography.scss +51 -42
- data/assets/{main.scss → concrete.scss} +59 -12
- metadata +9 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 19890ec9252f9509e76cef01f8e3899a22ad5b9c
|
4
|
+
data.tar.gz: 9904868d042fc5f4eaf87930c50208e5379a2c1a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8bc9414f2b26642dd93f71b07ac214397eaa534f0915175a2afb88c7280bdbb0eac8b0d255c9437133634229832572adbcdc24f6d7d23553a2fd5f0d1f622646
|
7
|
+
data.tar.gz: bc01ca7edb15759519b2612fca93bfab7b6719864635e112c31489a933e99fba724d3e5c2a084b4b15e6fca03791780f886fd7f41e66dd0c8faa5fbd07dc68b8
|
data/_includes/footer.html
CHANGED
@@ -1 +1,23 @@
|
|
1
|
+
<footer class="theme-footer" role="contentinfo">
|
2
|
+
<div class="container center">
|
3
|
+
<div class="row l-table">
|
4
|
+
<div class="column l5 m12 s12 l-left v-middle">
|
5
|
+
social links
|
6
|
+
</div>
|
7
|
+
<div class="column l7 m12 s12 l-right v-middle">
|
8
|
+
subscription
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
|
13
|
+
<div class="container center">
|
14
|
+
<div class="row no-margin l-table">
|
15
|
+
<div class="column l7 m12 s12 l-left v-middle">
|
16
|
+
</div>
|
17
|
+
<div class="column l5 m12 s12 l-right v-middle">
|
18
|
+
<small>© {{ 'now' | date: "%Y" }} <a href="/">{{ site.name }}</a></small>
|
19
|
+
</div>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
</footer>
|
1
23
|
</body>
|
data/_includes/head.html
CHANGED
@@ -23,7 +23,7 @@ MIT License
|
|
23
23
|
<meta name="description" content="{{ site.description }}">
|
24
24
|
|
25
25
|
<title>{{ site.title }}</title>
|
26
|
-
<link href="{{ site.github.url }}/assets/
|
26
|
+
<link href="{{ site.github.url }}/assets/concrete.css" rel="stylesheet" type="text/css" media="all">
|
27
27
|
<link rel="shortcut icon" href="{{ site.github.url }}/assets/favicon.png" type="image/png" />
|
28
28
|
|
29
29
|
<!-- Fonts and CDN content =============================================== -->
|
data/_includes/header.html
CHANGED
@@ -1,3 +1,45 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
{% if site.logo %}{% assign logo = site.logo %}{% endif %}
|
2
|
+
{% if site.logo_width %}{% assign logo_width = site.logo_width %}{% else %}{% assign logo_width = 100 %}{% endif %}
|
3
|
+
|
4
|
+
<header class="theme-header" role="banner">
|
5
|
+
<div class="container">
|
6
|
+
|
7
|
+
<div class="row l-table m-table">
|
8
|
+
|
9
|
+
|
10
|
+
<div class="column l8 s6 l-left m-left v-top">
|
11
|
+
{% if page.layout == 'home' %}
|
12
|
+
<h1 class="logo" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">{{ site.name }}</h1>
|
13
|
+
{% else %}
|
14
|
+
<div class="h1 logo" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
15
|
+
{% endif %}
|
16
|
+
|
17
|
+
<meta itemprop="name" content="{{ site.name }}">
|
18
|
+
{% if site.logo %}
|
19
|
+
<a href="/" itemprop="url" title="{{ site.name }}" class="logo-image">
|
20
|
+
<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
|
21
|
+
<img src="{{ logo | img_url: logo_width, scale: 2 }}" alt="{{ shop.name }}" title="{{ shop.name }}" itemprop="image" width="{{ logo_width | replace: 'x', 'px' }}">
|
22
|
+
</span>
|
23
|
+
</a>
|
24
|
+
{% else %}
|
25
|
+
<a href="/" itemprop="url" title="{{ shop.name }}">{{ shop.name }}</a>
|
26
|
+
{% endif %}
|
27
|
+
|
28
|
+
{% if page.layout == 'home' %}
|
29
|
+
</h1>
|
30
|
+
{% else %}
|
31
|
+
</div>
|
32
|
+
{% endif %}
|
33
|
+
</div>
|
34
|
+
|
35
|
+
<div class="column l4 s6 l-right m-right v-top">
|
36
|
+
Side bit.
|
37
|
+
</div>
|
38
|
+
|
39
|
+
</div>
|
40
|
+
|
41
|
+
<div class="row l-table m-table">
|
42
|
+
</div>
|
43
|
+
|
44
|
+
</div>
|
3
45
|
</header>
|
data/_includes/main.html
CHANGED
@@ -0,0 +1,12 @@
|
|
1
|
+
{% comment %}TO do: add slick {% endcomment %}
|
2
|
+
{% if site.announcement %}
|
3
|
+
<section class="announcements">
|
4
|
+
{% for announcement in site.announcement %}
|
5
|
+
<div class="announcement center">
|
6
|
+
{% if annoucement.url %}<a href="{{ annoucement.url }}">{% endif %}
|
7
|
+
<h5 class="no-margin">{{ announcement.title }}</h5>
|
8
|
+
{% if annoucement.url %}</a>{% endif %}
|
9
|
+
</div>
|
10
|
+
{% endfor %}
|
11
|
+
</section>
|
12
|
+
{% endif %}
|
data/_layouts/home.html
CHANGED
data/_sass/_code.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
code.highlighter-rouge {
|
2
2
|
font-family: Menlo, monospace;
|
3
3
|
font-weight: 900;
|
4
|
-
color: $
|
4
|
+
color: $colorBrand;
|
5
5
|
overflow: scroll;
|
6
6
|
}
|
7
7
|
|
@@ -125,7 +125,7 @@ code.highlighter-rouge {
|
|
125
125
|
.kr,
|
126
126
|
.nt,
|
127
127
|
.ow {
|
128
|
-
color: $
|
128
|
+
color: $colorBrand;
|
129
129
|
}
|
130
130
|
|
131
131
|
.m,
|
data/_sass/_footer.scss
ADDED
data/_sass/_forms.scss
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
|
1
|
+
/* Forms =====================================================================*/
|
2
|
+
|
2
3
|
form {
|
3
4
|
max-width: 100%;
|
4
5
|
}
|
@@ -11,19 +12,41 @@ input[type="search"],
|
|
11
12
|
textarea {
|
12
13
|
max-width: 100%;
|
13
14
|
height: $gutter;
|
14
|
-
line-height:
|
15
|
+
line-height: 1;
|
15
16
|
padding: 0 $gutter/2;
|
16
17
|
font-size: 1.125rem;
|
17
|
-
|
18
|
+
font-family: inherit;
|
19
|
+
border: $borderWeight $borderStyle $colorAlternate;
|
18
20
|
border-radius: $borderRadius;
|
19
21
|
-webkit-appearance: none;
|
22
|
+
// Input & textarea placeholders
|
23
|
+
&::placeholder { // Spec
|
24
|
+
color: inherit;
|
25
|
+
opacity: 0.75;
|
26
|
+
}
|
27
|
+
&::-webkit-input-placeholder { // Webkit
|
28
|
+
color: inherit;
|
29
|
+
opacity: 0.75;
|
30
|
+
}
|
31
|
+
&::-moz-placeholder { // Firefox 19+
|
32
|
+
color: inherit;
|
33
|
+
opacity: 0.75;
|
34
|
+
}
|
35
|
+
&:-ms-input-placeholder { // IE 10+
|
36
|
+
color: inherit;
|
37
|
+
opacity: 0.75;
|
38
|
+
}
|
39
|
+
&:-moz-placeholder { // Firefox 18-
|
40
|
+
color: inherit;
|
41
|
+
opacity: 0.75;
|
42
|
+
}
|
20
43
|
@media only screen and (max-width: $s) {
|
21
44
|
width: 100%;
|
22
45
|
clear: both;
|
23
46
|
margin-bottom: $gutter/3;
|
24
47
|
}
|
25
48
|
&.error {
|
26
|
-
border-color: $
|
49
|
+
border-color: $colorHighlight;
|
27
50
|
}
|
28
51
|
}
|
29
52
|
textarea {
|
@@ -40,17 +63,20 @@ input[type="button"],
|
|
40
63
|
input[type="submit"],
|
41
64
|
input[type="reset"],
|
42
65
|
select {
|
66
|
+
display: inline-block;
|
43
67
|
max-width: 100%;
|
44
68
|
height: $gutter;
|
45
69
|
line-height: ($gutter - $borderWeight*2);
|
46
70
|
padding: 0 $gutter/1.5;
|
47
71
|
font-size: 1.125rem;
|
48
|
-
|
49
|
-
|
50
|
-
|
72
|
+
font-family: $bodyFontStack;
|
73
|
+
font-weight: $bodyFontWeight;
|
74
|
+
text-align: center;
|
75
|
+
color: lighten($colorBrand, 25%);
|
76
|
+
background-color: $colorBrand;
|
77
|
+
border: $borderWeight $borderStyle $colorBrand;
|
51
78
|
border-radius: $borderRadius;
|
52
|
-
|
53
|
-
-moz-appearance: none;
|
79
|
+
@include prefixer(appearance, none, webkit moz);
|
54
80
|
@include transition();
|
55
81
|
option {
|
56
82
|
// for Firefox
|
@@ -60,26 +86,26 @@ select {
|
|
60
86
|
color: $colorText;
|
61
87
|
}
|
62
88
|
&:hover {
|
63
|
-
background-color: darken($
|
64
|
-
border-color: darken($
|
65
|
-
color: lighten($
|
89
|
+
background-color: darken($colorBrand, 5%);
|
90
|
+
border-color: darken($colorBrand, 5%);
|
91
|
+
color: lighten($colorBrand, 35%);
|
66
92
|
cursor: pointer;
|
67
93
|
}
|
68
94
|
&.alternate {
|
69
|
-
color: lighten($
|
70
|
-
background-color: $
|
71
|
-
border: $borderWeight $borderStyle $
|
95
|
+
color: lighten($colorAlternate, 25%);
|
96
|
+
background-color: $colorAlternate;
|
97
|
+
border: $borderWeight $borderStyle $colorAlternate;
|
72
98
|
&:hover {
|
73
|
-
background-color: darken($
|
74
|
-
border-color: darken($
|
75
|
-
color: lighten($
|
99
|
+
background-color: darken($colorAlternate, 5%);
|
100
|
+
border-color: darken($colorAlternate, 5%);
|
101
|
+
color: lighten($colorAlternate, 35%);
|
76
102
|
}
|
77
103
|
}
|
78
104
|
&:disabled, &.disabled {
|
79
105
|
cursor: default;
|
80
|
-
background-color: lighten($
|
81
|
-
border-color: lighten($
|
82
|
-
color: lighten($
|
106
|
+
background-color: lighten($colorAlternate, 30%);
|
107
|
+
border-color: lighten($colorAlternate, 30%);
|
108
|
+
color: lighten($colorAlternate, 0%);
|
83
109
|
&:hover {
|
84
110
|
@extend .disabled
|
85
111
|
}
|
@@ -90,6 +116,97 @@ select {
|
|
90
116
|
margin-bottom: $gutter/3;
|
91
117
|
}
|
92
118
|
}
|
119
|
+
// Checkboxes
|
120
|
+
input[type="checkbox"] {
|
121
|
+
display: inline-block;
|
122
|
+
width: 1rem;
|
123
|
+
height: 1rem;
|
124
|
+
margin-right: 0.5rem;
|
125
|
+
border: $borderWeight $borderStyle $colorAlternate;
|
126
|
+
border-radius: $borderRadius;
|
127
|
+
cursor: pointer;
|
128
|
+
&:checked {
|
129
|
+
background-color: $colorText;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
// Hide number input spinner
|
133
|
+
input[type=number]::-webkit-inner-spin-button,
|
134
|
+
input[type=number]::-webkit-outer-spin-button {
|
135
|
+
-webkit-appearance: none;
|
136
|
+
margin: 0;
|
137
|
+
}
|
138
|
+
input::-webkit-textfield-decoration-container {
|
139
|
+
display: inline;
|
140
|
+
align-items: center;
|
141
|
+
content: inherit !important;
|
142
|
+
}
|
143
|
+
// Range slider inputs
|
144
|
+
.range-slider {
|
145
|
+
position: relative;
|
146
|
+
display: inline-block;
|
147
|
+
margin-top: 1rem;
|
148
|
+
width: 100%;
|
149
|
+
span {
|
150
|
+
position: absolute;
|
151
|
+
line-height: 1rem;
|
152
|
+
&:nth-of-type(1) {
|
153
|
+
top: -1rem;
|
154
|
+
left: 0;
|
155
|
+
}
|
156
|
+
&:nth-of-type(2) {
|
157
|
+
top: -1rem;
|
158
|
+
right: 0;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
@mixin inputSliderThumb() {
|
162
|
+
width: $gutter/3 - $borderRadius*2;
|
163
|
+
height: $gutter/3 - $borderRadius*2;
|
164
|
+
background-color: $colorText;
|
165
|
+
border: 0;
|
166
|
+
// border-radius: ($gutter/3 - $borderRadius*2)/2; For a circular grabber
|
167
|
+
cursor: pointer;
|
168
|
+
}
|
169
|
+
@mixin inputSliderTrack() {
|
170
|
+
background-color: transparent;
|
171
|
+
cursor: pointer;
|
172
|
+
}
|
173
|
+
input[type=range] {
|
174
|
+
width: 100%;
|
175
|
+
height: $gutter/3;
|
176
|
+
display: inline-block;
|
177
|
+
border: $borderWeight $borderStyle $colorAlternate;
|
178
|
+
border-radius: $borderRadius;
|
179
|
+
cursor: pointer;
|
180
|
+
&::-webkit-slider-runnable-track {
|
181
|
+
@include inputSliderTrack();
|
182
|
+
}
|
183
|
+
&::-moz-range-track {
|
184
|
+
@include inputSliderTrack();
|
185
|
+
}
|
186
|
+
&::-ms-track {
|
187
|
+
@include inputSliderTrack();
|
188
|
+
}
|
189
|
+
&::-webkit-slider-thumb {
|
190
|
+
-webkit-appearance: none;
|
191
|
+
@include inputSliderThumb();
|
192
|
+
}
|
193
|
+
&::-moz-range-thumb {
|
194
|
+
@include inputSliderThumb();
|
195
|
+
border-radius: 0;
|
196
|
+
}
|
197
|
+
&::-moz-range-thumb {
|
198
|
+
@include inputSliderThumb();
|
199
|
+
}
|
200
|
+
// Firefox focus fix
|
201
|
+
&::-moz-focus-outer {
|
202
|
+
border: 0;
|
203
|
+
}
|
204
|
+
// Edge
|
205
|
+
&::-ms-tooltip {
|
206
|
+
display: none;
|
207
|
+
}
|
208
|
+
}
|
209
|
+
}
|
93
210
|
a.button {
|
94
211
|
display: inline-block;
|
95
212
|
text-decoration: none;
|
@@ -106,9 +223,9 @@ a.button {
|
|
106
223
|
.errors, .note {
|
107
224
|
padding: $gutter/3.5;
|
108
225
|
margin: $gutter/2 auto;
|
109
|
-
color: lighten($
|
110
|
-
background-color: $
|
111
|
-
border: $borderWeight $borderStyle $
|
226
|
+
color: lighten($colorHighlight, 50%);
|
227
|
+
background-color: $colorHighlight;
|
228
|
+
border: $borderWeight $borderStyle $colorHighlight;
|
112
229
|
border-radius: $borderRadius;
|
113
230
|
li {
|
114
231
|
margin-bottom: $gutter/3;
|
@@ -117,6 +234,6 @@ a.button {
|
|
117
234
|
}
|
118
235
|
}
|
119
236
|
a {
|
120
|
-
color: lighten($
|
237
|
+
color: lighten($colorHighlight, 50%);
|
121
238
|
}
|
122
239
|
}
|
data/_sass/_global.scss
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
|
2
|
+
/* Global ====================================================================*/
|
3
|
+
|
4
|
+
html {
|
5
|
+
height: 100%
|
6
|
+
}
|
7
|
+
|
8
|
+
body {
|
9
|
+
height: 100%;
|
10
|
+
color: $colorText;
|
11
|
+
background-color: $colorBackground;
|
12
|
+
font: 16px/21px $bodyFontStack, sans-serif;
|
13
|
+
font-weight: $bodyFontWeight;
|
14
|
+
-webkit-font-smoothing: antialiased;
|
15
|
+
}
|
16
|
+
|
17
|
+
img {
|
18
|
+
max-width: 100%;
|
19
|
+
display: block;
|
20
|
+
line-height: 0;
|
21
|
+
}
|
data/_sass/_grid.scss
CHANGED
@@ -0,0 +1,169 @@
|
|
1
|
+
/* Grid System ===============================================================*/
|
2
|
+
|
3
|
+
.container {
|
4
|
+
max-width: 100%;
|
5
|
+
width: 100%;
|
6
|
+
margin: auto;
|
7
|
+
padding: 0 $gutter;
|
8
|
+
&.xl {
|
9
|
+
width: $xl;
|
10
|
+
}
|
11
|
+
&.l {
|
12
|
+
width: $l;
|
13
|
+
}
|
14
|
+
&.m {
|
15
|
+
width: $m;
|
16
|
+
}
|
17
|
+
&.s {
|
18
|
+
width: $s;
|
19
|
+
}
|
20
|
+
@include s() {
|
21
|
+
padding: 0 $gutter/2;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
// Rows
|
26
|
+
.row {
|
27
|
+
margin: 0 (-$gutter/2) $gutter;
|
28
|
+
|
29
|
+
// Column Grid
|
30
|
+
&:after {
|
31
|
+
content: "";
|
32
|
+
display: table;
|
33
|
+
clear: both;
|
34
|
+
}
|
35
|
+
&.collapse {
|
36
|
+
margin: 0 !important;
|
37
|
+
.column {
|
38
|
+
padding: 0;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Table Grid
|
43
|
+
&.table {
|
44
|
+
@include table();
|
45
|
+
&:after { content: none; }
|
46
|
+
}
|
47
|
+
&.xl-table { @include xl() { @include table(); } }
|
48
|
+
&.l-table { @include l() { @include table(); } }
|
49
|
+
&.m-table { @include m() { @include table(); } }
|
50
|
+
&.s-table { @include s() { @include table(); } }
|
51
|
+
|
52
|
+
// Reverse Grid
|
53
|
+
&.reverse { @include reverse(); }
|
54
|
+
&.xl-reverse { @include xl() { @include reverse(); } }
|
55
|
+
&.l-reverse { @include l() { @include reverse(); } }
|
56
|
+
&.m-reverse { @include m() { @include reverse(); } }
|
57
|
+
&.s-reverse { @include s() { @include reverse(); } }
|
58
|
+
}
|
59
|
+
|
60
|
+
// Column Grid
|
61
|
+
.column {
|
62
|
+
float: left;
|
63
|
+
min-height: 0.125rem;
|
64
|
+
padding: 0 $gutter/2;
|
65
|
+
}
|
66
|
+
@for $i from 1 through 12 {
|
67
|
+
.column.l#{$i} {
|
68
|
+
width: percentage($i/12);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
@include m() {
|
72
|
+
@for $i from 1 through 12 {
|
73
|
+
.column.m#{$i} {
|
74
|
+
width: percentage($i/12);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
@include s() {
|
79
|
+
@for $i from 1 through 12 {
|
80
|
+
.column.s#{$i} {
|
81
|
+
width: percentage($i/12);
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// Uniform Height Clearing
|
87
|
+
@include l() {
|
88
|
+
.column.l2:nth-child(6n+1) { clear: both; }
|
89
|
+
.column.l3:nth-child(4n+1) { clear: both; }
|
90
|
+
.column.l4:nth-child(3n+1) { clear: both; }
|
91
|
+
.column.l6:nth-child(2n+1) { clear: both; }
|
92
|
+
}
|
93
|
+
@include m() {
|
94
|
+
.column.m2:nth-child(6n+1) { clear: both; }
|
95
|
+
.column.m3:nth-child(4n+1) { clear: both; }
|
96
|
+
.column.m4:nth-child(3n+1) { clear: both; }
|
97
|
+
.column.m6:nth-child(2n+1) { clear: both; }
|
98
|
+
}
|
99
|
+
@include s() {
|
100
|
+
.column.s2:nth-child(6n+1) { clear: both; }
|
101
|
+
.column.s3:nth-child(4n+1) { clear: both; }
|
102
|
+
.column.s4:nth-child(3n+1) { clear: both; }
|
103
|
+
.column.s6:nth-child(2n+1) { clear: both; }
|
104
|
+
}
|
105
|
+
|
106
|
+
// Flex Grid
|
107
|
+
.flex {
|
108
|
+
@include flex();
|
109
|
+
@include box-orient--vertical();
|
110
|
+
@include flex-direction(column);
|
111
|
+
.row {
|
112
|
+
@include flex();
|
113
|
+
@include flex-direction(row);
|
114
|
+
.box {
|
115
|
+
margin: 0 $gutter/2 $gutter;
|
116
|
+
flex: auto;
|
117
|
+
align-self: center;
|
118
|
+
&:first-child {
|
119
|
+
margin-left: 0;
|
120
|
+
}
|
121
|
+
&:last-child {
|
122
|
+
margin-right: 0;
|
123
|
+
}
|
124
|
+
&.center {
|
125
|
+
text-align: center;
|
126
|
+
align-items: center;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
@include s() {
|
130
|
+
@include flex-direction(column);
|
131
|
+
.box {
|
132
|
+
width: 100%;
|
133
|
+
margin: 0 0 $gutter;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
// Grid helpers
|
140
|
+
@include xl() {
|
141
|
+
.xl-hide { display: none !important; }
|
142
|
+
.xl-left { text-align: left; }
|
143
|
+
.xl-center { text-align: center; }
|
144
|
+
.xl-right { text-align: right; }
|
145
|
+
.l-show, .m-show, .s-show { display: none !important; }
|
146
|
+
}
|
147
|
+
@include l() {
|
148
|
+
.l-hide { display: none !important; }
|
149
|
+
.l-left { text-align: left; }
|
150
|
+
.l-center { text-align: center; }
|
151
|
+
.l-right { text-align: right; }
|
152
|
+
.xl-show, .m-show, .s-show { display: none !important; }
|
153
|
+
}
|
154
|
+
@include m() {
|
155
|
+
.m-hide { display: none !important; }
|
156
|
+
.m-left { text-align: left; }
|
157
|
+
.m-center { text-align: center; }
|
158
|
+
.m-right { text-align: right; }
|
159
|
+
.l-show { display: none !important; }
|
160
|
+
.xl-show, .l-show, .s-show { display: none !important; }
|
161
|
+
}
|
162
|
+
@include s() {
|
163
|
+
.s-hide { display: none !important; }
|
164
|
+
.s-left { text-align: left; }
|
165
|
+
.s-center { text-align: center; }
|
166
|
+
.s-right { text-align: right; }
|
167
|
+
.l-show { display: none !important; }
|
168
|
+
.xl-show, .l-show, .m-show { display: none !important; }
|
169
|
+
}
|
data/_sass/_header.scss
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
/* Header ====================================================================*/
|
2
|
+
|
3
|
+
.theme-header {
|
4
|
+
padding: $gutter 0;
|
5
|
+
.template-index & {
|
6
|
+
margin-bottom: 0;
|
7
|
+
}
|
8
|
+
.row { // TO DO - replace with new bottom-margin class
|
9
|
+
margin-bottom: 0;
|
10
|
+
}
|
11
|
+
.logo {
|
12
|
+
margin: 0;
|
13
|
+
a, span {
|
14
|
+
display: inline-block;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
data/_sass/_icons.scss
CHANGED
data/_sass/_main.scss
ADDED
@@ -0,0 +1,71 @@
|
|
1
|
+
/* Navigation =================================================================*/
|
2
|
+
|
3
|
+
// Main Nav
|
4
|
+
.theme-nav-main {
|
5
|
+
.nav-link {
|
6
|
+
font-size: 1.1rem;
|
7
|
+
font-weight: $fontBold;
|
8
|
+
margin-right: $gutter/3;
|
9
|
+
}
|
10
|
+
.dropdown {
|
11
|
+
position: relative;
|
12
|
+
&:hover {
|
13
|
+
.dropdown_menu {
|
14
|
+
display: block;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
.dropdown_menu {
|
18
|
+
display: none;
|
19
|
+
padding: $gutter/3 0;
|
20
|
+
position: absolute;
|
21
|
+
top: 1.5rem;
|
22
|
+
z-index: 2;
|
23
|
+
li {
|
24
|
+
display: block;
|
25
|
+
padding: $gutter/4 $gutter/1.5;
|
26
|
+
background: lighten($colorBackground, 30%);
|
27
|
+
&:first-of-type {
|
28
|
+
padding-top: $gutter/2;
|
29
|
+
}
|
30
|
+
&:last-of-type {
|
31
|
+
padding-bottom: $gutter/2;
|
32
|
+
}
|
33
|
+
a {
|
34
|
+
color: $colorBrand;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
// Pagination
|
42
|
+
.pagination {
|
43
|
+
a, .page.current {
|
44
|
+
display: inline-block;
|
45
|
+
min-width: $gutter;
|
46
|
+
height: $gutter;
|
47
|
+
text-align: center;
|
48
|
+
line-height: ($gutter - $borderWeight*2);
|
49
|
+
text-decoration: none;
|
50
|
+
font-size: 1.125rem;
|
51
|
+
color: $colorBrand;
|
52
|
+
padding: 0 $gutter/4;
|
53
|
+
border: $borderWeight $borderStyle $colorBrand;
|
54
|
+
border-radius: $borderRadius;
|
55
|
+
-webkit-appearance: none;
|
56
|
+
-moz-appearance: none;
|
57
|
+
&.active, &:hover {
|
58
|
+
color: lighten($colorBrand, 25%);
|
59
|
+
background-color: $colorBrand;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
.page.current {
|
63
|
+
color: lighten($colorBrand, 25%);
|
64
|
+
background-color: $colorBrand;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
// Breadcrumbs
|
69
|
+
.breadcrumb {
|
70
|
+
margin-bottom: $gutter;
|
71
|
+
}
|
data/_sass/_reset.scss
CHANGED
@@ -14,25 +14,6 @@ Project lead: George Butter - https://github.com/butsandcats
|
|
14
14
|
MIT License
|
15
15
|
==============================================================================*/
|
16
16
|
|
17
|
-
|
18
|
-
/* Global ====================================================================*/
|
19
|
-
|
20
|
-
html {
|
21
|
-
height: 100%
|
22
|
-
}
|
23
|
-
|
24
|
-
body {
|
25
|
-
height: 100%;
|
26
|
-
color: $colorText;
|
27
|
-
background-color: $colorDarkGray;
|
28
|
-
font: 16px/21px sans-serif;
|
29
|
-
-webkit-font-smoothing: antialiased;
|
30
|
-
}
|
31
|
-
|
32
|
-
img {
|
33
|
-
max-width: 100%;
|
34
|
-
}
|
35
|
-
|
36
17
|
/* Reset =====================================================================*/
|
37
18
|
|
38
19
|
html, body, div, span, applet, object, iframe,
|
@@ -57,7 +38,7 @@ time, mark, audio, video {
|
|
57
38
|
outline: none;
|
58
39
|
}
|
59
40
|
article, aside, details, figcaption, figure,
|
60
|
-
footer, header, hgroup,
|
41
|
+
footer, header, hgroup, menu, nav, section, main {
|
61
42
|
display: block;
|
62
43
|
}
|
63
44
|
body {
|
@@ -68,9 +49,6 @@ ol, ul {
|
|
68
49
|
}
|
69
50
|
blockquote, q {
|
70
51
|
quotes: none;
|
71
|
-
font-size: 1.6em;
|
72
|
-
font-weight: 600;
|
73
|
-
line-height: 1.5;
|
74
52
|
}
|
75
53
|
blockquote:before, blockquote:after,
|
76
54
|
q:before, q:after {
|
@@ -88,13 +66,14 @@ form, input, textarea, label, fieldset, legend, select, optgroup, option, button
|
|
88
66
|
-webkit-box-shadow: none;
|
89
67
|
-moz-box-shadow: none;
|
90
68
|
box-shadow: none;
|
91
|
-
// line-height: inherit; TBC
|
92
69
|
line-height: 1; // TBC
|
93
70
|
display: inline-block;
|
94
71
|
vertical-align: middle;
|
95
72
|
border: 0;
|
73
|
+
border-color: transparent;
|
96
74
|
outline: none;
|
97
75
|
color: inherit;
|
76
|
+
-webkit-appearance: none;
|
98
77
|
}
|
99
78
|
*,
|
100
79
|
*:after,
|
data/_sass/_tables.scss
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
// Tables
|
2
|
+
th, .th {
|
3
|
+
font-weight: $fontBold;
|
4
|
+
}
|
5
|
+
|
6
|
+
.rte {
|
7
|
+
ul, ol {
|
8
|
+
list-style: initial;
|
9
|
+
list-style-position: inside;
|
10
|
+
margin-bottom: $gutter/2;
|
11
|
+
li {
|
12
|
+
list-style: inherit;
|
13
|
+
list-style-position: inherit;
|
14
|
+
margin-bottom: $gutter/2;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
ol {
|
18
|
+
list-style-type: decimal;
|
19
|
+
}
|
20
|
+
table {
|
21
|
+
width: 100%;
|
22
|
+
tr {
|
23
|
+
td {
|
24
|
+
padding: $gutter/4;
|
25
|
+
&:first-of-type {
|
26
|
+
padding-left: 0;
|
27
|
+
}
|
28
|
+
&:last-of-type {
|
29
|
+
padding-right: 0;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
// Alternating rows
|
34
|
+
&.alternate tr {
|
35
|
+
&:nth-child(odd) {
|
36
|
+
background-color: rgba($colorText, 0.05);
|
37
|
+
}
|
38
|
+
td {
|
39
|
+
padding: $gutter/4;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
data/_sass/_typography.scss
CHANGED
@@ -1,55 +1,61 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
line-height: $lineHeight;
|
4
|
-
letter-spacing: 0.33px;
|
5
|
-
}
|
1
|
+
|
2
|
+
// Typography
|
6
3
|
|
7
4
|
h1, h2, h3, h4, h5, h6,
|
8
5
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
9
|
-
font-family:
|
10
|
-
line-height: $lineHeight;
|
6
|
+
font-family: $headingFontStack;
|
11
7
|
display: block;
|
12
|
-
margin-bottom: $
|
13
|
-
|
14
|
-
|
15
|
-
|
8
|
+
margin-bottom: $headingFontMargin;
|
9
|
+
font-weight: $headingFontWeight;
|
10
|
+
line-height: normal;
|
11
|
+
-webkit-font-smoothing: antialiased;
|
12
|
+
-webkit-text-size-adjust: 100%;
|
13
|
+
-webkit-margin-before: 0;
|
14
|
+
-webkit-margin-after: $headingFontMargin;
|
15
|
+
-webkit-margin-start: 0;
|
16
|
+
-webkit-margin-end: 0;
|
17
|
+
text-transform: $headingFontTransform;
|
16
18
|
}
|
19
|
+
|
17
20
|
h1, .h1 {
|
18
|
-
font-size:
|
19
|
-
font-weight: $fontBold;
|
20
|
-
letter-spacing: 0.5px
|
21
|
+
font-size: $h1Base+rem;
|
21
22
|
}
|
22
23
|
h2, .h2 {
|
23
|
-
font-size:
|
24
|
-
font-weight: $fontLight;
|
25
|
-
letter-spacing: 0.5px
|
24
|
+
font-size: $h2Base+rem;
|
26
25
|
}
|
27
26
|
h3, .h3 {
|
28
|
-
font-size:
|
27
|
+
font-size: $h3Base+rem;
|
28
|
+
}
|
29
|
+
h4, .h4 {
|
30
|
+
font-size: $h4Base+rem;
|
31
|
+
}
|
32
|
+
h5, .h5 {
|
33
|
+
font-size: $h5Base+rem;
|
34
|
+
}
|
35
|
+
h6, .h6 {
|
36
|
+
font-size: $h6Base+rem;
|
29
37
|
}
|
30
|
-
h4, .h4 { font-size: 1.5rem; }
|
31
|
-
h5, .h5 { font-size: 1.2rem; }
|
32
|
-
h6, .h6 { font-size: 1.1rem; }
|
33
38
|
|
34
39
|
p {
|
35
|
-
font-size:
|
36
|
-
font-weight: $
|
40
|
+
font-size: 1.125rem;
|
41
|
+
font-weight: $bodyFontWeight;
|
37
42
|
line-height: $lineHeight;
|
38
43
|
margin-bottom: 1.4rem;
|
39
44
|
}
|
40
45
|
|
41
46
|
a {
|
42
|
-
color: $
|
47
|
+
color: $colorBrand;
|
43
48
|
cursor: pointer;
|
49
|
+
text-decoration: $linkStyle;
|
44
50
|
@include transition();
|
45
51
|
&:hover, &:focus {
|
46
|
-
color: darken($
|
52
|
+
color: darken($colorBrand, 5%);
|
47
53
|
}
|
48
54
|
}
|
49
55
|
|
50
56
|
hr {
|
51
57
|
border: 0;
|
52
|
-
border-top: $borderWeight $borderStyle $
|
58
|
+
border-top: $borderWeight $borderStyle $colorAlternate;
|
53
59
|
margin: $gutter/1.5 0;
|
54
60
|
}
|
55
61
|
|
@@ -66,23 +72,26 @@ i {
|
|
66
72
|
}
|
67
73
|
|
68
74
|
.rte {
|
69
|
-
|
70
|
-
|
75
|
+
// Responsive typography
|
76
|
+
h1, .h1 {
|
77
|
+
@include responsive-type($baseFontSize, $h1Base, $baseFontSize, normal);
|
78
|
+
}
|
79
|
+
h2, .h2 {
|
80
|
+
@include responsive-type($baseFontSize, $h2Base, $baseFontSize, normal);
|
81
|
+
}
|
82
|
+
h3, .h3 {
|
83
|
+
@include responsive-type($baseFontSize, $h3Base, $baseFontSize, normal);
|
84
|
+
}
|
85
|
+
h4, .h4 {
|
86
|
+
@include responsive-type($baseFontSize, $h4Base, $baseFontSize, normal);
|
87
|
+
}
|
88
|
+
h5, .h5 {
|
89
|
+
@include responsive-type($baseFontSize, $h5Base, $baseFontSize, normal);
|
71
90
|
}
|
72
|
-
|
73
|
-
|
74
|
-
list-style-position: inside;
|
75
|
-
margin-bottom: $gutter/2;
|
76
|
-
li {
|
77
|
-
list-style: inherit;
|
78
|
-
list-style-position: inherit;
|
79
|
-
font-weight: $fontLight;
|
80
|
-
font-size: 1.15rem;
|
81
|
-
line-height: 2;
|
82
|
-
margin-bottom: $gutter/3;
|
83
|
-
}
|
91
|
+
h6, .h6 {
|
92
|
+
@include responsive-type($baseFontSize, $h6Base, $baseFontSize, normal);
|
84
93
|
}
|
85
|
-
|
86
|
-
|
94
|
+
p {
|
95
|
+
@include responsive-type($baseFontSize, $pBase, 14px, normal);
|
87
96
|
}
|
88
97
|
}
|
@@ -1,10 +1,17 @@
|
|
1
1
|
---
|
2
2
|
# this ensures Jekyll reads the file to be transformed into CSS later
|
3
|
-
# only Main files contain this front matter, not partials
|
3
|
+
# only Main files contain this front matter, not partials
|
4
4
|
---
|
5
5
|
|
6
6
|
// Variables ===================================================================
|
7
7
|
|
8
|
+
// Space & Borders
|
9
|
+
$gutter: 50px;
|
10
|
+
$borderRadius: 2px;
|
11
|
+
$borderWeight: 2px;
|
12
|
+
$borderStyle: solid;
|
13
|
+
$linkStyle: none;
|
14
|
+
|
8
15
|
// Palette
|
9
16
|
$colorWhite: #fbfbfb;
|
10
17
|
$colorLightGray: #f8f8f2;
|
@@ -19,7 +26,7 @@ $colorGreen: #50fa7b;
|
|
19
26
|
$colorOrange: #ffb86c;
|
20
27
|
$colorRed: #ff5555;
|
21
28
|
|
22
|
-
//
|
29
|
+
// Color mixer.
|
23
30
|
$colorOne: $colorRed;
|
24
31
|
$colorTwo: $colorBlue;
|
25
32
|
$colorThree: $colorGreen;
|
@@ -29,21 +36,36 @@ $colorSix: $colorCyan;
|
|
29
36
|
$colorSeven: $colorYellow;
|
30
37
|
$colorEight: $colorPink;
|
31
38
|
|
32
|
-
|
33
|
-
$
|
34
|
-
$
|
39
|
+
// Colors
|
40
|
+
$colorBrand: {% if site.color_brand %}{{ site.color_brand }}{% else %}$colorOne{% endif %};
|
41
|
+
$colorText: {% if site.color_text %}{{ site.color_text }}{% else %}$colorTwo{% endif %};
|
42
|
+
$colorForeground: {% if site.color_foreground %}{{ site.color_foreground }}{% else %}$colorThree{% endif %};
|
43
|
+
$colorBackground: {% if site.color_background %}{{ site.color_background }}{% else %}$colorFour{% endif %};
|
44
|
+
$colorHighlight: {% if site.color_highlight %}{{ site.color_highlight }}{% else %}$colorFive{% endif %};
|
45
|
+
$colorAlternate: {% if site.color_alternate %}{{ site.color_alternate }}{% else %}$colorSix{% endif %};
|
35
46
|
|
36
47
|
// Typography
|
37
48
|
$fontLight: 300;
|
38
49
|
$fontRegular: 400;
|
39
50
|
$fontBold: 600;
|
40
51
|
$lineHeight: 1.75;
|
52
|
+
$baseFontSize: 16px;
|
41
53
|
|
42
|
-
//
|
43
|
-
$
|
44
|
-
$
|
45
|
-
$
|
46
|
-
$
|
54
|
+
// Font bases
|
55
|
+
$headingFontMargin: $gutter/2;
|
56
|
+
$h1Base: 2.5;
|
57
|
+
$h2Base: 2;
|
58
|
+
$h3Base: 1.75;
|
59
|
+
$h4Base: 1.25;
|
60
|
+
$h5Base: 1;
|
61
|
+
$h6Base: 0.875;
|
62
|
+
$pBase: 0.01;
|
63
|
+
|
64
|
+
$bodyFontStack: {% if site.body_font_stack %}{{ site.body_font_stack }}{% else %}Helvetica, Arial, sans-serif{% endif %};
|
65
|
+
$headingFontStack: {% if site.heading_font_stack %}{{ site.heading_font_stack }}{% else %}Helvetica, Arial, sans-serif{% endif %};
|
66
|
+
$bodyFontWeight: {% if site.body_font_weight %}{{ site.body_font_weight }}{% else %}$fontRegular{% endif %};
|
67
|
+
$headingFontWeight: {% if site.heading_font_weight %}{{ site.heading_font_weight }}{% else %}$fontRegular{% endif %};
|
68
|
+
$headingFontTransform: {% if site.heading_font_transform %}{{ site.heading_font_transform }}{% else %}none{% endif %};
|
47
69
|
|
48
70
|
// Screen Sizes
|
49
71
|
$s: 650px;
|
@@ -113,6 +135,7 @@ $iconLinecap: square;
|
|
113
135
|
|
114
136
|
// Overlays
|
115
137
|
@mixin overlay() {
|
138
|
+
position: absolute;
|
116
139
|
top: 0;
|
117
140
|
left: 0;
|
118
141
|
right: 0;
|
@@ -197,15 +220,39 @@ $iconLinecap: square;
|
|
197
220
|
}
|
198
221
|
}
|
199
222
|
|
223
|
+
// Background images
|
224
|
+
@mixin background-image() {
|
225
|
+
background-size: cover;
|
226
|
+
background-repeat: no-repeat;
|
227
|
+
background-position: center;
|
228
|
+
}
|
229
|
+
|
230
|
+
// Responsive Typography
|
231
|
+
@mixin responsive-type($minFont, $viewport, $default, $kerning) {
|
232
|
+
font-size: em($default); // em fallback
|
233
|
+
font-size: -moz-calc(#{$minFont} + #{$viewport}vw);
|
234
|
+
font-size: -webkit-calc(#{$minFont} + #{$viewport}vw);
|
235
|
+
font-size: -o-calc(#{$minFont} + #{$viewport}vw);
|
236
|
+
font-size: calc(#{$minFont} + #{$viewport}vw);
|
237
|
+
letter-spacing: $kerning;
|
238
|
+
}
|
239
|
+
|
200
240
|
// Imports =====================================================================
|
201
241
|
|
202
|
-
@import "grid";
|
203
242
|
@import "reset";
|
204
|
-
@import "
|
243
|
+
@import "global";
|
205
244
|
@import "typography";
|
245
|
+
@import "tables";
|
206
246
|
@import "forms";
|
247
|
+
@import "grid";
|
248
|
+
@import "header";
|
249
|
+
@import "footer";
|
250
|
+
@import "main";
|
251
|
+
@import "navigation";
|
252
|
+
@import "helpers";
|
207
253
|
@import "code";
|
208
254
|
@import "icons";
|
255
|
+
|
209
256
|
// Add your additional css to the additions file if you wish to update easily
|
210
257
|
// later.
|
211
258
|
@import "additions";
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: concrete-jekyll
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0
|
4
|
+
version: 1.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- George Butter
|
@@ -51,16 +51,23 @@ files:
|
|
51
51
|
- _includes/header.html
|
52
52
|
- _includes/icon.html
|
53
53
|
- _includes/main.html
|
54
|
+
- _includes/sections/announcement-bar.html
|
54
55
|
- _layouts/home.html
|
55
56
|
- _sass/_additions.scss
|
56
57
|
- _sass/_code.scss
|
58
|
+
- _sass/_footer.scss
|
57
59
|
- _sass/_forms.scss
|
60
|
+
- _sass/_global.scss
|
58
61
|
- _sass/_grid.scss
|
62
|
+
- _sass/_header.scss
|
59
63
|
- _sass/_helpers.scss
|
60
64
|
- _sass/_icons.scss
|
65
|
+
- _sass/_main.scss
|
66
|
+
- _sass/_navigation.scss
|
61
67
|
- _sass/_reset.scss
|
68
|
+
- _sass/_tables.scss
|
62
69
|
- _sass/_typography.scss
|
63
|
-
- assets/
|
70
|
+
- assets/concrete.scss
|
64
71
|
homepage: http://rubygems.org/gems/concrete-jekyll
|
65
72
|
licenses:
|
66
73
|
- MIT
|