type-on-strap 2.3.4 → 2.3.5

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.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +29 -12
  3. data/_data/language.yml +2 -0
  4. data/_includes/{blog.html → blog/blog.html} +2 -2
  5. data/_includes/{blog_nav.html → blog/blog_nav.html} +0 -0
  6. data/_includes/{post_info.html → blog/post_info.html} +0 -0
  7. data/_includes/{post_nav.html → blog/post_nav.html} +0 -0
  8. data/_includes/{footer.html → default/footer.html} +1 -1
  9. data/_includes/{head.html → default/head.html} +14 -1
  10. data/_includes/{navbar.html → default/navbar.html} +5 -0
  11. data/_includes/{tags_list.html → default/tags_list.html} +0 -0
  12. data/_includes/gallery.html +2 -3
  13. data/_includes/social/cusdis.html +12 -0
  14. data/_includes/{disqus.html → social/disqus.html} +0 -0
  15. data/_includes/social/icon_partial.html +11 -0
  16. data/_includes/social/icons.html +107 -0
  17. data/_includes/{share_buttons.html → social/share_buttons.html} +44 -36
  18. data/_layouts/custom.html +12 -7
  19. data/_layouts/default.html +4 -4
  20. data/_layouts/home.html +1 -1
  21. data/_layouts/page.html +1 -1
  22. data/_layouts/post.html +8 -5
  23. data/_layouts/tags.html +4 -4
  24. data/_sass/base/_global.scss +11 -11
  25. data/_sass/base/_highlight.scss +73 -72
  26. data/_sass/base/_utility.scss +9 -7
  27. data/_sass/base/_variables.scss +109 -73
  28. data/_sass/external/font-awesome/_stacked.scss +1 -1
  29. data/_sass/includes/_footer.scss +13 -2
  30. data/_sass/includes/_mermaid.scss +8 -0
  31. data/_sass/includes/_navbar.scss +7 -6
  32. data/_sass/includes/_share_buttons.scss +1 -1
  33. data/_sass/layouts/_blog.scss +6 -5
  34. data/_sass/layouts/_page.scss +1 -1
  35. data/_sass/layouts/_posts.scss +25 -6
  36. data/_sass/layouts/_search.scss +11 -8
  37. data/_sass/layouts/_tags.scss +2 -2
  38. data/_sass/type-on-strap.scss +3 -2
  39. data/assets/css/vendor/bootstrap-iso.css +0 -30
  40. data/assets/css/vendor/bootstrap-iso.min.css +1 -1
  41. data/assets/css/vendor/bootstrap.css +0 -30
  42. data/assets/js/main.min.js +1 -1
  43. data/assets/js/partials/dark-mode.js +43 -0
  44. metadata +17 -13
  45. data/_includes/icons.html +0 -267
data/_sass/base/_utility.scss CHANGED
@@ -42,11 +42,11 @@
42
42
  }
43
43
 
44
44
  .txt-shadow {
45
- text-shadow: 0.07em 0.10em 0.15em $text-shadow;
45
+ text-shadow: 0.07em 0.10em 0.15em var(--text-shadow);
46
46
  }
47
47
 
48
48
  .subtle-txt-shadow {
49
- text-shadow: 1px 1px 2px $text-shadow;
49
+ text-shadow: 1px 1px 2px var(--text-shadow);
50
50
  }
51
51
 
52
52
  // Buttons
