type-on-strap 1.3.0 → 1.4.1

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.
data/_layouts/post.html CHANGED
@@ -1,14 +1,11 @@
1
1
  ---
2
2
  layout: default
3
3
  ---
4
- <article {% if page.feature-img %}class="feature-image"{% endif %}>
5
- <header id="main" style="background-image: url('{{ page.feature-img | relative_url }}')">
4
+ <article {% if page.feature-img or page.color %}class="feature-image"{% endif %}>
5
+ <header id="main" style="">
6
6
  {% unless page.hide_title %}
7
7
  <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
8
- <p class="meta">
9
- {{ page.date | date: "%B %-d, %Y" }}
10
- {% if page.author %} - {{ page.author }}{% endif %}
11
- </p>
8
+ {% include post_info.html post=page %}
12
9
  {% endunless %}
13
10
  </header>
14
11
  <section class="post-content">
@@ -20,14 +17,14 @@ layout: default
20
17
  </div>
21
18
  {% endif %}
22
19
  </section>
23
-
20
+
24
21
  <!-- Social media shares -->
25
22
  {% include share_buttons.html %}
26
-
23
+
27
24
  <!-- Tag list -->
28
25
  {% capture tag_list %}{{ page.tags | join: "|"}}{% endcapture %}
29
26
  {% include tags_list.html tags=tag_list %}
30
-
27
+
31
28
  </article>
32
29
 
33
30
  <!-- Disqus -->
@@ -41,3 +38,20 @@ layout: default
41
38
  {% if site.theme_settings.post_navigation %}
42
39
  {% include post_nav.html %}
43
40
  {% endif %}
41
+
42
+ <!-- To change color of links in the page -->
43
+ <style>
44
+ {% if page.color %}
45
+ .feature-image a { color: {{ page.color }} !important; }
46
+ div#post-nav a { color: {{ page.color }} !important; }
47
+ footer a { color: {{ page.color }} !important; }
48
+ .site-header nav a:hover { color: {{ page.color }} !important; }
49
+ header#main { background-color: {{ page.color }} !important; }
50
+ {% endif %}
51
+
52
+ {% if page.feature-img %}{% assign image_url = page.feature-img %}{% elsif page.color %}{% assign image_url = site.theme_settings.color_image %}{% endif %}
53
+ header#main {
54
+ background-repeat:no-repeat;
55
+ background-image: url('{{ image_url | relative_url }}');
56
+ }
57
+ </style>
@@ -1,36 +1,40 @@
1
1
  * {
2
- margin: 0;
3
- padding: 0;
4
- box-sizing: border-box;
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
5
  }
6
6
 
7
7
  figure {
8
- margin: 0;
8
+ margin: 0;
9
9
  }
10
10
 
11
11
  // For correct line number width in Github Gists
12
12
  .gist table tbody tr td {
13
- box-sizing: content-box;
13
+ box-sizing: content-box;
14
+ }
15
+
16
+ pre {
17
+ overflow-x: scroll;
14
18
  }
15
19
 
16
20
  html {
17
- background: $background-color;
21
+ background: $background-color;
18
22
  }
19
23
 
20
24
  // Typography
21
25
  ::selection {
22
- background: $selection-color;
26
+ background: $selection-color;
23
27
  }
24
28
 
25
29
  ::-moz-selection {
26
- background: $selection-color;
30
+ background: $selection-color;
27
31
  }
28
32
 
29
33
  body {
30
- color: $text-color;
31
- font-family: $font-family-main;
32
- font-size: $font-size;
33
- word-wrap: break-word;
34
+ color: $text-color;
35
+ font-family: $font-family-main;
36
+ font-size: $font-size;
37
+ word-wrap: break-word;
34
38
  }
35
39
 
36
40
  h1,
@@ -39,114 +43,143 @@ h3,
39
43
  h4,
40
44
  h5,
