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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: aa6f54269d568ab96eb2cfad3e106bdf40ce5fec
4
- data.tar.gz: 8a4ee60db8c0ba762f0a34320a748f35cabf5539
3
+ metadata.gz: 19890ec9252f9509e76cef01f8e3899a22ad5b9c
4
+ data.tar.gz: 9904868d042fc5f4eaf87930c50208e5379a2c1a
5
5
  SHA512:
6
- metadata.gz: c62179388906a78ab50e22a98489e5d13c93e48e36d8a186bc467664aec5f785328b173b44b4eb7ff7e724d85e7e0d4865003f4747316c9378a3f262998076c1
7
- data.tar.gz: 36e4f31694817a39ba87a387fdc1564725b8da6191dd7ac2d841391224fe4cfc55b5802c07c945a9547c4ce0c98e496070d035e23dc55421b2ea0d71dadea80d
6
+ metadata.gz: 8bc9414f2b26642dd93f71b07ac214397eaa534f0915175a2afb88c7280bdbb0eac8b0d255c9437133634229832572adbcdc24f6d7d23553a2fd5f0d1f622646
7
+ data.tar.gz: bc01ca7edb15759519b2612fca93bfab7b6719864635e112c31489a933e99fba724d3e5c2a084b4b15e6fca03791780f886fd7f41e66dd0c8faa5fbd07dc68b8
@@ -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>&copy; {{ 'now' | date: "%Y" }} <a href="/">{{ site.name }}</a></small>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </footer>
1
23
  </body>
@@ -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/main.css" rel="stylesheet" type="text/css" media="all">
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 =============================================== -->
@@ -1,3 +1,45 @@
1
- <header>
2
- {{ site.name }}
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>
@@ -1,2 +1,11 @@
1
- <main>
1
+ <main id="MainContent" role="main">
2
+
3
+ <div class="container">
4
+ <div class="row">
5
+ <div class="column l12 m12 s12">
6
+ Main content
7
+ </div>
8
+ </div>
9
+ </div>
10
+
2
11
  </main>
@@ -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 %}
@@ -1,4 +1,5 @@
1
1
  {% include head.html %}
2
+ {% include sections/announcement-bar.html %}
2
3
  {% include header.html %}
3
4
  {% include main.html %}
4
5
  {% include footer.html %}
@@ -1,7 +1,7 @@
1
1
  code.highlighter-rouge {
2
2
  font-family: Menlo, monospace;
3
3
  font-weight: 900;
4
- color: $colorOne;
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: $colorOne;
128
+ color: $colorBrand;
129
129
  }
130
130
 
131
131
  .m,
@@ -0,0 +1,5 @@
1
+ /* Footer ====================================================================*/
2
+
3
+ .theme-footer {
4
+ padding: $gutter 0;
5
+ }
@@ -1,4 +1,5 @@
1
- // Forms
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: ($gutter - $borderWeight*2);
15
+ line-height: 1;
15
16
  padding: 0 $gutter/2;
16
17
  font-size: 1.125rem;
17
- border: $borderWeight $borderStyle $colorTwo;
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: $colorThree;
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
- color: lighten($colorOne, 25%);
49
- background-color: $colorOne;
50
- border: $borderWeight $borderStyle $colorOne;
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
- -webkit-appearance: none;
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($colorOne, 5%);
64
- border-color: darken($colorOne, 5%);
65
- color: lighten($colorOne, 35%);
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($colorTwo, 25%);
70
- background-color: $colorTwo;
71
- border: $borderWeight $borderStyle $colorTwo;
95
+ color: lighten($colorAlternate, 25%);
96
+ background-color: $colorAlternate;
97
+ border: $borderWeight $borderStyle $colorAlternate;
72
98
  &:hover {
73
- background-color: darken($colorTwo, 5%);
74
- border-color: darken($colorTwo, 5%);
75
- color: lighten($colorTwo, 35%);
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($colorTwo, 30%);
81
- border-color: lighten($colorTwo, 30%);
82
- color: lighten($colorTwo, 0%);
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($colorThree, 50%);
110
- background-color: $colorThree;
111
- border: $borderWeight $borderStyle $colorThree;
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($colorThree, 50%);
237
+ color: lighten($colorHighlight, 50%);
121
238
  }
122
239
  }
@@ -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
+ }
@@ -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
+ }
@@ -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
+ }
@@ -8,10 +8,10 @@
8
8
  fill: none;
9
9
  stroke: none;
10
10
  .fill {
11
- fill: $colorOne;
11
+ fill: $colorBrand;
12
12
  }
13
13
  .stroke {
14
- stroke: $colorOne;
14
+ stroke: $colorBrand;
15
15
  stroke-width: $borderWeight;
16
16
  stroke-linecap: $iconLinecap;
17
17
  stroke-miterlimit: 10;
@@ -0,0 +1,6 @@
1
+ /* Main Content ==============================================================*/
2
+
3
+ #MainContent {
4
+ padding-top: $gutter;
5
+ padding-bottom: $gutter;
6
+ }
@@ -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
+ }
@@ -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, nav, nav, section, main {
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,
@@ -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
+ }
@@ -1,55 +1,61 @@
1
- body {
2
- font-family: 'Montserrat', Helvetica, Arial, sans-serif;
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: 'Montserrat', Helvetica, Arial, sans-serif;
10
- line-height: $lineHeight;
6
+ font-family: $headingFontStack;
11
7
  display: block;
12
- margin-bottom: $gutter/4;
13
- a {
14
- text-decoration: none;
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: 4rem;
19
- font-weight: $fontBold;
20
- letter-spacing: 0.5px
21
+ font-size: $h1Base+rem;
21
22
  }
22
23
  h2, .h2 {
23
- font-size: 2.31rem;
24
- font-weight: $fontLight;
25
- letter-spacing: 0.5px
24
+ font-size: $h2Base+rem;
26
25
  }
27
26
  h3, .h3 {
28
- font-size: 2rem;
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: 1rem;
36
- font-weight: $fontRegular;
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: $colorOne;
47
+ color: $colorBrand;
43
48
  cursor: pointer;
49
+ text-decoration: $linkStyle;
44
50
  @include transition();
45
51
  &:hover, &:focus {
46
- color: darken($colorOne, 5%);
52
+ color: darken($colorBrand, 5%);
47
53
  }
48
54
  }
49
55
 
50
56
  hr {
51
57
  border: 0;
52
- border-top: $borderWeight $borderStyle $colorText;
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
- h2 {
70
- margin-top: $gutter;
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
- ul, ol {
73
- list-style: initial;
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
- ol {
86
- list-style-type: decimal;
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
- // Variables in use
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
- $colorText: $colorDarkGray;
33
- $colorBackground: $colorWhite;
34
- $colorForeground: $colorLightGray;
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
- // Space & Borders
43
- $gutter: 50px;
44
- $borderRadius: 2px;
45
- $borderWeight: 2px;
46
- $borderStyle: solid;
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 "helpers";
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.1
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/main.scss
70
+ - assets/concrete.scss
64
71
  homepage: http://rubygems.org/gems/concrete-jekyll
65
72
  licenses:
66
73
  - MIT