jekyll-theme-simplex 0.9.5 → 0.9.8.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3294a1cbffe7a7b4b7624bf42a4d962bc03265d840305ef74c485dbe5e78622e
4
- data.tar.gz: fc353f36599d02f8d103ea4d313b93ebf2d9ce9e73776d7c8cf809f18e63c168
3
+ metadata.gz: ab9928ba26f93aafe7e61599c23230ca2a6dac7b6d99df1a1d98e275ff504787
4
+ data.tar.gz: 396ceb65bac045ec76a2567681e26fe27e6fdd734ca3f61a6e2ee9dd5f1b2d32
5
5
  SHA512:
6
- metadata.gz: 528ec5e472bc2e01a14041280f797a47c71c2b56ffb86bbdf290555dc8f1b9bab0ddeb61058305876f479af97ab3c153c1091f18a45d5d4d8e85f645c4c628ef
7
- data.tar.gz: 86a70450ceb07ab632a141c3a66dc2d38f861d0a19429e4ef63b8fc13731e7c679901c13efeb38b7db6598b18011ed9c02468387472479c1a83e964366abc447
6
+ metadata.gz: 6880f4378e6aa963ddc3bafceaa56f2dd2143faf08183fdbeb2f70a9e962d584a6f97d2e69c9f44569bf569b2a10458818db46c507ddecb5cd7948f51aa2e0c9
7
+ data.tar.gz: 7bee19e85da30a748f399a798c5c65774680768ac842f5f4c5cc74006137474edc8387d7fe886864c12f94f07d13e2bb045ddf5f9ce223fa92b41580c570b0f1
data/README.md CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  A *simple* yet neat blogging theme. Developed for the [golas blog](https://golas.blog/) project.
8
8
 
9
+
9
10
  ## 👓 Preview
10
11
  ![Preview](preview.gif)
11
12
 
@@ -16,6 +17,12 @@ A *simple* yet neat blogging theme. Developed for the [golas blog](https://golas
16
17
  ### Dark mode
17
18
  ![Dark mode preview](previewDark.gif)
18
19
 
20
+ ### Buttons
21
+ ![Buttons preview](previewButtons.png)
22
+
23
+ ### Lity Lightbox
24
+ Supports images, videos, iFrames and more. See below for syntax.
25
+
19
26
  ## ℹ Installation
20
27
 
21
28
  Add this line to your Jekyll site's `Gemfile`:
@@ -41,12 +48,9 @@ Or install it yourself as:
41
48
  ## ✔ Usage
42
49
 
43
50
  ### ⚙ Setting up the template
44
- Replace the contents of the _config.yml file with the following:
51
+ Add following to the `_config.yml`:
45
52
  ```yaml
46
- title: the Simplex theme #The name of your blog.
47
53
  logo_img: /assets/img/icons/golasblog_logo.svg #Absolute path to the logo. If not specified, the title will be displayed instead.
48
- description: description #Description.
49
- global_tags: jekyll theme simplex golasblog responsive html5 #Tags.
50
54
  copyright: © Golasowski 2020 #Your copyright.
51
55
 
52
56
  collections:
@@ -94,14 +98,14 @@ Create a `_data` folder in the root directory. In the folder, create a `nav.yaml
94
98
  hue: "var(--c-themeHueRed)" #Menu item hue - see note [1].
95
99
  subnav: #Subnav. See note [2].
96
100
  - title: C++ #Submenu item title.
97
- url: cpp.html #Submenu item url.
101
+ url: category/cpp.html #Submenu item url.
98
102
  hue: "var(--c-themeHueOrange)" #Submenu item hue.
99
103
  subnav: #Another subnav
100
104
  - title: Libraries
101
105
  url: libs.html
102
106
  hue: "var(--c-themeHueBlue)"
103
107
  - title: Design
104
- url: design.html
108
+ url: category/design.html
105
109
  icon: assets/img/icons/design.svg
106
110
  hue: "var(--c-themeHueRed)"
107
111
  ```
@@ -120,6 +124,51 @@ author: andy #Author's nick.
120
124
  Your markdown content here.
121
125
  ```
122
126
 
127
+ ### ⚡ Syntax highlighting
128
+ The theme uses Pygments CSS created by [@richleland](https://github.com/richleland). If you want to modify the highlighting styles, just download different CSS or create your own - see [Jekyll docs](https://jekyllrb.com/docs/liquid/tags/#stylesheets-for-syntax-highlighting).
129
+
130
+ Note - `@media` is used to manage different styles for light and dark web browser mode. See `_variables.scss` file for details.
131
+
132
+ ### 📷 Inserting pictures
133
+ Classic Markdown syntax is supported. However, to be able to use the lightbox feature, you have to use HTML syntax. Minimal example:
134
+ ```html
135
+ <a href="/assets/example.jpg" data-lity>
136
+ <img src="/assets/example_thumbnail.jpg"/>
137
+ </a>
138
+ ```
139
+
140
+ To provide image description use this syntax:
141
+ ```html
142
+ <div class="sx-picture">
143
+ <a href="/assets/example.jpg" data-lity>
144
+ <img src="/assets/example_thumbnail.jpg"/>
145
+ </a>
146
+ <span class="sx-subtitle">My picture description.</span>
147
+ </div>
148
+ ```
149
+
150
+ **Do not forget the `data-lity` attribute.**
151
+
152
+ #### ↔ Centering
153
+ To center pictures, put the code inside a `div` with `sx-center` class like this:
154
+ ```html
155
+ <div markdown=1 class="sx-center">
156
+ ![My picture](/assets/example.jpg)
157
+ </div>
158
+ ```
159
+
160
+ ### 🔘 Buttons
161
+ Buttons can be inserted with the following syntax. Just replace `theme` with `red`, `green`, `blue`, `orange`, `purple` or `brown`, specify the target link in `href` attribute and the icon in `src` attribute.
162
+ ```html
163
+ <div class='sx-button'>
164
+ <a href='https://your.link.here.example.com/' class='sx-button__content theme'>
165
+ <img src='/assets/img/icons/example_icon.svg'/>#{text}
166
+ </a>
167
+ </div>
168
+ ```
169
+
170
+ Markdown attribute can be omitted if you don't use markdown inside the block (e.g. by using the lightbox syntax).
171
+
123
172
  ### ℹ Notes
124
173
  [1] Hue can be either one of the predefined colors or any of the CSS `color` attribute supported values (hex, rgb...).
125
174
 
@@ -146,6 +195,17 @@ You can use following predefined colors:
146
195
  ```
147
196
  These colors are CSS variables, usage: `var(--var-name)`
148
197
 
198
+ ## Add-ons
199
+ Add-ons are distributed as Jekyll plugins. Just download any desired `.rb` file from the repository `_plugin` folder and put it in your `_plugin` folder.
200
+
201
+ ### Buttons (button.rb)
202
+ Adds a tag to simplify insertion of buttons:
203
+ ```
204
+ {% button red|https://www.example.com/|/assets/img/icons/cog.svg %}
205
+ Download binary
206
+ {% endbutton %}
207
+ ```
208
+
149
209
  ## 🤝 Contributing
150
210
 
151
211
  Bug reports and pull requests are welcome on [GitHub](https://github.com/andreondra/jekyll-theme-simplex).
@@ -159,6 +219,13 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
159
219
  When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
160
220
  To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-simplex.gemspec` accordingly.
161
221
 
222
+ ## Credits
223
+ Includes icons by [uxwing](https://uxwing.com/).
224
+
225
+ The lightbox feature is provided by [Lity](https://github.com/jsor/lity) licensed under the [MIT License](https://opensource.org/licenses/MIT).
226
+
227
+ Uses [jQuery](https://github.com/jquery/jquery) JavaScript plugin licensed under the [MIT License](https://opensource.org/licenses/MIT).
228
+
162
229
  ## ⚖ License
163
230
  © Ondrej Golasowski. The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
164
231
 
data/_includes/head.html CHANGED
@@ -1,5 +1,10 @@
1
1
  <link rel="stylesheet" href="{{ site.url }}/assets/fonts/fonts.css"/>
2
2
  <link rel="stylesheet" href="{{ site.url }}/assets/style.css"/>
3
+ <link rel="stylesheet" href="{{ site.url }}/assets/js/lity.min.css"/>
4
+
5
+ {% if site.favicon != nil %}
6
+ <link rel='shortcut icon' type='image/x-icon' href='{{ site.favicon }}' />
7
+ {% endif %}
3
8
 
4
9
  <meta charset="UTF-8">
5
10
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -2,10 +2,10 @@
2
2
  <section class="logo">
3
3
  <a href="{{ site.url }}/" class="logo__link">
4
4
  {% if site.logo_img != nil %}
5
- <h1 style="display: none;">golasblog</h1>
5
+ <h1 style="display: none;">{{ site.title }}</h1>
6
6
  <img class="logo__link__img" src={{site.logo_img}}/>
7
7
  {% else %}
8
- <h1>golasblog</h1>
8
+ <h1>{{ site.title }}</h1>
9
9
  {% endif %}
10
10
  </a>
11
11
  </section>
@@ -1,2 +1,3 @@
1
1
  <script src="{{ site.url }}/assets/js/jquery.slim.min.js"></script>
2
+ <script src="{{ site.url }}/assets/js/lity.min.js"></script>
2
3
  <script src="{{ site.url }}/assets/js/tools.js"></script>
data/_layouts/post.html CHANGED
@@ -2,7 +2,7 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <section class="post">
5
+ <article class="post">
6
6
 
7
7
  <div class="post__title">
8
8
  <h1 class="post__title__text">{{ page.title }}</h1>
@@ -30,7 +30,31 @@ layout: default
30
30
  {% endif %}
31
31
  </div>
32
32
 
33
+ {% if page.prevPart != nil or page.nextPart != nil %}
34
+ <div class="post__navigator">
35
+ <div
36
+ class="post__navigator__buttons"
37
+ {% if page.prevPart == nil %}
38
+ style="justify-content: flex-end;"
39
+ {% endif %}
40
+ >
41
+ {% if page.prevPart != nil %}
42
+ <a href="{% link {{ page.prevPart }} %}">
43
+ <img class="arrow-left" src="{{ site.url }}/assets/img/icons/arrow_left.svg"/>
44
+ Previous
45
+ </a>
46
+ {% endif %}
47
+ {% if page.nextPart != nil %}
48
+ <a href="{% link {{ page.nextPart }} %}">
49
+ Next
50
+ <img class="arrow-right" src="{{ site.url }}/assets/img/icons/arrow_right.svg"/>
51
+ </a>
52
+ {% endif %}
53
+ </div>
54
+ </div>
55
+ {% endif %}
56
+
33
57
  <div class="post__content">
34
58
  {{ content }}
35
59
  </div>
36
- </section>
60
+ </article>
data/_sass/_feed.scss CHANGED
@@ -81,8 +81,8 @@
81
81
  @include flexbox;
82
82
 
83
83
  &__title{
84
- color: white;
85
- background: var(--c-themePrimaryDark);
84
+ color: var(--c-noCategoryText);
85
+ background: var(--c-noCategoryBackground);
86
86
  padding: .2rem .5rem;
87
87
  }
88
88
 
data/_sass/_global.scss CHANGED
@@ -25,13 +25,10 @@ body{
25
25
  margin: 0;
26
26
  min-height: 100vh;
27
27
 
28
- display: grid;
29
- gap: 0 100px;
30
- align-items: start;
31
- grid-template-areas:
32
- "header"
33
- "main"
34
- "footer";
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+ justify-content: center;
35
32
  }
36
33
 
37
34
  h1,h2,h3,h4,h5,h5,h6{
@@ -66,3 +63,95 @@ a{
66
63
  color: var(--c-linkActive);
67
64
  }
68
65
  }
66
+
67
+ table:not([class]){
68
+ border-collapse: collapse;
69
+ border-spacing: 0;
70
+ border: 1px solid var(--c-tableBorder);
71
+
72
+ th,td{
73
+ padding: .25rem;
74
+ border: 1px solid var(--c-tableBorder);
75
+ }
76
+ }
77
+
78
+ .highlight{
79
+
80
+ margin: 2rem 0;
81
+ transition: $t-smooth;
82
+ box-shadow: inset 0px 0px 14px -4px var(--c-codeShadow);
83
+
84
+ &:hover{
85
+ box-shadow: inset 0px 0px 14px -4px var(--c-codeShadowHover);
86
+ }
87
+
88
+ max-width: calc(100vw - 2rem);
89
+ overflow-x: auto;
90
+
91
+ pre{
92
+ margin: 0;
93
+ padding: 1rem;
94
+ }
95
+ }
96
+
97
+ .sx-center{
98
+
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ }
103
+
104
+ .sx-button{
105
+
106
+ width: 100%;
107
+ margin: 1rem 0;
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+
112
+ &__content{
113
+
114
+ &:link, &:visited, &:hover, &:active{
115
+ color: var(--c-themePrimaryLight);
116
+ }
117
+ text-decoration: none;
118
+ width: fit-content;
119
+ padding: .5rem 1rem;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ transition: $t-smooth;
124
+
125
+ &.red{background-color: var(--c-themeHueRed);}
126
+ &.orange{background-color: var(--c-themeHueOrange);}
127
+ &.green{background-color: var(--c-themeHueGreen);}
128
+ &.blue{background-color: var(--c-themeHueBlue);}
129
+ &.purple{background-color: var(--c-themeHuePurple);}
130
+ &.brown{background-color: var(--c-themeHueBrown);}
131
+
132
+ img{
133
+ margin-right: 1rem;
134
+ height: 1rem;
135
+ filter: brightness(0) invert(1);
136
+ }
137
+
138
+ &:hover{
139
+ letter-spacing: .05rem;
140
+ }
141
+ }
142
+ }
143
+
144
+ .sx-subtitle{
145
+ font-style: italic;
146
+ color: var(--c-subtitle);
147
+ }
148
+
149
+ .sx-picture{
150
+
151
+ display: flex;
152
+ flex-direction: column;
153
+ align-items: center;
154
+ justify-content: center;
155
+ width: fit-content;
156
+ margin: 1.5rem 0;
157
+ }
data/_sass/_page.scss CHANGED
@@ -14,4 +14,8 @@
14
14
  justify-content: flex-start;
15
15
  align-items: center;
16
16
  }
17
+
18
+ img{
19
+ max-width: 100%;
20
+ }
17
21
  }
data/_sass/_post.scss CHANGED
@@ -42,8 +42,8 @@
42
42
  @include flexbox;
43
43
 
44
44
  &__title{
45
- color: white;
46
- background: var(--c-themePrimaryDark);
45
+ color: var(--c-noCategoryText);
46
+ background: var(--c-noCategoryBackground);
47
47
  padding: .2rem .5rem;
48
48
  }
49
49
 
@@ -64,7 +64,7 @@
64
64
 
65
65
  color: var(--c-postText);
66
66
  @include for-size('tablet'){
67
- margin-top: 1rem;
67
+ margin-top: .5rem;
68
68
  }
69
69
  }
70
70
 
@@ -72,7 +72,6 @@
72
72
 
73
73
  color: var(--c-postText);
74
74
  width: fit-content;
75
- //box-shadow: inset 0px 0px 14px -4px rgba(0,0,0,0.5);
76
75
  @include flexbox;
77
76
 
78
77
  &__photo{
@@ -93,5 +92,46 @@
93
92
  h1{
94
93
  font-size: 1.8rem;
95
94
  }
95
+ img{
96
+ max-width: 100%;
97
+ }
98
+ }
99
+
100
+ &__navigator{
101
+
102
+ margin-top: 1rem;
103
+ width: 100%;
104
+
105
+ &__buttons{
106
+
107
+ @include flexbox{
108
+ justify-content: space-between;
109
+ };
110
+
111
+ a{
112
+ transition: $t-smooth;
113
+ text-decoration: none;
114
+ font-weight: bold;
115
+ font-size: 1.25rem;
116
+ color: var(--c-navigator);
117
+ filter: var(--c-navigatorFilter);
118
+
119
+ display: flex;
120
+ align-items: center;
121
+
122
+ &:hover{
123
+ letter-spacing: .25rem;
124
+ }
125
+
126
+ .arrow-left{
127
+ margin-right: .5rem;
128
+ height: 1em;
129
+ }
130
+ .arrow-right{
131
+ margin-left: .5rem;
132
+ height: 1em;
133
+ }
134
+ }
135
+ }
96
136
  }
97
137
  }
@@ -26,46 +26,129 @@
26
26
  // ELEMENT COLORS
27
27
  :root{
28
28
 
29
- @media (prefers-color-scheme: light){
29
+ // *** Default light. ***
30
+ --c-articleHeading: var(--c-themePrimaryDark);
31
+ --c-articleParagraph: var(--c-themeSecondaryDark);
32
+ --c-articleBackground: var(--c-themePrimaryLight);
30
33
 
34
+ --c-pageBackground: var(--c-themePrimaryLight);
31
35
 
32
- --c-articleHeading: var(--c-themePrimaryDark);
33
- --c-articleParagraph: var(--c-themeSecondaryDark);
34
- --c-articleBackground: var(--c-themePrimaryLight);
36
+ --c-headerImageFilter: none;
37
+ --c-menuLinks: var(--c-themePrimaryDark);
38
+ --c-menuDepth0: var(--c-themeSecondaryLight);
39
+ --c-menuItemsFilter: brightness(0);
40
+ --c-menuItemsFilterHover: none;
41
+ --c-menuShadow: rgba(0,0,0,0.5);
35
42
 
36
- --c-pageBackground: var(--c-themePrimaryLight);
43
+ --c-snippetBackgroundExternal: rgba(239, 239, 239, 0.425);
44
+ --c-snippetBackgroundInternal: var(--c-pageBackground);
45
+ --c-snippetHeading: var(--c-themePrimaryDark);
46
+ --c-snippetDate: var(--c-themeSecondaryDark);
47
+ --c-snippetAuthor: var(--c-themePrimaryDark);
48
+ --c-snippetShadowHover: rgba(0,0,0,0.5);
49
+ --c-snippetShadow: rgba(0, 0, 0, 0);
37
50
 
38
- --c-headerImageFilter: none;
39
- --c-menuLinks: var(--c-themePrimaryDark);
40
- --c-menuDepth0: var(--c-themeSecondaryLight);
41
- --c-menuItemsFilter: brightness(0);
42
- --c-menuItemsFilterHover: none;
43
- --c-menuShadow: rgba(0,0,0,0.5);
44
-
45
- --c-snippetBackgroundExternal: rgba(239, 239, 239, 0.425);
46
- --c-snippetBackgroundInternal: var(--c-pageBackground);
47
- --c-snippetHeading: var(--c-themePrimaryDark);
48
- --c-snippetDate: var(--c-themeSecondaryDark);
49
- --c-snippetAuthor: var(--c-themePrimaryDark);
50
- --c-snippetShadowHover: rgba(0,0,0,0.5);
51
- --c-snippetShadow: rgba(0, 0, 0, 0);
51
+ --c-postTitle: var(--c-themePrimaryDark);
52
+ --c-postText: var(--c-themePrimaryDark);
53
+ --c-pageTitle: var(--c-themePrimaryDark);
54
+ --c-pageText: var(--c-themePrimaryDark);
52
55
 
53
- --c-postTitle: var(--c-themePrimaryDark);
54
- --c-postText: var(--c-themePrimaryDark);
55
- --c-pageTitle: var(--c-themePrimaryDark);
56
- --c-pageText: var(--c-themePrimaryDark);
56
+ --c-feed-title: var(--c-themePrimaryDark);
57
57
 
58
- --c-feed-title: var(--c-themePrimaryDark);
58
+ --c-link: var(--c-themeTerniaryDark);
59
+ --c-linkVisited: var(--c-themeQuaternaryDark);
60
+ --c-linkHover: var(--c-themePrimaryDark);
61
+ --c-linkActive: var(--c-themePrimaryDark);
59
62
 
60
- --c-link: var(--c-themeTerniaryDark);
61
- --c-linkVisited: var(--c-themeQuaternaryDark);
62
- --c-linkHover: var(--c-themePrimaryDark);
63
- --c-linkActive: var(--c-themePrimaryDark);
63
+ --c-footerText: var(--c-themePrimaryDark);
64
+ --c-footerImageFilter: none;
64
65
 
65
- --c-footerText: var(--c-themePrimaryDark);
66
- --c-footerImageFilter: none;
67
- }
66
+ --c-codeShadow: rgba(0, 0, 0, 0.5);
67
+ --c-codeShadowHover: rgba(0, 0, 0, 0.1);
68
+
69
+ --c-navigator: var(--c-themePrimaryDark);
70
+ --c-navigatorFilter: none;
71
+
72
+ --c-noCategoryBackground: var(--c-themePrimaryDark);
73
+ --c-noCategoryText: var(--c-themePrimaryLight);
74
+
75
+ --c-tableBorder: var(--c-themePrimaryDark);
76
+
77
+ --c-subtitle: var(--c-themeTerniaryDark);
78
+
79
+ //Syntax highlighting.
80
+ .highlight .hll { background-color: #ffffcc }
81
+ .highlight .c { color: #8f5902; font-style: italic } /* Comment */
82
+ .highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
83
+ .highlight .g { color: #000000 } /* Generic */
84
+ .highlight .k { color: #204a87; font-weight: bold } /* Keyword */
85
+ .highlight .l { color: #000000 } /* Literal */
86
+ .highlight .n { color: #000000 } /* Name */
87
+ .highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
88
+ .highlight .x { color: #000000 } /* Other */
89
+ .highlight .p { color: #000000; font-weight: bold } /* Punctuation */
90
+ .highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
91
+ .highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
92
+ .highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
93
+ .highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
94
+ .highlight .gd { color: #a40000 } /* Generic.Deleted */
95
+ .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
96
+ .highlight .gr { color: #ef2929 } /* Generic.Error */
97
+ .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
98
+ .highlight .gi { color: #00A000 } /* Generic.Inserted */
99
+ .highlight .go { color: #000000; font-style: italic } /* Generic.Output */
100
+ .highlight .gp { color: #8f5902 } /* Generic.Prompt */
101
+ .highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
102
+ .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
103
+ .highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
104
+ .highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
105
+ .highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
106
+ .highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
107
+ .highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
108
+ .highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
109
+ .highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
110
+ .highlight .ld { color: #000000 } /* Literal.Date */
111
+ .highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
112
+ .highlight .s { color: #4e9a06 } /* Literal.String */
113
+ .highlight .na { color: #c4a000 } /* Name.Attribute */
114
+ .highlight .nb { color: #204a87 } /* Name.Builtin */
115
+ .highlight .nc { color: #000000 } /* Name.Class */
116
+ .highlight .no { color: #000000 } /* Name.Constant */
117
+ .highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
118
+ .highlight .ni { color: #ce5c00 } /* Name.Entity */
119
+ .highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
120
+ .highlight .nf { color: #000000 } /* Name.Function */
121
+ .highlight .nl { color: #f57900 } /* Name.Label */
122
+ .highlight .nn { color: #000000 } /* Name.Namespace */
123
+ .highlight .nx { color: #000000 } /* Name.Other */
124
+ .highlight .py { color: #000000 } /* Name.Property */
125
+ .highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
126
+ .highlight .nv { color: #000000 } /* Name.Variable */
127
+ .highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
128
+ .highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
129
+ .highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
130
+ .highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
131
+ .highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
132
+ .highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
133
+ .highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
134
+ .highlight .sc { color: #4e9a06 } /* Literal.String.Char */
135
+ .highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
136
+ .highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
137
+ .highlight .se { color: #4e9a06 } /* Literal.String.Escape */
138
+ .highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
139
+ .highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
140
+ .highlight .sx { color: #4e9a06 } /* Literal.String.Other */
141
+ .highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
142
+ .highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
143
+ .highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
144
+ .highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
145
+ .highlight .vc { color: #000000 } /* Name.Variable.Class */
146
+ .highlight .vg { color: #000000 } /* Name.Variable.Global */
147
+ .highlight .vi { color: #000000 } /* Name.Variable.Instance */
148
+ .highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
149
+
68
150
 
151
+ // *** Dark mode ***
69
152
  @media (prefers-color-scheme: dark){
70
153
 
71
154
  --c-headerImageFilter: invert(1);
@@ -95,10 +178,94 @@
95
178
 
96
179
  --c-pageBackground: var(--c-themePrimaryDark);
97
180
 
181
+ --c-link: var(--c-themeTerniaryLight);
182
+ --c-linkVisited: var(--c-themeQuaternaryLight);
183
+ --c-linkHover: var(--c-themePrimaryLight);
184
+ --c-linkActive: var(--c-themePrimaryLight);
185
+
98
186
  --c-footerText: var(--c-themePrimaryLight);
99
187
  --c-footerImageFilter: invert(1);
188
+
189
+ --c-codeShadow: rgba(0, 0, 0, 0);
190
+ --c-codeShadowHover: rgba(0, 0, 0, 0);
191
+
192
+ --c-navigator: var(--c-themePrimaryDark);
193
+ --c-navigatorFilter: invert(1);
194
+
195
+ --c-noCategoryBackground: var(--c-themePrimaryLight);
196
+ --c-noCategoryText: var(--c-themePrimaryDark);
197
+
198
+ --c-tableBorder: var(--c-themePrimaryLight);
199
+
200
+ --c-subtitle: var(--c-themeTerniaryLight);
201
+
202
+ //Syntax highlighting.
203
+ .highlight pre { background-color: #272822; }
204
+ .highlight .hll { background-color: #272822; }
205
+ .highlight .c { color: #75715e } /* Comment */
206
+ .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
207
+ .highlight .k { color: #66d9ef } /* Keyword */
208
+ .highlight .l { color: #ae81ff } /* Literal */
209
+ .highlight .n { color: #f8f8f2 } /* Name */
210
+ .highlight .o { color: #f92672 } /* Operator */
211
+ .highlight .p { color: #f8f8f2 } /* Punctuation */
212
+ .highlight .cm { color: #75715e } /* Comment.Multiline */
213
+ .highlight .cp { color: #75715e } /* Comment.Preproc */
214
+ .highlight .c1 { color: #75715e } /* Comment.Single */
215
+ .highlight .cs { color: #75715e } /* Comment.Special */
216
+ .highlight .ge { font-style: italic } /* Generic.Emph */
217
+ .highlight .gs { font-weight: bold } /* Generic.Strong */
218
+ .highlight .kc { color: #66d9ef } /* Keyword.Constant */
219
+ .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
220
+ .highlight .kn { color: #f92672 } /* Keyword.Namespace */
221
+ .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
222
+ .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
223
+ .highlight .kt { color: #66d9ef } /* Keyword.Type */
224
+ .highlight .ld { color: #e6db74 } /* Literal.Date */
225
+ .highlight .m { color: #ae81ff } /* Literal.Number */
226
+ .highlight .s { color: #e6db74 } /* Literal.String */
227
+ .highlight .na { color: #a6e22e } /* Name.Attribute */
228
+ .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
229
+ .highlight .nc { color: #a6e22e } /* Name.Class */
230
+ .highlight .no { color: #66d9ef } /* Name.Constant */
231
+ .highlight .nd { color: #a6e22e } /* Name.Decorator */
232
+ .highlight .ni { color: #f8f8f2 } /* Name.Entity */
233
+ .highlight .ne { color: #a6e22e } /* Name.Exception */
234
+ .highlight .nf { color: #a6e22e } /* Name.Function */
235
+ .highlight .nl { color: #f8f8f2 } /* Name.Label */
236
+ .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
237
+ .highlight .nx { color: #a6e22e } /* Name.Other */
238
+ .highlight .py { color: #f8f8f2 } /* Name.Property */
239
+ .highlight .nt { color: #f92672 } /* Name.Tag */
240
+ .highlight .nv { color: #f8f8f2 } /* Name.Variable */
241
+ .highlight .ow { color: #f92672 } /* Operator.Word */
242
+ .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
243
+ .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
244
+ .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
245
+ .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
246
+ .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
247
+ .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
248
+ .highlight .sc { color: #e6db74 } /* Literal.String.Char */
249
+ .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
250
+ .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
251
+ .highlight .se { color: #ae81ff } /* Literal.String.Escape */
252
+ .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
253
+ .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
254
+ .highlight .sx { color: #e6db74 } /* Literal.String.Other */
255
+ .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
256
+ .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
257
+ .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
258
+ .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
259
+ .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
260
+ .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
261
+ .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
262
+ .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
263
+
264
+ //.highlight .gh { } /* Generic Heading & Diff Header */
265
+ .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
266
+ .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
267
+ .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
100
268
  }
101
-
102
269
  }
103
270
 
104
271
  // SIZES