type-on-strap 1.3.0 → 1.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +80 -18
  3. data/_includes/blog.html +1 -3
  4. data/_includes/blog_nav.html +6 -8
  5. data/_includes/head.html +17 -18
  6. data/_includes/navbar.html +2 -2
  7. data/_includes/post_info.html +22 -0
  8. data/_includes/post_nav.html +17 -16
  9. data/_includes/share_buttons.html +1 -8
  10. data/_layouts/feed.xml +9 -3
  11. data/_layouts/post.html +23 -9
  12. data/_sass/base/_global.scss +127 -110
  13. data/_sass/base/_utility.scss +60 -45
  14. data/_sass/base/_variables.scss +26 -24
  15. data/_sass/external/_font-awesome.scss +0 -1
  16. data/_sass/external/_pacifico.scss +4 -0
  17. data/_sass/external/_source-sans-pro.scss +2 -2
  18. data/_sass/external/_syntax.scss +85 -83
  19. data/_sass/external/font-awesome/font-awesome.scss +0 -1
  20. data/_sass/includes/_blog_nav.scss +34 -42
  21. data/_sass/includes/_footer.scss +19 -16
  22. data/_sass/includes/_grid.scss +22 -22
  23. data/_sass/includes/_navbar.scss +130 -124
  24. data/_sass/includes/_portfolio.scss +40 -39
  25. data/_sass/includes/_post_nav.scss +27 -23
  26. data/_sass/includes/_share_buttons.scss +26 -25
  27. data/_sass/layouts/_blog.scss +87 -86
  28. data/_sass/layouts/_page.scss +5 -4
  29. data/_sass/layouts/_posts.scss +103 -71
  30. data/_sass/layouts/_search.scss +45 -44
  31. data/_sass/layouts/_tags.scss +43 -34
  32. data/_sass/type-on-strap.scss +1 -5
  33. data/assets/css/vendor/bootstrap-iso.min.css +2 -2
  34. data/assets/data/search.json +25 -27
  35. data/assets/js/partials/katex_init.js +20 -20
  36. data/assets/js/partials/masonry_init.js +17 -17
  37. data/assets/js/partials/navbar.js +18 -18
  38. metadata +5 -17
data/_sass/includes/_post_nav.scss CHANGED
@@ -1,29 +1,33 @@
1
1
  #post-nav {
2
+ width: 100%;
3
+ display: inline-block;
4
+ @extend %padding-nav;
5
+
6
+ a {
2
7
  width: 100%;
3
- display: inline-block;
4
- @extend %padding-small;
5
-
6
- a {
7
- width: 100%;
8
- padding: 0;
9
- margin: 0;
10
- }
11
- p {
12
- @extend .meta;
13
- }
14
-
15
- #previous-post {
16
- float: left;
17
- }
18
-
19
- #next-post {
20
- float: right;
21
- }
22
-
23
- @media screen and (max-width: $sm-break) {
8
+ padding: 0;
9
+ margin: 0;
10
+ }
11
+
12
+ p {
13
+ @extend .meta;
14
+ }
15
+
16
+ #previous-post {
17
+ float: left;
18
+ width: 50%;
19
+ }
20
+
21
+ #next-post {
22
+ float: right;
23
+ text-align: right;
24
+ width: 50%;
25
+ }
26
+
27
+ @media screen and (max-width: $sm-break) {
24
28
  a, p {
25
- font-size: 0.8em;
29
+ font-size: 0.8em;
26
30
  }
27
- }
31
+ }
28
32
  }
29
33
 