41
45
  h6 {
42
- font-family: $font-family-headings;
43
- line-height: 1.3;
44
- margin: 0.67em 0;
45
- a {
46
- color: $text-color;
47
- }
48
-
49
-
46
+ font-family: $font-family-headings;
47
+ line-height: 1.3;
48
+ margin: 0.67em 0;
49
+
50
+ a {
51
+ color: $text-color;
52
+ }
53
+
50
54
  }
51
55
 
52
56
  h1 {
53
- font-size: 2.3em;
57
+ font-size: 2.3em;
54
58
  }
55
59
 
56
60
  h2 {
57
- font-size: 1.75em;
61
+ font-size: 1.75em;
58
62
  }
59
63
 
60
64
  h3 {
61
- font-size: 1.5em;
65
+ font-size: 1.5em;
62
66
  }
63
67
 
64
68
  h4 {
65
- font-size: 1.15em;
69
+ font-size: 1.15em;
70
+ }
71
+
72
+ iframe,
73
+ img,
74
+ embed,
75
+ object,
76
+ video {
77
+ max-width: 100%;
78
+ padding: 0 9%;
79
+ }
80
+
81
+ img[align=left] {
82
+ margin-right: 3%;
83
+ }
84
+
85
+ img[align=right] {
86
+ margin-left: 3%;
66
87
  }
67
88
 
68
89
  /* ---- Responsive ---- */
69
90
 
70
91
  @media screen and (max-width: $break) {
71
- h1 {
72
- font-size: 2em;
73
- }
74
- h2 {
75
- font-size: 1.5em;
76
- }
77
- h3 {
78
- font-size: 1em;
79
- }
80
- h4,
81
- .meta {
82
- font-size: 0.9em;
83
- }
84
- p {
85
- font-size: 0.8em;
86
- }
92
+ h1 {
93
+ font-size: 2em;
94
+ }
95
+ h2 {
96
+ font-size: 1.5em;
97
+ }
98
+ h3 {
99
+ font-size: 1em;
100
+ }
101
+ h4,
102
+ .meta {
103
+ font-size: 0.9em;
104
+ }
105
+ p, li {
106
+ font-size: 0.8em;
107
+ }
108
+
109
+ iframe,
110
+ img,
111
+ embed,
112
+ object,
113
+ video {
114
+ max-width: 100%;
115
+ padding: 0 1%;
116
+ }
87
117
  }
88
118
 
89
119
  @media screen and (max-width: $sm-break) {
90
- h1 {
91
- font-size: 1.5em;
92
- }
93
- h2 {
94
- font-size: 1em;
95
- }
96
- h3 {
97
- font-size: 0.9em;
98
- }
99
- h4,
100
- .meta {
101
- font-size: 0.85em;
102
- }
103
- p {
104
- font-size: 0.8em;
105
- }
120
+ h1 {
121
+ font-size: 1.5em;
122
+ }
123
+ h2 {
124
+ font-size: 1em;
125
+ }
126
+ h3 {
127
+ font-size: 0.9em;
128
+ }
129
+ h4,
130
+ .meta {
131
+ font-size: 0.85em;
132
+ }
133
+ p, li {
134
+ font-size: 0.8em;
135
+ }
136
+
137
+ table {
138
+ overflow-x: scroll;
139
+ }
106
140
  }
107
141
 
108
142
 
109
143
  blockquote {
110
- border-left: 2px solid darken($blockquote-color, 20%);
111
- margin: 1em 1em;
112
- padding: 0.75em 1em;
113
- background-color: $blockquote-color;
114
- box-shadow: 0 2px 2px $border-color;
144
+ border-left: 2px solid darken($blockquote-color, 20%);
145
+ margin: 1em 1em;
146
+ padding: 0.75em 1em;
147
+ background-color: $blockquote-color;
148
+ box-shadow: 0 2px 2px $border-color;
115
149
  }
116
150
 
117
151
  blockquote p:last-child,