@@ -64,9 +64,9 @@ a.button {
64
64
 
65
65
  .button-link {
66
66
  &:hover {
67
- background: $link-color;
68
- border: 1px solid $link-color;
69
- color: $background-color;
67
+ background: var(--link);
68
+ border: 1px solid var(--link);
69
+ color: var(--background);
70
70
  text-decoration: none;
71
71
  }
72
72
  }
@@ -74,14 +74,16 @@ a.button {
74
74
  .body-link {
75
75
  &:hover {
76
76
  text-decoration: underline;
77
- color: darken($link-color, 15%);
77
+ color: var(--link);
78
+ filter: brightness(0.85);
78
79
  }
79
80
  }
80
81
 
81
82
  .post-link {
82
83
  &:hover {
83
84
  text-decoration: none;
84
- color: lighten($link-color, 10%);
85
+ color: var(--link);
86
+ filter: brightness(1.1);
85
87
  }
86
88
  }
87
89
 
data/_sass/base/_variables.scss CHANGED
@@ -1,21 +1,24 @@
1
- // Typography
1
+ /* TYPOGRAPHY */
2
2
  $font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
3
3
  $font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
4
4
  $font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
5
5
  $font-size: 1.25em;
6
6
 
7
- // Padding
7
+ $monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif !default;
8
+ $font-size-code: 0.85em !default;
9
+ $font-height-code: 1.3em !default;
10
+ $border-radius: 4px !default;
11
+
12
+ /* PADDING */
8
13
  $padding-x-large: 23%;
9
14
  $padding-large: 9%;
10
15
  $padding-medium: 6%;
11
16
  $padding-small: 4%;
12
17
  $padding-x-small: 3%;
13
-
14
- // Sepcific Padding
15
18
  $title-padding: 1%;
16
19
  $feature-image-padding: 10%;
17
20
 
18
- // Mobile display
21
+ /* MOBILE */
19
22
  $xl-break: 2000px;
20
23
  $l-break: 1400px;
21
24
  $m-break: 1000px;
@@ -23,75 +26,108 @@ $break: 768px;
23
26
  $sm-break: 576px;
24
27
  $x-sm-break: 300px;
25
28
 
26
- // Brand colours
27
- $theme-color: #337ab7;
28
- $brand-color: #fff;
29
- $background-color: #fff;
30
- $border-color: rgba(0, 0, 0, 0.1); // rgba recommended if using feature images
31
-
32
- // Typography colours
33
- $text-color: #262626;
34
- $meta: #595959; //lowest gray for accessible color
35
- $link-color: $theme-color;
36
- $selection-color: #D4D4D4; // visible when highlighting text
37
- $blockquote-color: #EEF7FA; // $background-color;
38
-
39
- // Header
40
- $header-background-color: darken($theme-color, 50%); // Only used when no header image
41
- $header-text-color: #fff;
42
- $header-link-color: #383838;
43
- $navbar-separator-opacity: 0;
29
+ /* BASE16 HIGHLIGHT */
30
+ // Material Theme
31
+ html, html[data-theme="light"] {
32
+ --base00: #302f2d; // Default Background
33
+ --base01: #2e3c43; // Lighter Background (Used for status bars) - NOT USED
34
+ --base02: #314549; // Selection Background
35
+ --base03: #546e7a; // Comments, Invisible, Line Highlighting
36
+ --base04: #b2ccd6; // Dark Foreground (Used for status bars) - NOT USED
37
+ --base05: #eeffff; // Light Foreground (Not often used)
38
+ --base06: #eeffff; // Light Background (Not often used)
39
+ --base07: #ffffff; // Default Foreground, Default text color
40
+ --base08: #f07178; // Parenthesis, Caret, Delimiters, Operators
41
+ --base09: #f78c6c; // Classes, Markup Bold, Search Text Background
42
+ --base0a: #ffcb6b; // Strings, Inherited Class, Markup Code, Diff Inserted
43
+ --base0b: #98c379; // Functions, Methods, Attribute IDs, Headings
44
+ --base0c: #89ddff; // Support, Regular Expressions, Escape Characters, Markup Quotes
45
+ --base0d: #82aaff; // Keywords, Storage, Selector, Markup Italic, Diff Changed
46
+ --base0e: #c792ea; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
47
+ --base0f: #ff5370; // Deprecated, Opening/Closing Embedded Language Tags e.g.
48
+ }
44
49
 
45
- // Feature image for articles
46
- $feature-image-text-color: #fff;
47
- $feature-image-size: cover; // options include "cover", "contain", "auto"
48
-
49
- //Search colours
50
- $link-shadow: transparentize($link-color, .6); //rgba(26, 188, 156, 0.6);
51
- $text-shadow: #3f3f3f;
52
- $search-color: #999;
53
-
54
-
55
- /* Syntax highlighting */
56
- // Syntax typography
57
- $monospace: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif !default;
58
- $font-size-code: 0.85em !default;
59
- $font-height-code: 1.3em !default;
60
- $border-radius: 4px !default;
50
+ // Supernova Theme
51
+ html[data-theme="dark"] {
52
+ --base00: #373e47; // Default Background
53
+ --base01: #444c56; // Lighter Background (Used for status bars, line number and folding marks)
54
+ --base02: #545d68; // Selection Background
55
+ --base03: #909dab; // Comments, Invisible, Line Highlighting
56
+ --base04: #adbac7; // Dark Foreground (Used for status bars)
57
+ --base05: #cdd9e5; // Default Foreground, Caret, Delimiters, Operators
58
+ --base06: #e7f3f4; // Light Foreground (Not often used)
59
+ --base07: #ffffff; // Light Background (Not often used)
60
+ --base08: #d40059; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
61
+ --base09: #ff5c00; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
62
+ --base0a: #d9b600; // Classes, Markup Bold, Search Text Background
63
+ --base0b: #6bac00; // Strings, Inherited Class, Markup Code, Diff Inserted
64
+ --base0c: #00a8e0; // Support, Regular Expressions, Escape Characters, Markup Quotes
65
+ --base0d: #b37eff; // Functions, Methods, Attribute IDs, Headings
66
+ --base0e: #00af9e; // Keywords, Storage, Selector, Markup Italic, Diff Changed
67
+ --base0f: #ff66c2; // Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
68
+ }
61
69
 
62
- // base16 Material Theme
63
- $base00: #302f2d !default; // Default Background
64
- $base01: #2E3C43 !default; // Lighter Background (Used for status bars) - NOT USED
65
- $base02: #314549 !default; // Selection Background
66
- $base03: #546E7A !default; // Comments, Invisible, Line Highlighting
67
- $base04: #B2CCD6 !default; // Dark Foreground (Used for status bars) - NOT USED
68
- $base05: #EEFFFF !default; // Light Foreground (Not often used)
69
- $base06: #EEFFFF !default; // Light Background (Not often used)
70
- $base07: #FFFFFF !default; // Default Foreground, Default text color
71
- $base08: #F07178 !default; // Parenthesis, Caret, Delimiters, Operators
72
- $base09: #F78C6C !default; // Classes, Markup Bold, Search Text Background
73
- $base0a: #FFCB6B !default; // Strings, Inherited Class, Markup Code, Diff Inserted
74
- $base0b: #98C379 !default; // Functions, Methods, Attribute IDs, Headings
75
- $base0c: #89DDFF !default; // Support, Regular Expressions, Escape Characters, Markup Quotes
76
- $base0d: #82AAFF !default; // Keywords, Storage, Selector, Markup Italic, Diff Changed
77
- $base0e: #C792EA !default; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
78
- $base0f: #FF5370 !default; // Deprecated, Opening/Closing Embedded Language Tags e.g.
70
+ // Monokai Theme
71
+ //html[data-theme="dark"] {
72
+ // --base00: #272822; // Default Background
73
+ // --base01: #383830; // Lighter Background (Used for status bars)
74
+ // --base02: #49483e; // Selection Background
75
+ // --base03: #75715e; // Comments, Invisible, Line Highlighting
76
+ // --base04: #a59f85; // Dark Foreground (Used for status bars)
77
+ // --base05: #f8f8f2; // Light Foreground (Not often used)
78
+ // --base06: #f5f4f1; // Light Background (Not often used)
79
+ // --base07: #f9f8f5; // Default text color
80
+ // --base08: #f92672; // Parenthesis, Caret, Delimiters, Operators
81
+ // --base09: #fd971f; // Classes, Markup Bold, Search Text Background
82
+ // --base0a: #e6db74; // Strings, Inherited Class, Markup Code, Diff Inserted
83
+ // --base0b: #a6e22e; // Functions, Methods, Attribute IDs, Headings
84
+ // --base0c: #a1efe4; // Support, Regular Expressions, Escape Characters, Markup Quotes
85
+ // --base0d: #66d9ef; // Keywords, Storage, Selector, Markup Italic, Diff Changed
86
+ // --base0e: #ae81ff; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
87
+ // --base0f: #cc6633; // Deprecated, Opening/Closing Embedded Language Tags e.g.
88
+ //}
79
89
 
80
- // base16 Monokai
81
- //$base00: #272822 !default; // Default Background
82
- //$base01: #383830 !default; // Lighter Background (Used for status bars)
83
- //$base02: #49483e !default; // Selection Background
84
- //$base03: #75715e !default; // Comments, Invisible, Line Highlighting
85
- //$base04: #a59f85 !default; // Dark Foreground (Used for status bars)
86
- //$base05: #f8f8f2 !default; // Light Foreground (Not often used)
87
- //$base06: #f5f4f1 !default; // Light Background (Not often used)
88
- //$base07: #f9f8f5 !default; // Default text color
89
- //$base08: #f92672 !default; // Parenthesis, Caret, Delimiters, Operators
90
- //$base09: #fd971f !default; // Classes, Markup Bold, Search Text Background
91
- //$base0a: #e6db74 !default; // Strings, Inherited Class, Markup Code, Diff Inserted
92
- //$base0b: #a6e22e !default; // Functions, Methods, Attribute IDs, Headings
93
- //$base0c: #a1efe4 !default; // Support, Regular Expressions, Escape Characters, Markup Quotes
94
- //$base0d: #66d9ef !default; // Keywords, Storage, Selector, Markup Italic, Diff Changed
95
- //$base0e: #ae81ff !default; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
96
- //$base0f: #cc6633 !default; // Deprecated, Opening/Closing Embedded Language Tags e.g.
90
+ /* THEME COLOR SCHEMES */
91
+ html, html[data-theme="light"] {
92
+ --background: #ffffff;
93
+ --blockquote: #eef7fa;
94
+ --selection: #d4d4d4;
95
+ --meta: #595959;
96
+ --link: #337ab7;
97
+ --header-background: #24292e;
98
+ --header-text: #ffffff;
99
+ --header-link: #383838;
100
+ --code-background: #E0E0E0;
101
+ --code-inline: #24292e;
102
+ --text-shadow: #3f3f3f;
103
+ --text: #262626;
104
+ --h1: #262626;
105
+ --h2: #262626;
106
+ --h3: #262626;
107
+ --h4: #262626;
108
+ --h5: #262626;
109
+ --h6: #262626;
110
+ --border: rgba(0, 0, 0, 0.1);
111
+ }
97
112
 
113
+ html[data-theme="dark"] {
114
+ --background: #22272e; // brand, background
115
+ --blockquote: #373e47; // blockquote
116
+ --selection: #545d68; // selection
117
+ --meta: #909dab; // meta
118
+ --link: #00a8e0; // theme, link, link shadow header bg
119
+ --header-background: #2A3444; // Color before header image load
120
+ --header-text: #e7f3f4; // header text, feature img text
121
+ --header-link: #adbac7; // header link, search color
122
+ --code-background: #2A3444;
123
+ --code-inline: #d9b600;
124
+ --text-shadow: #2d333b; // text shadow
125
+ --text: #cdd9e5; // text
126
+ --h1: #d40059; // headers
127
+ --h2: #b37eff;
128
+ --h3: #ff66c2;
129
+ --h4: #00af9e;
130
+ --h5: #6bac00;
131
+ --h6: #ff5c00;
132
+ --border: rgba(0, 0, 0, 0.1); // border
133
+ }
data/_sass/external/font-awesome/_stacked.scss CHANGED
@@ -27,5 +27,5 @@
27
27
  }
28
28
 
29
29
  .#{$fa-css-prefix}-inverse {
30
- color: $fa-inverse;
30
+ color: var(--background);
31
31
  }
