type-on-strap 2.3.4 → 2.3.5

Sign up to get free protection for your applications and to get access to all the features.
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
+ }