118
152
  footer p:last-child {
119
- margin-bottom: 0;
153
+ margin-bottom: 0;
120
154
  }
121
155
 
122
156
  table {
123
- table-layout: fixed;
124
- width: 100%;
125
- word-wrap: break-word;
126
- overflow-x: scroll;
127
- display: inline-block;
157
+ table-layout: fixed;
158
+ width: 100%;
159
+ word-wrap: break-word;
160
+ display: inline-block;
128
161
  }
129
162
 
130
163
  td,
131
164
  th {
132
- padding: 0.5em 1em;
133
- border: 1px solid $border-color;
134
- text-align: left;
165
+ padding: 0.5em 1em;
166
+ border: 1px solid $border-color;
167
+ text-align: left;
135
168
  }
136
169
 
137
170
  table,
138
171
  dl,
139
172
  kbd,
140
173
  samp {
141
- margin: 1em 0;
174
+ margin: 1em 0;
142
175
  }
143
176
 
144
177
  dt {
145
- font-weight: bold;
178
+ font-weight: bold;
146
179
  }
147
180
 
148
181
  dd {
149
- margin-left: 2em;
182
+ margin-left: 2em;
150
183
  }
151
184
 
152
185
  p,
@@ -154,59 +187,43 @@ ol,
154
187
  ul,
155
188
  dl,
156
189
  .math-display {
157
- line-height: 1.5;
158
- margin-bottom: 1em;
190
+ line-height: 1.5;
191
+ margin-bottom: 1em;
159
192
  }
160
193
 
161
194
  // KaTeX math display
162
195
  .math-display {
163
- display: inline-block;
164
- width: 100%;
196
+ display: inline-block;
197
+ width: 100%;
165
198
  }
166
199
 
167
200
  // Lists within lists
168
201
  li {
169
- p {
170
- display: inline;
171
- }
172
- & > ul,
173
- & > ol {
174
- margin-bottom: 0;
175
- margin-left: 1em;
176
- }
202
+ p {
203
+ display: inline;
204
+ }
205
+
206
+ & > ul,
207
+ & > ol {
208
+ margin-bottom: 0;
209
+ margin-left: 1em;
210
+ }
177
211
  }
178
212
 
179
213
  ol,
180
214
  ul {
181
- list-style-position: outside;
182
- margin-left: 1em;
215
+ list-style-position: outside;
216
+ margin-left: 1em;
183
217
  }
184
218
 
185
219
  hr {
186
- border: 0;
187
- border-top: 1px solid $border-color;
188
- border-bottom: 1px solid #fff;
189
- margin: 1em 0;
220
+ border: 0;
221
+ border-top: 1px solid $border-color;
222
+ border-bottom: 1px solid #fff;
223
+ margin: 1em 0;
190
224
  }
191
225
 
192
226
  a {
193
- color: $link-color;
194
- text-decoration: none;
227
+ color: $link-color;
228
+ text-decoration: none;
195
229
  }
196
-
197
- iframe,
198
- img,
199
- embed,
200
- object,
201
- video {
202
- max-width: 100%;
203
- padding: 0 10%;
204
- }
205
-
206
- img[align=left] {
207
- margin-right: 3%;
208
- }
209
-
210
- img[align=right] {
211
- margin-left: 3%;
212
- }
@@ -1,81 +1,96 @@
1
1
  // Mix-ins