data/_sass/includes/_footer.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  display: inline-block;
5
5
  text-align: center;
6
6
  width: 100%;
7
- color: lighten($text-color, 24%);
7
+ color: var(--meta);
8
8
  font-size: 0.9em;
9
9
 
10
10
  .footer-icons {
@@ -15,9 +15,20 @@
15
15
  li {
16
16
  display: inline;
17
17
  }
18
+
19
+ a {
20
+ color: var(--link);
21
+ }
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ a {
25
+ color: var(--meta);
26
+ }
27
+ }
18
28
 
19
29
  a:hover {
20
- color: darken($link-color, 15%);
30
+ color: var(--link);
31
+ filter: brightness(0.85);
21
32
  }
22
33
  }
23
34
  }
data/_sass/includes/_mermaid.scss ADDED
@@ -0,0 +1,8 @@
1
+ .mermaid {
2
+ background-color: rgba(255, 255, 255, 0.9);
3
+ border-radius: 2%;
4
+ }
5
+
6
+ .mermaid > svg {
7
+ margin: 20px;
8
+ }
data/_sass/includes/_navbar.scss CHANGED
@@ -15,14 +15,14 @@
15
15
 
16
16
  .site-header {
17
17
  padding: 2% 2% 1% 2%;
18
- background: $brand-color;
18
+ background: var(--background);
19
19
  display: inline-block;
20
20
  float: left;
21
21
  width: 100%;
22
22
 
23
23
  .separator {
24
24
  user-select: none;
25
- opacity: $navbar-separator-opacity;
25
+ opacity: 0;
26
26
 
27
27
  &:first-child {
28
28
  display: none;
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  a {
33
- color: $header-link-color;
33
+ color: var(--header-link);
34
34
  }
35
35
 
36
36
  .avatar {
@@ -75,7 +75,7 @@ nav {
75
75
 
76
76
  a {
77
77
  &:hover {
78
- color: $link-color;
78
+ color: var(--link);
79
79
  }
80
80
 
81
81
  &#pull {
@@ -137,10 +137,11 @@ nav {
137
137
  text-align: center;
138
138
  font-size: 1em;
139
139
  position: relative;
140
- background-color: darken($background-color, 2%);
140
+ background-color: var(--background);
141
+ backdrop-filter: brightness(0.98);
141
142
 
142
143
  &:nth-of-type(4n) {
143
- background-color: $background-color;
144
+ background-color: var(--background);
144
145
  }
145
146
 
146
147
  a {
data/_sass/includes/_share_buttons.scss CHANGED
@@ -4,7 +4,7 @@ ul.share-buttons {
4
4
  margin: 0;
5
5
  text-align: center;
6
6
 
7
- div.meta {
7
+ li.meta {
8
8
  display: inline;
9
9
  margin-right: 0.5em;
10
10
  vertical-align: super;
data/_sass/layouts/_blog.scss CHANGED
@@ -6,9 +6,10 @@
6
6
  height: 100%;
7
7
  font-size: 1.2em;
8
8
  text-align: center;
9
- color: $header-text-color;
10
- background: no-repeat $header-background-color;
11
- background-size: $feature-image-size;
9
+ color: var(--header-text);
10
+ background: no-repeat var(--header-background);
11
+ backdrop-filter: brightness(0.5);
12
+ background-size: cover;
12
13
 
13
14
  h1 {
14
15
  font-family: $font-family-logo;
@@ -44,8 +45,8 @@
44
45
  width: 100%;
45
46
  margin-bottom: 0;
46
47
  display: inline-block;
47
- background-size: $feature-image-size;
48
- border-bottom: 1px solid $border-color;
48
+ background-size: cover;
49
+ border-bottom: 1px solid var(--border);
49
50
 
50
51
  p a {
51
52
  @extend .body-link;
data/_sass/layouts/_page.scss CHANGED
@@ -11,7 +11,7 @@ h1.title {
11
11
  .subtitle {
12
12
  font-weight: normal;
13
13
  margin-top: 5px;
14
- text-shadow: 1px 1px 2px $text-shadow;
14
+ text-shadow: 1px 1px 2px var(--text-shadow);
15
15
  }
16
16
 
17
17
  //Shared css in _post.scss
data/_sass/layouts/_posts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .comments {
2
2
  @extend %padding-post;
3
- border-bottom: 1px solid $border-color;
3
+ border-bottom: 1px solid var(--border);
4
4
  float: left;
5
5
  width: 100%;
6
6
  }
@@ -46,7 +46,7 @@ header {
46
46
  }
47
47
 
48
48
  .meta {
49
- color: $meta; // rgba($text-color, .65);
49
+ color: var(--meta);
50
50
  letter-spacing: 0.1em;
51
51
  margin: 0;
52
52
  text-transform: uppercase;
@@ -55,7 +55,7 @@ header {
55
55
  /* --- Post info --- */
56
56
  .post-info {
57
57
  /* For border in author
58
- border: 1px solid $border-color;
58
+ border: 1px solid var(--border);
59
59
  padding-left: 0.5em;
60
60
  */
61
61
  border-radius: 1em;
@@ -84,7 +84,7 @@ header {
84
84
  padding: 0;
85
85
 
86
86
  .post-link {
87
- color: $feature-image-text-color;
87
+ color: var(--header-text);
88
88
  }
89
89
 
90
90
  h1.title, .post-info {
@@ -92,12 +92,13 @@ header {
92
92
  }
93
93
 
94
94
  header {
95
- color: $feature-image-text-color;
95
+ color: var(--header-text);
96
96
  margin-bottom: 0;
97
97
  padding: $padding-large/2.5 $padding-large;
98
98
 
99
99
  .meta {
100
- color: rgba($feature-image-text-color, .7);
100
+ color: var(--header-text);
101
+ filter: opacity(0.7);
101
102
  }
102
103
  }
103
104
 
@@ -134,3 +135,21 @@ header {
134
135
  background-size: 400% auto;
135
136
  }
136
137
  }
138
+
139
+ .post-content {
140
+ h1 { color: var(--h1); }
141
+ h2 { color: var(--h2); }
142
+ h3 { color: var(--h3); }
143
+ h4 { color: var(--h4); }
144
+ h5 { color: var(--h5); }
145
+ h6 { color: var(--h6); }
146
+
147
+ a {
148
+ color: inherit;
149
+ filter: hue-rotate(20deg);
150
+
151
+ :visited {
152
+ filter: saturate(0.7);
153
+ }
154
+ }
155
+ }