data/_sass/includes/_share_buttons.scss CHANGED
@@ -1,29 +1,30 @@
1
1
  ul.share-buttons {
2
- list-style: none;
3
- padding: $padding-x-small/2 0 $padding-x-small/2 0;
4
- margin: 0;
5
- text-align: center;
6
-
7
- div.meta {
8
- display: inline;
9
- margin-right: 0.5em;
10
- }
2
+ list-style: none;
3
+ padding: $padding-x-small/2 0 $padding-x-small/2 0;
4
+ margin: 0;
5
+ text-align: center;
11
6
 
12
- li {
13
- display: inline;
14
-
15
- a:hover {
16
- text-decoration: none;
17
- }
18
- }
19
- .sr-only {
20
- position: absolute;
21
- clip: rect(1px 1px 1px 1px);
22
- clip: rect(1px, 1px, 1px, 1px);
23
- padding: 0;
24
- border: 0;
25
- height: 1px;
26
- width: 1px;
27
- overflow: hidden;
7
+ div.meta {
8
+ display: inline;
9
+ margin-right: 0.5em;
10
+ }
11
+
12
+ li {
13
+ display: inline;
14
+
15
+ a:hover {
16
+ text-decoration: none;
28
17
  }
18
+ }
19
+
20
+ .sr-only {
21
+ position: absolute;
22
+ clip: rect(1px 1px 1px 1px);
23
+ clip: rect(1px, 1px, 1px, 1px);
24
+ padding: 0;
25
+ border: 0;
26
+ height: 1px;
27
+ width: 1px;
28
+ overflow: hidden;
29
+ }
29
30
  }
data/_sass/layouts/_blog.scss CHANGED
@@ -1,102 +1,103 @@
1
1
  /* --- Header text feature --- */
2
2
  .call-out {
3
- @extend %padding-medium;
4
- display: inline-block;
3
+ @extend %padding-header;
4
+ display: inline-block;
5
+ width: 100%;
6
+ height: 100%;
7
+ font-size: 1.2em;
8
+ text-align: center;
9
+ color: $header-desc-text-color;
10
+ background: $header-desc-background-color no-repeat;
11
+ background-size: $feature-image-size;
12
+
13
+ /* --- Responsive --- */
14
+ @media screen and (min-width: $break) {
15
+ background-size: 120% auto;
16
+ }
17
+
18
+ @media screen and (max-width: $break) {
19
+ background-size: 200% auto;
20
+ }
21
+
22
+ @media screen and (max-width: $sm-break) {
23
+ background-size: 400% auto;
24
+ }
25
+
26
+ //For white images
27
+ p,
28
+ a,
29
+ li,
30
+ h1,
31
+ h2,
32
+ h3,
33
+ h4,
34
+ h5 {
35
+ @extend .header-txt-shadow;
36
+ }
37
+
38
+ p:last-child {
39
+ margin-bottom: 0;
40
+ }
41
+ }
42
+
43
+ #main {
44
+ background-position: 100% 0, 0 center, center top;
45
+ }
46
+
47
+ /* --- Post listing --- */
48
+ .posts {
49
+ .post-teaser {
50
+ @extend %padding-post;
5
51
  width: 100%;
6
- height: 100%;
7
- font-size: 1.2em;
8
- text-align: center;
9
- color: $header-desc-text-color;
10
- background: $header-desc-background-color no-repeat;
52
+ margin-bottom: 0;
53
+ display: inline-block;
11
54
  background-size: $feature-image-size;
55
+ border-bottom: 1px solid $border-color;
12
56
 
13
- /* --- Responsive --- */
14
- @media screen and (min-width: $break) {
15
- background-size: 120% auto;
57
+ p a {
58
+ @extend .body-link;
16
59
  }
17
60
 
18
- @media screen and (max-width: $break) {
19
- background-size: 200% auto;
20
- }
61
+ .post-img {
62
+ vertical-align: middle;
63
+ border-radius: 10px;
64
+ overflow: hidden;
21
65
 
22
- @media screen and (max-width: $sm-break) {
23
- background-size: 400% auto;
24
- }
66
+ @media (min-width: $break) {
67
+ height: 250px;
68
+ }
25
69
 
26
- //For white images
27
- p,
28
- a,
29
- li,
30
- h1,
31
- h2,
32
- h3,
33
- h4,
34
- h5 {
35
- @extend .header-txt-shadow;
36
- }
70
+ //Smaller screen
71
+ @media screen and (max-width: $break) {
72
+ height: 150px;
73
+ }
74
+
75
+ img {
76
+ width: 100%;
77
+ padding: 0;
78
+ vertical-align: middle;
79
+ }
37
80
 
38
- p:last-child {
39
- margin-bottom: 0;
40
81
  }
41
- }
42
82
 
43
- #main {
44
- background-position: 100% 0, 0 center, center top;
45
- }
83
+ .post-img img {
84
+ -moz-transition-timing-function: ease-out;
85
+ -webkit-transition-timing-function: ease-out;
86
+ transition-timing-function: ease-out;
46
87
 
47
- /* --- Post listing --- */
48
- .posts {
49
- .post-teaser {
50
- @extend %padding-regular;
51
- width: 100%;
52
- margin-bottom: 0;
53
- display: inline-block;
54
- background-size: $feature-image-size;
55
- border-bottom: 1px solid $border-color;
56
-
57
- p a {
58
- @extend .body-link;
59
- }
60
-
61
- img {
62
- width: 100%;
63
- padding: 0;
64
- vertical-align: middle;
65
- }
66
-
67
- .post-img {
68
- vertical-align: middle;
69
- border-radius: 10px;
70
- overflow: hidden;
71
-
72
- @media (min-width: $break) {
73
- height: 250px;
74
- }
75
-
76
- //Smaller screen
77
- @media screen and (max-width: $break) {
78
- height: 150px;
79
- }
80
- }
81
-
82
- .post-img img {
83
- -moz-transition-timing-function: ease-out;
84
- -webkit-transition-timing-function: ease-out;
85
- transition-timing-function: ease-out;
86
-
87
- -moz-transition: all 2s;
88
- -webkit-transition: all 2s;
89
- transition: all 2s;
90
-
91
- &:hover {
92
- -moz-transform: scale(1.1);
93
- -webkit-transform: scale(1.1);
94
- transform: scale(1.1);
95
- }
96
- }
97
- }
88
+ -moz-transition: all 2s;
89
+ -webkit-transition: all 2s;
90
+ transition: all 2s;
98
91
 
99
- .excerpt {
100
- margin-top: 1em;
92
+ &:hover {
93
+ -moz-transform: scale(1.1);
94
+ -webkit-transform: scale(1.1);
95
+ transform: scale(1.1);
96
+ }
101
97
  }
98
+ }
99
+
100
+ .excerpt {
101
+ margin-top: 1em;
102
+ }
102
103
  }
data/_sass/layouts/_page.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  h1.title {
2
- @extend .header-txt-shadow;
2
+ @extend .header-txt-shadow;
3
+ padding: $title-padding 0;
3
4
  }
4
5
 
5
6
  .subtitle {
6
- font-weight: normal;
7
- margin-top: 5px;
8
- text-shadow: 1px 1px 2px $text-shadow;
7
+ font-weight: normal;
8
+ margin-top: 5px;
9
+ text-shadow: 1px 1px 2px $text-shadow;
9
10
  }
10
11
 
11
12
  //Shared css in _post.scss
data/_sass/layouts/_posts.scss CHANGED
@@ -1,93 +1,125 @@
1
- article,
2
1
  .comments {
3
- @extend %padding-regular;
4
- border-bottom: 1px solid $border-color;
5
- float: left;
6
- width: 100%;
2
+ @extend %padding-post;
3
+ border-bottom: 1px solid $border-color;
4
+ float: left;
5
+ width: 100%;
7
6
  }
8
7
 
9
8
  article {
10
- header {
11
- margin-bottom: 6%;
12
- text-align: center;
13
- }
14
- a:hover {
15
- @extend .body-link;
16
- }
17
- .footnotes {
18
- font-size: 0.9em;
19
- }
9
+ @extend .comments;
10
+
11
+ header {
12
+ margin-bottom: 6%;
13
+ text-align: center;
14
+ }
15
+
16
+ a:hover {
17
+ @extend .body-link;
18
+ }
19
+
20
+ .footnotes {
21
+ font-size: 0.9em;
22
+ }
20
23
  }
21
24
 
22
25
  footer {
23
- width: 100%;
24
- margin-top: 0;
25
- margin-bottom: 0;
26
- font-size: 0.9em;
27
- display: inline-block;
28
- text-align: center;
29
- .meta {
30
- display: inline;
31
- }
32
- a.button {
33
- margin-left: 1em;
34
- }
26
+ width: 100%;
27
+ margin-top: 0;
28
+ margin-bottom: 0;
29
+ font-size: 0.9em;
30
+ display: inline-block;
31
+ text-align: center;
32
+
33
+ .meta {
34
+ display: inline;
35
+ }
36
+
37
+ a.button {
38
+ margin-left: 1em;
39
+ }
35
40
  }
36
41
 
37
42
  header {
38
- h1 {
39
- margin: 0;
40
- }
43
+ h1 {
44
+ margin: 0;
45
+ }
41
46
  }
42
47
 
43
48
  .meta {
44
- color: $meta; // rgba($text-color, .65);
45
- letter-spacing: 0.1em;
46
- margin: 0;
47
- text-transform: uppercase;
49
+ color: $meta; // rgba($text-color, .65);
50
+ letter-spacing: 0.1em;
51
+ margin: 0;
52
+ text-transform: uppercase;
48
53
  }
49
54
 
55
+ /* --- Post info --- */
56
+ .post-info {
57
+ /* For border in author
58
+ border: 1px solid $border-color;
59
+ padding-left: 0.5em;
60
+ */
61
+ border-radius: 1em;
62
+ padding-right: 0.5em;
63
+ display: inline-flex;
64
+
65
+ a {
66
+ display: flex;
67
+ align-items: center;
68
+ }
69
+
70
+ img {
71
+ border-radius: 1em;
72
+ padding: 0px;
73
+ width: 1.5em;
74
+ height: 100%;
75
+ margin-right: 0.5em;
76
+ }
77
+ }
50
78
 
51
79
  /* --- Feature image --- */
52
80
  .feature-image {
53
- padding: 0;
54
- .post-link {
55
- color: $feature-image-text-color;
56
- }
57
- header {
58
- color: $feature-image-text-color;
59
- margin-bottom: 0;
60
- padding: $padding-large/2.5 $padding-large;
61
- .meta {
62
- color: rgba($feature-image-text-color, .7);
63
- }
64
- }
65
- .post-content {
66
- @extend %padding-regular;
67
- padding-bottom: 0;
68
- }
69
- footer {
70
- @extend %padding-regular;
71
- padding-top: 0;
81
+ padding: 0;
82
+
83
+ .post-link {
84
+ color: $feature-image-text-color;
85
+ }
86
+
87
+ header {
88
+ color: $feature-image-text-color;
89
+ margin-bottom: 0;
90
+ padding: $padding-large/2.5 $padding-large;
91
+
92
+ .meta {
93
+ color: rgba($feature-image-text-color, .7);
72
94
  }
95
+ }
96
+
97
+ .post-content {
98
+ @extend %padding-post;
99
+ padding-bottom: 0;
100
+ }
101
+
102
+ footer {
103
+ @extend %padding-post;
104
+ padding-top: 0;
105
+ }
73
106
  }
74
107
 
75
- // Responsive scrolling
108
+ /*-- feature-image Responsive scrolling --*/
76
109
  .feature-image header {
77
- @media screen and (max-width: $break) {
78
- padding: $padding-small $padding-small;
79
- }
80
-
81
- /* --- Responsive --- */
82
- @media screen and (min-width: $break) {
83
- background-size: 120% auto;
84
- }
85
-
86
- @media screen and (max-width: $break) {
87
- background-size: 200% auto;
88
- }
89
-
90
- @media screen and (max-width: $sm-break) {
91
- background-size: 400% auto;
92
- }
93
- }
110
+ @media screen and (max-width: $break) {
111
+ padding: $padding-small $padding-small;
112
+ }
113
+
114
+ @media screen and (min-width: $break) {
115
+ background-size: 120% auto;
116
+ }
117
+
118
+ @media screen and (max-width: $break) {
119
+ background-size: 200% auto;
120
+ }
121
+
122
+ @media screen and (max-width: $sm-break) {
123
+ background-size: 400% auto;
124
+ }
125
+ }