2
- %padding-small {
3
- padding: $padding-x-small $padding-x-small * 2;
4
- @media (max-width: 1000px) {
5
- padding: $padding-x-small $padding-x-small;
6
- }
2
+ %padding-nav {
3
+ padding: $padding-small $padding-x-large;
4
+ @media (max-width: $xl-break) {
5
+ padding: $padding-small ($padding-large * 2);
6
+ }
7
+ @media (max-width: $l-break) {
8
+ padding: $padding-small $padding-large;
9
+ }
10
+ @media (max-width: $m-break) {
11
+ padding: $padding-small $padding-medium;
12
+ }
13
+ @media (max-width: $sm-break) {
14
+ padding: $padding-small $padding-x-small;
15
+ }
7
16
  }
8
17
 
9
- %padding-regular {
10
- padding: $padding-small $padding-x-large;
11
- @media (max-width: 1000px) {
12
- padding: $padding-small * 1.5 $padding-large / 1.6;
13
- }
14
- @media (max-width: 576px) {
15
- padding: $padding-small;
16
- }
18
+ %padding-post {
19
+ padding: $padding-x-small $padding-x-large;
20
+ @media (max-width: $xl-break) {
21
+ padding: $padding-x-small ($padding-large * 2);
22
+ }
23
+ @media (max-width: $l-break) {
24
+ padding: $padding-x-small $padding-large;
25
+ }
26
+ @media (max-width: $m-break) {
27
+ padding: $padding-x-small $padding-medium;
28
+ }
29
+ @media (max-width: $sm-break) {
30
+ padding: $padding-x-small $padding-small;
31
+ }
17
32
  }
18
33
 
19
- %padding-medium {
20
- padding: $padding-medium $padding-large;
21
- @media (max-width: 1000px) {
22
- padding: $padding-medium * 1.5 $padding-large / 1.6;
23
- }
24
- @media (max-width: 576px) {
25
- padding: $padding-medium;
26
- }
34
+ %padding-header {
35
+ padding: $padding-medium $padding-large;
36
+ @media (min-width: $xl-break) {
37
+ padding: $padding-large $padding-large;
38
+ }
39
+ @media (max-width: $sm-break) {
40
+ padding: $padding-medium;
41
+ }
27
42
  }
28
43
 
29
44
  .header-txt-shadow {
30
- text-shadow: 1px 1px 2px $text-shadow;
45
+ text-shadow: 1px 1px 2px $text-shadow;
31
46
  }
32
47
 
33
48
  // Buttons
34
49
  .button {
35
- border-radius: 0.3em;
36
- border: 1px solid;
37
- display: inline-block;
38
- margin: 1em 0;
39
- padding: 0.5em 0.75em;
50
+ border-radius: 0.3em;
51
+ border: 1px solid;
52
+ display: inline-block;
53
+ margin: 1em 0;
54
+ padding: 0.5em 0.75em;
40
55
  }
41
56
 
42
57
  a.button {
43
- @extend .button-link;
58
+ @extend .button-link;
44
59
  }
45
60
 
46
61
  .button-link {
47
- &:hover {
48
- background: $link-color;
49
- border: 1px solid $link-color;
50
- color: $background-color;
51
- text-decoration: none;
52
- }
62
+ &:hover {
63
+ background: $link-color;
64
+ border: 1px solid $link-color;
65
+ color: $background-color;
66
+ text-decoration: none;
67
+ }
53
68
  }
54
69
 
55
70
  .body-link {
56
- &:hover {
57
- text-decoration: underline;
58
- color: darken($link-color, 15%);
59
- }
71
+ &:hover {
72
+ text-decoration: underline;
73
+ color: darken($link-color, 15%);
74
+ }
60
75
  }
61
76
 
62
77
  .post-link {
63
- &:hover {
64
- text-decoration: none;
65
- color: lighten($link-color, 10%);
66
- }
78
+ &:hover {
79
+ text-decoration: none;
80
+ color: lighten($link-color, 10%);
81
+ }
67
82
  }
68
83
 
69
84
  // States
70
85
  .disabled {
71
- opacity: 0.7;
86
+ opacity: 0.7;
72
87
  }
73
88
 
74
89
  // Custom
75
90
  .text-center {
76
- text-align: center;
91
+ text-align: center;
77
92
  }
78
93
 
79
94
  .right {
80
- float: right;
95
+ float: right;
81
96
  }