Browse Source

Squashed commit of v3

This commit introduces a couple of major changes. You will have to update your personal _config.yml file!

- Rename to hexo-theme-cactus
- Support multiple colorschemes (closes #74)
- Upgrade FontAwesome to v5 (closes #71)
- Show menu in posts by default on very large screens
- Allow overriding of theme config variables from the main config file (see https://hexo.io/docs/configuration.html#Overriding-Theme-Config)
- Reorganise theme config variables
- Setup Gulp for linting, dependency management and config validation
- Cleanup Javascript and Stylus code
- A couple of smaller bugfixes
pull/77/head
Pieter Robberechts 1 year ago
parent
commit
79ec248679
100 changed files with 3872 additions and 7720 deletions
  1. 8
    0
      .gitignore
  2. 24
    0
      .jshintrc
  3. 45
    0
      .stylintrc
  4. 103
    50
      README.md
  5. 115
    42
      _config.yml
  6. 106
    0
      gulpfile.js
  7. 1
    1
      layout/_partial/comments.ejs
  8. 1
    1
      layout/_partial/footer.ejs
  9. 17
    17
      layout/_partial/head.ejs
  10. 6
    6
      layout/_partial/header.ejs
  11. 2
    2
      layout/_partial/pagination.ejs
  12. 8
    8
      layout/_partial/post/actions_desktop.ejs
  13. 5
    7
      layout/_partial/post/actions_mobile.ejs
  14. 10
    10
      layout/_partial/post/share.ejs
  15. 1
    1
      layout/_partial/post/tag.ejs
  16. 6
    6
      layout/_partial/scripts.ejs
  17. 2
    3
      layout/_partial/styles.ejs
  18. 25
    15
      layout/index.ejs
  19. 2
    2
      layout/layout.ejs
  20. 45
    0
      package.json
  21. 8
    0
      scripts/merge-configs.js
  22. 13
    0
      source/css/_colors/classic.styl
  23. 13
    0
      source/css/_colors/dark.styl
  24. 14
    0
      source/css/_colors/light.styl
  25. 14
    0
      source/css/_colors/white.styl
  26. 97
    84
      source/css/_extend.styl
  27. 4
    0
      source/css/_fonts.styl
  28. 40
    60
      source/css/_highlight/agate.styl
  29. 35
    49
      source/css/_highlight/androidstudio.styl
  30. 35
    56
      source/css/_highlight/arta.styl
  31. 34
    54
      source/css/_highlight/atelier-cave-dark.styl
  32. 33
    53
      source/css/_highlight/atelier-dune-dark.styl
  33. 34
    55
      source/css/_highlight/atelier-estuary-dark.styl
  34. 33
    53
      source/css/_highlight/atelier-forest-dark.styl
  35. 33
    53
      source/css/_highlight/atelier-heath-dark.styl
  36. 33
    53
      source/css/_highlight/atelier-lakeside-dark.styl
  37. 34
    55
      source/css/_highlight/atelier-plateau-dark.styl
  38. 34
    55
      source/css/_highlight/atelier-savanna-dark.styl
  39. 33
    53
      source/css/_highlight/atelier-seaside-dark.styl
  40. 33
    53
      source/css/_highlight/atelier-sulphurpool-dark.styl
  41. 19
    42
      source/css/_highlight/codepen-embed.styl
  42. 19
    45
      source/css/_highlight/dark.styl
  43. 28
    54
      source/css/_highlight/darkula.styl
  44. 29
    55
      source/css/_highlight/far.styl
  45. 33
    54
      source/css/_highlight/hopscotch.styl
  46. 41
    68
      source/css/_highlight/hybrid.styl
  47. 37
    55
      source/css/_highlight/ir-black.styl
  48. 37
    59
      source/css/_highlight/kimbie.styl
  49. 29
    56
      source/css/_highlight/monokai-sublime.styl
  50. 19
    51
      source/css/_highlight/monokai.styl
  51. 26
    55
      source/css/_highlight/obsidian.styl
  52. 36
    57
      source/css/_highlight/paraiso.styl
  53. 34
    53
      source/css/_highlight/pojoaque.styl
  54. 66
    80
      source/css/_highlight/railscasts.styl
  55. 32
    54
      source/css/_highlight/rainbow.styl
  56. 33
    58
      source/css/_highlight/solarized-dark.styl
  57. 64
    76
      source/css/_highlight/sunburst.styl
  58. 37
    57
      source/css/_highlight/tomorrow-night-blue.styl
  59. 37
    57
      source/css/_highlight/tomorrow-night-bright.styl
  60. 37
    57
      source/css/_highlight/tomorrow-night-eighties.styl
  61. 37
    57
      source/css/_highlight/tomorrow-night.styl
  62. 31
    49
      source/css/_highlight/zenburn.styl
  63. 4
    4
      source/css/_mixins.styl
  64. 20
    20
      source/css/_partial/archive.styl
  65. 94
    73
      source/css/_partial/article.styl
  66. 1
    1
      source/css/_partial/comments.styl
  67. 28
    19
      source/css/_partial/footer.styl
  68. 45
    33
      source/css/_partial/header.styl
  69. 9
    8
      source/css/_partial/index.styl
  70. 11
    12
      source/css/_partial/pagination.styl
  71. 81
    43
      source/css/_partial/post/actions_desktop.styl
  72. 61
    43
      source/css/_partial/post/actions_mobile.styl
  73. 23
    24
      source/css/_partial/search.styl
  74. 35
    36
      source/css/_util.styl
  75. 6
    14
      source/css/_variables.styl
  76. 76
    59
      source/css/style.styl
  77. BIN
      source/images/logo.png
  78. BIN
      source/images/theme overview.psd
  79. 28
    20
      source/js/main.js
  80. 92
    93
      source/js/search.js
  81. 0
    2337
      source/lib/font-awesome/css/font-awesome.css
  82. 0
    4
      source/lib/font-awesome/css/font-awesome.min.css
  83. 5
    0
      source/lib/font-awesome/css/fontawesome-all.min.css
  84. BIN
      source/lib/font-awesome/fonts/FontAwesome.otf
  85. BIN
      source/lib/font-awesome/fonts/fontawesome-webfont.eot
  86. 0
    2671
      source/lib/font-awesome/fonts/fontawesome-webfont.svg
  87. BIN
      source/lib/font-awesome/fonts/fontawesome-webfont.ttf
  88. BIN
      source/lib/font-awesome/fonts/fontawesome-webfont.woff
  89. BIN
      source/lib/font-awesome/fonts/fontawesome-webfont.woff2
  90. BIN
      source/lib/font-awesome/webfonts/fa-brands-400.eot
  91. 990
    0
      source/lib/font-awesome/webfonts/fa-brands-400.svg
  92. BIN
      source/lib/font-awesome/webfonts/fa-brands-400.ttf
  93. BIN
      source/lib/font-awesome/webfonts/fa-brands-400.woff
  94. BIN
      source/lib/font-awesome/webfonts/fa-brands-400.woff2
  95. BIN
      source/lib/font-awesome/webfonts/fa-regular-400.eot
  96. 363
    0
      source/lib/font-awesome/webfonts/fa-regular-400.svg
  97. BIN
      source/lib/font-awesome/webfonts/fa-regular-400.ttf
  98. BIN
      source/lib/font-awesome/webfonts/fa-regular-400.woff
  99. BIN
      source/lib/font-awesome/webfonts/fa-regular-400.woff2
  100. 0
    0
      source/lib/font-awesome/webfonts/fa-solid-900.eot

+ 8
- 0
.gitignore View File

@@ -0,0 +1,8 @@
.DS_Store
.idea/
*.log
*.iml
.tern-port
yarn.lock
package-lock.json
node_modules/

+ 24
- 0
.jshintrc View File

@@ -0,0 +1,24 @@
{
"asi": false,
"bitwise": true,
"browser": true,
"camelcase": true,
"curly": true,
"forin": true,
"immed": true,
"latedef": "nofunc",
"maxlen": 120,
"newcap": true,
"noarg": true,
"noempty": true,
"nonew": true,
"predef": [
"$"
],
"quotmark": true,
"trailing": true,
"undef": true,
"unused": true,

"expr": true
}

+ 45
- 0
.stylintrc View File

@@ -0,0 +1,45 @@
{
"blocks": false,
"brackets": "never",
"colons": "always",
"colors": "always",
"commaSpace": "always",
"commentSpace": "always",
"cssLiteral": "never",
"customProperties": [],
"depthLimit": false,
"duplicates": true,
"efficient": "always",
"exclude": ["source/css/_highlight/*"],
"extendPref": false,
"globalDupe": false,
"groupOutputByFile": true,
"indentPref": 2,
"leadingZero": "never",
"maxErrors": false,
"maxWarnings": false,
"mixed": false,
"mixins": [],
"namingConvention": "lowercase-dash",
"namingConventionStrict": true,
"none": "always",
"noImportant": true,
"parenSpace": "never",
"placeholders": "always",
"prefixVarsWithDollar": "always",
"quotePref": "double",
"reporterOptions": {
"columns": ["lineData", "severity", "description", "rule"],
"columnSplitter": " ",
"showHeaders": false,
"truncate": true
},
"semicolons": "never",
"sortOrder": "grouped",
"stackedProperties": "never",
"trailingWhitespace": "never",
"universal": false,
"valid": true,
"zeroUnits": false,
"zIndexNormalize": false
}

+ 103
- 50
README.md View File

@@ -1,10 +1,10 @@
# Cactus Dark
# Cactus

A responsive, dark and simple [Hexo](http://hexo.io) theme for a personal website.
A responsive, clean and simple [Hexo](http://hexo.io) theme for a personal website.

:cactus: [Demo](https://probberechts.github.io/cactus-dark/)
:cactus: [Demo](https://probberechts.github.io/hexo-theme-cactus/)

![cactus-dark](https://cloud.githubusercontent.com/assets/2175271/19885143/62e9269c-a01d-11e6-8e26-e36a36201d88.png)
![screenshot](https://cloud.githubusercontent.com/assets/2175271/19885143/62e9269c-a01d-11e6-8e26-e36a36201d88.png)

## Summary

@@ -16,45 +16,84 @@ A responsive, dark and simple [Hexo](http://hexo.io) theme for a personal websit

## General

- **Version** : 2.1
- **Version** : 3.0
- **Compatibility** : Hexo 3 or later

## Features

- Fully responsive
- Disqus
- Googe analytics
- Font Awesome icons
* Multiple color schemes
- Pick your own code highlighting scheme
- Configurable navigation menu
- Support for local search
- Projects list
- Simplicity
- I18n support
- Disqus integration
- Google analytics
- Font Awesome icons
- Simplicity

## Install
1. In the `root` directory:

```git
$ git clone https://github.com/probberechts/cactus-dark.git themes/cactus-dark
$ npm install hexo-pagination --save
$ git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus
```

2. Change the `theme` property in the `config.yml` file.

```yml
# theme: landscape
theme: cactus-dark
theme: cactus
```

3. Run: `hexo generate` and `hexo server`


## Configuration
You can (and should) modify a couple of settings. An overview of all settings
can be found in [_config.yml](_config.yml). The most important ones are
discussed below.

There are two possible methods to override these variables. As a first option,
you could fork the theme and maintain a custom branch with your settings.
Alternatively, you can configure it from your site's primary configuration
file. Therefore, define you custom settings under the `theme_config` variable.
For example:

```yml
# _config.yml
theme_config:
colorscheme: white
```

### Navigation

Setup the navigation menu in the theme's `_config.yml`:
```yml
# themes/cactus/_config.yml
colorscheme: dark
```

This will result in the white color scheme.


### Color scheme

Currently, this theme is delivered with four color schemes: `dark`, `light`,
`white` and `classic`. Set your preferred color scheme in the `_config.yml` file.

```yml
colorscheme: light
```

Alternatively, you can easily create your own color scheme by creating a new
file in `source/css/_colors`.


### Navigation

Setup the navigation menu in the `_config.yml`:

```yml
nav:
Home: /
About: /about/
@@ -63,28 +102,30 @@ nav:
LINK_NAME: URL
```


### Blog posts list on home page

You have two options for the list of blog posts on the home page:

- Show only the 5 most recent posts (default)

```
customize:
```yml
posts_overview:
show_all_posts: false
post_count: 5
```

- Show all posts

```
customize:
```yml
posts_overview:
show_all_posts: true
```


### Projects list

Create a projects file `source/_data/projects.json`.
Create a projects file `source/_data/projects.json` to show a list of your projects on the index page.

```json
[
@@ -101,83 +142,94 @@ Create a projects file `source/_data/projects.json`.
]
```


### Social media links

Cactus Dark can automatically add links to your social media accounts. Therefore, update the theme's `_config.yml`:
Cactus can automatically add links to your social media accounts.
Therefore, update the theme's `_config.yml`:

```
customize:
social_links:
github: your-github-url
twitter: your-twitter-url
NAME: your-NAME-url
```yml
social_links:
github: your-github-url
twitter: your-twitter-url
NAME: your-NAME-url
```

where `NAME` is the name of a [Font Awesome icon](http://fontawesome.io/icons/#brand).
where `NAME` is the name of a [Font Awesome icon](https://fontawesome.com/icons?d=gallery&s=brands).


### Language configuration

If you are new to Hexo and internationalization (i18n), please read [Hexo documentation - internationalization (i18n) section](https://hexo.io/docs/internationalization.html)
If you are new to Hexo and internationalization (i18n), please read
[Hexo documentation - internationalization (i18n) section](https://hexo.io/docs/internationalization.html)

Currently, the theme is delivered with:
Currently, the theme is delivered with support for:

- English (en), default
- Chinese (Simplified, PRC) (zh-CN)
- French (fr)
- Dutch (nl)

If you would like to use one the languages listed above, simply set `language` to the desired language (e.g., `fr`) in `_config.yml`.
If you would like to use one the languages listed above, simply set `language`
to the desired language (e.g., `fr`) in `_config.yml`.
Otherwise, you can follow the steps below (E.g., to add a Japanese (ja) translation):

1. Set `language` to `ja` in Hexo configuration file `_config.yml`
2. Create a `ja.yml` file in the `themes/cactus_dark/languages/` folder
3. Copy the content of `themes/cactus_dark/languages/default.yml` and paste it it into the `ja.yml` file
2. Create a `ja.yml` file in the `themes/cactus/languages/` folder
3. Copy the content of `themes/cactus/languages/default.yml` and paste it it into the `ja.yml` file
4. Replace all English strings by their Japanese translation

**Note: Cactus Dark does not support multi-language sites.**
**Note: Cactus does not support multi-language sites.**


### RSS

Set the `rss` field in the theme's `_config.yml` to one of the following values:
Set the `rss` field in the `_config.yml` to one of the following values:

1. `rss: false` will totally disable rss (default).
2. `rss: atom.xml` sets a specific feed link.
3. `rss:`leave empty to use the [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed) plugin.


### Analytics

Add you Google Analytics `tracking_id` to the theme's `_config.yml`.
Add you Google Analytics `tracking_id` to the `_config.yml`.

```yml
gooogle_analytics:
enable: true
id: 'UA-49627206-1'
```
plugins:
gooogle_analytics: 'UA-49627206-1' # Format: UA-xxxxxx-xx
```


### Comments

First, create a site on Disqus: [https://disqus.com/admin/create/](http://disqus.com/admin/create/).

Next, update the theme's `_config.yml` file:
Next, update the `_config.yml` file:

```
plugins:
disqus_shortname: SITENAME
```yml
disqus:
enable: true
shortname: SITENAME
```

where `SITENAME` is the name you gave your site on Disqus.


### Code Highlighting

Pick one of [the available colorschemes](https://github.com/probberechts/cactus-dark/tree/master/source/css/_highlight) and add it to the theme's `_config.yml`:
Pick one of [the available colorschemes](https://github.com/probberechts/hexo-theme-cactus/tree/master/source/css/_highlight) and add it to the `_config.yml`:

```yml
highlight: COLORSCHEME_NAME
```
customize:
highlight: COLORSCHEME_NAME
```


### Local search

First, install the [hexo-generate-search](https://www.npmjs.com/package/hexo-generator-search) plugin, which will generate a search index file.
First, install the [hexo-generate-search](https://www.npmjs.com/package/hexo-generator-search)
plugin, which will generate a search index file.

```git
$ npm install hexo-generator-search --save
@@ -190,14 +242,15 @@ $ hexo new page Search
```
and put `search: true` in the front-matter.

Finally, edit the theme's `_config.yml` and add a link to the navigation menu.
Finally, edit the `_config.yml` and add a link to the navigation menu.

```
```yml
nav:
...
Search: /Search/
search: /Search/
...
```


## License
MIT

+ 115
- 42
_config.yml View File

@@ -1,52 +1,125 @@
##############################################################################
# Content
##############################################################################

# Link to a page that gives an overview of all your projects.
# This can be an external link (e.g., to you GitHub profile) or to another
# page within your website.
projects_url: http://github.com/probberechts

# Configure the navigation menu.
# A pair 'Key: url' will result in a link to 'url' with the name 'Key' in the
# navigation menu. Optionally, you can add translations for the 'Key' in
# languages/*.yml
nav:
home: /
about: /about/
articles: /archives/
projects: http://github.com/probberechts
projects: projects_url

projects_url: http://github.com/probberechts

customize:
gravatar:
email:
logo:
enabled: true
width: 50
height: 50
url: /images/logo.png
gravatar: false
favicon:
# eg. generate with http://realfavicongenerator.net/
desktop:
url: /images/favicon.ico
gravatar: false
android:
url: /images/favicon-192x192.png
gravator: false
apple:
url: /images/apple-touch-icon.png
gravator: false
social_links:
github: http://github.com/probberechts/cactus-dark
twitter: /
facebook: /
linkedin: /
show_all_posts: false
post_count: 5
highlight: rainbow

# RSS
# Links to your social media accounts.
# The keys should correspond to Fontawesome icon names
# (see https://fontawesome.com/icons?d=gallery&s=brands);
# only 'mail' is an exception.
social_links:
github: http://github.com/probberechts/cactus-dark
twitter: /
facebook: /
linkedin: /
mail: mailto:name@email.com


# Customize the overview with the most recent blog posts on the index page.
# Options:
# - show_all_posts: whether to show all available posts.
# - post_count: whether to show only the x most recent posts.
posts_overview:
show_all_posts: false
post_count: 5


##############################################################################
# Look and Feel
##############################################################################

# Customize the logo (i.e., the cactus) in the header.
# Options:
# - enabled: whether to show (true) or hide (false) the logo.
# - width: width of the logo in pixel units
# - height: height of the logo in pixel units
# - url: where the logo can be found
# - gravatar: whether to use your Gravatar as the logo
logo:
enabled: true
width: 50
height: 50
url: /images/logo.png
gravatar: false

# Customize the favicons.
# Cactus supports a limited set of the three most important icons:
# - desktop: The classic favion.ico file.
# - android: A 192x192 PNG file.
# - apple: A 180x180 PNG file.
# These can be generated with http://realfavicongenerator.net/
# Options:
# - url: where the icon can be found
# - gravatar: whether to create a favicon from your Gravatar
favicon:
desktop:
url: /images/favicon.ico
gravatar: false
android:
url: /images/favicon-192x192.png
gravatar: false
apple:
url: /images/apple-touch-icon.png
gravatar: false

# The color scheme that should be used to highlight codeblocks.
# See source/css/_highlight for a list of all available color schemes.
highlight: rainbow

# Set the color scheme.
# Available color schemes are 'dark', 'light', 'classic' and 'white'.
# Alternatively, add your own custom color scheme to source/css/_colors.
colorscheme: dark

# Maximal width of the page in rem units.
page_width: 48


##############################################################################
# Miscellaneous
##############################################################################

# Enable or disable the RSS feed.
rss: false

# Turn your web pages into graph objects (see http://ogp.me).
open_graph:
fb_app_id:
fb_admins:
twitter_id:
google_plus:


##############################################################################
# Plugins
plugins:
disqus_shortname: # Disqus Comments Shortname
google_analytics: UA-86660611-1 # enter the tracking ID for your Google Analytics
##############################################################################

# Miscellaneous
miscellaneous:
open_graph: # see http://ogp.me
fb_app_id:
fb_admins:
twitter_id:
google_plus:
# Fill in your Disqus Comments Shortname to enable Disqus comments.
disqus:
enabled: false
shortname: cactus-1

# Fill in your Google Analytics tracking ID to enable Google Analytics.
google_analytics:
enabled: false
id: UA-86660611-1

# Fill in you Gravatar user id / email if you want to use your gravatar as the
# logo and/or favicons of you website.
gravatar:
email: name@email.com

+ 106
- 0
gulpfile.js View File

@@ -0,0 +1,106 @@
var decompress = require('gulp-decompress');
var del = require('del');
var download = require("gulp-download");
var fs = require('fs');
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var path = require('path');
var stylint = require('gulp-stylint');
var stylish = require('jshint-stylish');
var yaml = require('js-yaml');


gulp.task('lib:clean',function(){
return del.sync([ './source/lib/*' ]);
})

gulp.task('lib:fontAwesome',function(){
return gulp.src([
'node_modules/fontawesome5-webfont/webfonts/*',
'node_modules/fontawesome5-webfont/css/fontawesome-all.min.css'
], {base: 'node_modules/fontawesome5-webfont'})
.pipe(gulp.dest('./source/lib/font-awesome'))
})

gulp.task('lib:mesloFont', function () {
return download('https://github.com/andreberg/Meslo-Font/blob/master/dist/v1.2/Meslo%20LG%20v1.2.zip?raw=true')
.pipe(decompress({
filter: file => path.extname(file.path) == '.ttf',
strip: 1
}))
.pipe(gulp.dest('./source/lib/meslo-LG'));
});

gulp.task('lib:justifiedGallery',function(){
return gulp.src([
'node_modules/justifiedGallery/dist/css/*.min.css',
'node_modules/justifiedGallery/dist/js/*.min.js'
], {base: 'node_modules/justifiedGallery/dist'})
.pipe(gulp.dest('./source/lib/justified-gallery'))
})

gulp.task('lib:jQuery',function(){
return gulp.src(['node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('./source/lib/jquery'))
})

gulp.task('lint:js', function() {
return gulp.src([
'./source/js/**/*.js',
]).pipe(jshint())
.pipe(jshint.reporter(stylish));
});

gulp.task('lint:stylus', function () {
return gulp.src([
'./source/css/*.styl',
'./source/css/_partial/*.styl',
'./source/css/_colors/*.styl'
]).pipe(stylint({
config: '.stylintrc',
reporter: {
reporter: 'stylint-stylish',
reporterOptions: {
verbose: true
}
}
}))
.pipe(stylint.reporter());
});

gulp.task('validate:config', function(cb) {
var themeConfig = fs.readFileSync(path.join(__dirname, '_config.yml'));

try {
yaml.safeLoad(themeConfig);
cb();
} catch(error) {
cb(new Error(error));
}
});

gulp.task('validate:languages', function(cb) {
var languagesPath = path.join(__dirname, 'languages');
var languages = fs.readdirSync(languagesPath);
var errors = [];
for (var i in languages) {
var languagePath = path.join(languagesPath, languages[i]);
try {
yaml.safeLoad(fs.readFileSync(languagePath), {
filename: path.relative(__dirname, languagePath)
});
} catch(error) {
errors.push(error);
}
}
if (errors.length == 0) {
cb();
} else {
cb(errors);
}
});

gulp.task('lib', ['lib:clean', 'lib:jQuery', 'lib:fontAwesome', 'lib:mesloFont', 'lib:justifiedGallery']);
gulp.task('lint', ['lint:js', 'lint:stylus']);
gulp.task('validate', ['validate:config', 'validate:languages']);
gulp.task('default', [ 'lint', 'validate' ]);

+ 1
- 1
layout/_partial/comments.ejs View File

@@ -1,4 +1,4 @@
<% if(page.comments && theme.plugins.disqus_shortname){ %>
<% if(page.comments && theme.disqus.enabled){ %>
<div class="blog-post-comments">
<div id="disqus_thread">
<noscript><%= __('comments.no_js') %></noscript>

+ 1
- 1
layout/_partial/footer.ejs View File

@@ -6,7 +6,7 @@
<nav>
<ul>
<% for (var i in theme.nav) { %>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i) %></a></li>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li>
<% } %>
</ul>
</nav>

+ 17
- 17
layout/_partial/head.ejs View File

@@ -6,32 +6,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<%- open_graph({
image: thumbnail(page),
fb_app_id: theme.miscellaneous.open_graph.fb_app_id,
fb_admins: theme.miscellaneous.open_graph.fb_admins,
twitter_id: theme.miscellaneous.open_graph.twitter_id,
google_plus: theme.miscellaneous.open_graph.google_plus,
fb_app_id: theme.open_graph.fb_app_id,
fb_admins: theme.open_graph.fb_admins,
twitter_id: theme.open_graph.twitter_id,
google_plus: theme.open_graph.google_plus,
}) %>
<%- meta(page) %>
<% if (theme.customize.favicon) { %>
<% if (theme.customize.favicon.desktop) { %>
<% if (theme.customize.gravatar.email && theme.customize.favicon.desktop.gravatar) { %>
<link rel="shortcut icon" href="<%= gravatar(theme.customize.gravatar.email, 16) %>">
<% if (theme.favicon) { %>
<% if (theme.favicon.desktop) { %>
<% if (theme.gravatar.email && theme.favicon.desktop.gravatar) { %>
<link rel="shortcut icon" href="<%= gravatar(theme.gravatar.email, 16) %>">
<% } else { %>
<link rel="shortcut icon" href="<%= url_for(theme.customize.favicon.desktop.url) %>">
<link rel="shortcut icon" href="<%= url_for(theme.favicon.desktop.url) %>">
<% } %>
<% } %>
<% if (theme.customize.favicon.android) { %>
<% if (theme.customize.gravatar.email && theme.customize.favicon.android.gravatar) { %>
<link rel="icon" type="image/png" href="<%= gravatar(theme.customize.gravatar.email, 192) %>" sizes="192x192">
<% if (theme.favicon.android) { %>
<% if (theme.gravatar.email && theme.favicon.android.gravatar) { %>
<link rel="icon" type="image/png" href="<%= gravatar(theme.gravatar.email, 192) %>" sizes="192x192">
<% } else { %>
<link rel="icon" type="image/png" href="<%= url_for(theme.customize.favicon.android.url) %>" sizes="192x192">
<link rel="icon" type="image/png" href="<%= url_for(theme.favicon.android.url) %>" sizes="192x192">
<% } %>
<% } %>
<% if (theme.customize.favicon.apple) { %>
<% if (theme.customize.gravatar.email && theme.customize.favicon.apple.gravatar) { %>
<link rel="apple-touch-icon" sizes="180x180" href="<%= gravatar(theme.customize.gravatar.email, 180) %>">
<% if (theme.favicon.apple) { %>
<% if (theme.gravatar.email && theme.favicon.apple.gravatar) { %>
<link rel="apple-touch-icon" sizes="180x180" href="<%= gravatar(theme.gravatar.email, 180) %>">
<% } else { %>
<link rel="apple-touch-icon" sizes="180x180" href="<%= url_for(theme.customize.favicon.apple.url) %>">
<link rel="apple-touch-icon" sizes="180x180" href="<%= url_for(theme.favicon.apple.url) %>">
<% } %>
<% } %>
<% } %>

+ 6
- 6
layout/_partial/header.ejs View File

@@ -1,10 +1,10 @@
<header id="header">
<a href="<%- url_for("/") %>">
<% if (theme.customize.logo && theme.customize.logo.enabled) { %>
<% if (theme.customize.gravatar.email && theme.customize.logo.gravatar) { %>
<div id="logo" style="background-image: url(<%- gravatar(theme.customize.gravatar.email) %>);"></div>
<% if (theme.logo && theme.logo.enabled) { %>
<% if (theme.gravatar.email && theme.logo.gravatar) { %>
<div id="logo" style="background-image: url(<%- gravatar(theme.gravatar.email) %>);"></div>
<% } else { %>
<div id="logo" style="background-image: url(<%- url_for(theme.customize.logo.url) %>);"></div>
<div id="logo" style="background-image: url(<%- url_for(theme.logo.url) %>);"></div>
<% } %>
<% } %>
<div id="title">
@@ -14,10 +14,10 @@
<div id="nav">
<ul>
<li class="icon">
<a href="#"><i class="fa fa-bars fa-2x"></i></a>
<a href="#"><i class="fas fa-bars fa-2x"></i></a>
</li>
<% for (var i in theme.nav) { %>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i) %></a></li>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li>
<% } %>
</ul>
</div>

+ 2
- 2
layout/_partial/pagination.ejs View File

@@ -1,11 +1,11 @@
<% if (page.total > 1) { %>
<div class="pagination">
<% if (page.prev) { %>
<a href="<%- url_for(page.prev_link) %>"><i class="fa fa-angle-left"></i></a>
<a href="<%- url_for(page.prev_link) %>"><i class="fas fa-angle-left"></i></a>
<% } %>
<span class="page-number"><%= __('pagination.page', page.current, page.total) %></span>
<% if (page.next) { %>
<a href="<%- url_for(page.next_link) %>"><i class="fa fa-angle-right"></i>
<a href="<%- url_for(page.next_link) %>"><i class="fas fa-angle-right"></i>
</a>
<% } %>
</div>

+ 8
- 8
layout/_partial/post/actions_desktop.ejs View File

@@ -1,12 +1,12 @@
<div id="header-post">
<a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
<a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
<a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
<a id="menu-icon" href="#"><i class="fas fa-bars fa-lg"></i></a>
<a id="menu-icon-tablet" href="#"><i class="fas fa-bars fa-lg"></i></a>
<a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
<span id="menu">
<span id="nav">
<ul>
<% for (var i in theme.nav) { %>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i) %></a></li>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li>
<% } %>
</ul>
</span>
@@ -14,13 +14,13 @@
<span id="actions">
<ul>
<% if (page.prev) { %>
<li><a class="icon" href="<%- url_for(page.prev.path) %>"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
<li><a class="icon" href="<%- url_for(page.prev.path) %>"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
<% } %>
<% if (page.next) { %>
<li><a class="icon" href="<%- url_for(page.next.path) %>"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
<li><a class="icon" href="<%- url_for(page.next.path) %>"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
<% } %>
<li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
<li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
<li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
<li><a class="icon" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
</ul>
<span id="i-prev" class="info" style="display:none;"><%= __('post.desktop.previous') %></span>
<span id="i-next" class="info" style="display:none;"><%= __('post.desktop.next') %></span>

+ 5
- 7
layout/_partial/post/actions_mobile.ejs View File

@@ -4,7 +4,7 @@
<div id="nav-footer" style="display: none">
<ul>
<% for (var i in theme.nav) { %>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i) %></a></li>
<li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li>
<% } %>
</ul>
</div>
@@ -18,12 +18,10 @@
</div>

<div id="actions-footer">
<ul>
<li id="toc"><a class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fa fa-list fa-lg" aria-hidden="true"></i> <%= __('post.mobile.toc') %></a></li>
<li id="share"><a class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> <%= __('post.mobile.share') %></a></li>
<li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> <%= __('post.mobile.back_to_top') %></a></li>
<li id="menu"><a class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> <%= __('post.mobile.menu') %></a></li>
</ul>
<a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> <%= __('post.mobile.menu') %></a>
<a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> <%= __('post.mobile.toc') %></a>
<a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> <%= __('post.mobile.share') %></a>
<a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> <%= __('post.mobile.back_to_top') %></a>
</div>

</div>

+ 10
- 10
layout/_partial/post/share.ejs View File

@@ -1,12 +1,12 @@
<ul>
<li><a class="icon" href="http://www.facebook.com/sharer.php?u=<%= page.permalink %>"><i class="fa fa-facebook <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://twitter.com/share?url=<%= page.permalink %>&text=<%= page.title %>"><i class="fa fa-twitter <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.linkedin.com/shareArticle?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fa fa-linkedin <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=<%= page.permalink %>&is_video=false&description=<%= page.title %>"><i class="fa fa-pinterest <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="mailto:?subject=<%= page.title %>&body=Check out this article: <%= page.permalink %>"><i class="fa fa-envelope <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://getpocket.com/save?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fa fa-get-pocket <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://reddit.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fa fa-reddit <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.stumbleupon.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fa fa-stumbleupon <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://digg.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fa fa-digg <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.tumblr.com/share/link?url=<%= page.permalink %>&name=<%= page.title %>&description=<%= page.excerpt %>"><i class="fa fa-tumblr <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.facebook.com/sharer.php?u=<%= page.permalink %>"><i class="fab fa-facebook <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://twitter.com/share?url=<%= page.permalink %>&text=<%= page.title %>"><i class="fab fa-twitter <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.linkedin.com/shareArticle?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fab fa-linkedin <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=<%= page.permalink %>&is_video=false&description=<%= page.title %>"><i class="fab fa-pinterest <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="mailto:?subject=<%= page.title %>&body=Check out this article: <%= page.permalink %>"><i class="fas fa-envelope <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="https://getpocket.com/save?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fab fa-get-pocket <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://reddit.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fab fa-reddit <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.stumbleupon.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fab fa-stumbleupon <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://digg.com/submit?url=<%= page.permalink %>&title=<%= page.title %>"><i class="fab fa-digg <%= icon_class_name %>" aria-hidden="true"></i></a></li>
<li><a class="icon" href="http://www.tumblr.com/share/link?url=<%= page.permalink %>&name=<%= page.title %>&description=<%= page.excerpt %>"><i class="fab fa-tumblr <%= icon_class_name %>" aria-hidden="true"></i></a></li>
</ul>

+ 1
- 1
layout/_partial/post/tag.ejs View File

@@ -1,6 +1,6 @@
<% if (page.tags && page.tags.length) { %>
<div class="article-tag">
<i class="fa fa-tag"></i>
<i class="fas fa-tag"></i>
<%- list_tags(page.tags, { show_count: false, style: 'link' }) %>
</div>
<% } %>

+ 6
- 6
layout/_partial/scripts.ejs View File

@@ -1,9 +1,9 @@
<!-- jquery -->
<%- js('lib/jquery/jquery.min') %>
<%- js('lib/justified-gallery/jquery.justifiedGallery.min.js') %>
<%- js('lib/justified-gallery/js/jquery.justifiedGallery.min.js') %>
<%- js('js/main') %>
<!-- search -->
<% if (page.search){ %>
<% if (config.search && page.search){ %>
<%- js('js/search.js') %>
<script type="text/javascript">
var inputArea = document.querySelector("#search-input");
@@ -34,20 +34,20 @@
</script>
<% } %>
<!-- Google Analytics -->
<% if (theme.plugins.google_analytics){ %>
<% if (theme.google_analytics.enabled && theme.google_analytics.id){ %>
<script type="text/javascript">
(function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.plugins.google_analytics %>', 'auto');
ga('create', '<%= theme.google_analytics.id %>', 'auto');
ga('send', 'pageview');
</script>
<% } %>
<!-- Disqus Comments -->
<% if (theme.plugins.disqus_shortname){ %>
<% if (theme.disqus.enabled && theme.disqus.shortname){ %>
<script type="text/javascript">
var disqus_shortname = '<%= theme.plugins.disqus_shortname %>';
var disqus_shortname = '<%= theme.disqus.shortname %>';

(function(){
var dsq = document.createElement('script');

+ 2
- 3
layout/_partial/styles.ejs View File

@@ -1,4 +1,3 @@
<!-- styles -->
<%- css('lib/font-awesome/css/font-awesome.min') %>
<%- css('lib/meslo-LG/styles') %>
<%- css('lib/justified-gallery/justifiedGallery.min.css') %>
<%- css('lib/font-awesome/css/fontawesome-all.min') %>
<%- css('lib/justified-gallery/css/justifiedGallery.min.css') %>

+ 25
- 15
layout/index.ejs View File

@@ -2,28 +2,38 @@
<% if (config.description) { %>
<%- markdown(config.description) %>
<% } %>
<p style="display: inline">
<% if (theme.customize.social_links) { %>
<% if (theme.social_links) { %>
<p>
<%= __('index.find_me_on') %>
<p id="socialinfo">
<% var nb_links = Object.keys(theme.customize.social_links).length %>
<% var i = 0 %>
<% for(var link in theme.customize.social_links) { %>
<a class="icon" target="_blank" href="<%- url_for(theme.customize.social_links[link]) %>"><i class="fa fa-<%= link %>"></i></a><%= ( nb_links > 0 && i < nb_links-1 ? ( i == nb_links-2 ? ' '+__('index.enum_and')+' ' : __('index.enum_comma')+' ' ) : '' ) %>
<% i+=1 %>
<% } %>
</p>.
<% } %>
</p>
<% var nb_links = Object.keys(theme.social_links).length %>
<% var i = 0 %>
<% for(var link in theme.social_links) { %>
<% if (link == 'mail') { %>
<a class="icon" target="_blank" href="<%- url_for(theme.social_links[link]) %>">
<i class="fas fa-envelope"></i><!--
---></a><!--
---><% } else { %>
<a class="icon" target="_blank" href="<%- url_for(theme.social_links[link]) %>">
<i class="fab fa-<%= link %>"></i><!--
---></a><!--
---><% } %><!--
---><%= ( nb_links > 0 && i < nb_links-1 ?
( i == nb_links-2 ? ' '+__('index.enum_and')+' '
: __('index.enum_comma')+' ' )
: '.' ) %>
<% i+=1 %>
<% } %>
</p>
<% } %>
</section>

<section id="writing">
<span class="h1"><a href="<%- url_for("archives") %>"><%= __('index.articles') %></a></span>
<ul class="post-list">
<% if (theme.customize.show_all_posts) { %>
<% if (theme.posts_overview.show_all_posts) { %>
<% var show_posts = page.posts.sort('date', 'desc') %>
<% } else { %>
<% var show_posts = site.posts.sort('date', 'desc').limit(theme.customize.post_count || 5) %>
<% var show_posts = site.posts.sort('date', 'desc').limit(theme.posts_overview.post_count || 5) %>
<% } %>
<% show_posts.each(function(post, i){ %>
<li class="post-item">
@@ -32,7 +42,7 @@
</li>
<% }); %>
</ul>
<% if (theme.customize.show_all_posts) { %>
<% if (theme.show_all_posts) { %>
<%- partial('_partial/pagination') %>
<% } %>
</section>

+ 2
- 2
layout/layout.ejs View File

@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html<%= config.language ? " lang=" + config.language.substring(0, 2) : ""%>>
<%- partial('_partial/head') %>
<body>
<body class="max-width mx-auto px3">
<% if (is_post()) { %>
<%- partial('_partial/post/actions_desktop') %>
<% } %>
<div class="content index width mx-auto px2 my4">
<div class="content index my4">
<% if (!is_post()) { %>
<%- partial('_partial/header') %>
<% } %>

+ 45
- 0
package.json View File

@@ -0,0 +1,45 @@
{
"name": "hexo-theme-cactus",
"version": "3.0.0",
"description": "A responsive, clean and simple theme for Hexo.",
"main": "index.js",
"scripts": {
"lint": "gulp lint --silent",
"test": "gulp validate --silent",
"clean": "stylus-supremacy format source/css/**/*.styl --options .stylintrc -r"
},
"repository": {
"type": "git",
"url": "git+https://github.com/probberechts/cactus-dark.git"
},
"keywords": [
"Hexo",
"Theme",
"Cactus"
],
"author": "Pieter Robberechts",
"license": "MIT",
"bugs": {
"url": "https://github.com/probberechts/cactus-dark/issues"
},
"homepage": "https://github.com/probberechts/cactus-dark#readme",
"devDependencies": {
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-decompress": "^2.0.2",
"gulp-download": "0.0.1",
"gulp-jshint": "^2.1.0",
"gulp-stylint": "^4.0.1",
"js-yaml": "^3.10.0",
"jshint": "^2.9.5",
"jshint-stylish": "^2.2.1",
"stylint": "^1.5.9",
"stylint-stylish": "^1.4.1",
"stylus-supremacy": "^2.9.0"
},
"dependencies": {
"fontawesome5-webfont": "^5.0.4",
"jquery": "^3.3.1",
"justifiedGallery": "^3.6.5"
}
}

+ 8
- 0
scripts/merge-configs.js View File

@@ -0,0 +1,8 @@
/**
* Merge all `theme_config.*` options from main Hexo config into hexo.theme.config.
* This fixes an issue with hexo-renderer-stylus, which otherwise ignores these
* configuration overrides.
*/
hexo.on('generateBefore', function () {
hexo.theme.config = Object.assign({}, hexo.theme.config, hexo.config.theme_config);
});

+ 13
- 0
source/css/_colors/classic.styl View File

@@ -0,0 +1,13 @@
$color-background = #fafafa
$color-footer-mobile-1 = darken($color-background, 2%)
$color-footer-mobile-2 = darken($color-background, 10%)
$color-background-code = darken($color-background, 2%)
$color-border = #666
$color-meta = #666
$color-meta-code = lighten($color-meta, 10%)
$color-link = rgba(86, 124, 119, .4)
$color-text = #22272a
$color-accent-1 = #cc2a41
$color-accent-2 = rgba(86, 124, 119, .8)
$color-accent-3 = #666
$color-quote = #cc2a41

+ 13
- 0
source/css/_colors/dark.styl View File

@@ -0,0 +1,13 @@
$color-background = #1d1f21
$color-footer-mobile-1 = lighten($color-background, 2%)
$color-footer-mobile-2 = lighten($color-background, 10%)
$color-background-code = lighten($color-background, 2%)
$color-border = #666
$color-meta = #666
$color-meta-code = #666
$color-link = rgba(212, 128, 170, 1)
$color-text = #c9cacc
$color-accent-3 = #cccccc
$color-accent-2 = #eeeeee
$color-accent-1 = #2bbc8a
$color-quote = #ccffb6

+ 14
- 0
source/css/_colors/light.styl View File

@@ -0,0 +1,14 @@
// by @GabiThume (https://github.com/gabithume)
$color-background = #e2e0de
$color-footer-mobile-1 = darken($color-background, 2%)
$color-footer-mobile-2 = darken($color-background, 10%)
$color-background-code = darken($color-background, 2%)
$color-border = #666
$color-meta = #666
$color-meta-code = lighten($color-meta, 10%)
$color-link = rgba(43, 188, 138, 1)
$color-text = #363533
$color-accent-3 = #666666
$color-accent-2 = #111111
$color-accent-1 = #d44375
$color-quote = #ab2251

+ 14
- 0
source/css/_colors/white.styl View File

@@ -0,0 +1,14 @@
// by @sergodeeva (https://github.com/sergodeeva)
$color-background = #FFFFFF
$color-footer-mobile-1 = darken($color-background, 2%)
$color-footer-mobile-2 = darken($color-background, 10%)
$color-background-code = darken($color-background, 2%)
$color-border = #666
$color-meta = #666
$color-meta-code = lighten($color-meta, 10%)
$color-link = rgba(212, 128, 170, 1)
$color-text = #383838
$color-accent-3 = #8c8c8c
$color-accent-2 = #383838
$color-accent-1 = #2bbc8a
$color-quote = #2bbc8a

+ 97
- 84
source/css/_extend.styl View File

@@ -1,86 +1,99 @@
$base-style
h1,
.h1
letter-spacing: 0.01em
font-size: 1.5em
font-style: normal
font-weight: 700
color: $color-accent
margin-top: 3rem
margin-bottom: 1rem
display: block
antialias()
h2,
.h2
position: relative
font-size: 1rem
font-weight: bold
text-transform: none
letter-spacing: normal
margin-top: 2rem
margin-bottom: 0.5rem
color: $color-lightest
display: block
h3
font-size: 0.9rem
font-weight: bold
text-decoration: underline;
color: $color-lightest
h4,
h5,
h6
font-size: 0.9rem
font-weight: normal
color: $color-light
border-bottom: 1px dashed $color-light
display: inline
text-decoration: none
h3,
h4,
h5,
h6
margin-top: 0.9rem
margin-bottom: 0.5rem
hr
border: 1px dashed $color-light
strong
font-weight: bold
em, cite
font-style: italic
sup, sub
font-size: 0.75em
line-height: 0
position: relative
vertical-align: baseline
sup
top: -0.5em
sub
bottom: -0.2em
small
font-size: 0.85em
acronym, abbr
border-bottom: 1px dotted
ul, ol, dl
line-height: $line-height
h1, .h1
display: block
margin-top: 3rem
margin-bottom: 1rem
color: $color-accent-1
letter-spacing: .01em
font-weight: 700
font-style: normal
font-size: 1.5em

antialias()

h2, .h2
position: relative
display: block
margin-top: 2rem
margin-bottom: .5rem
color: $color-accent-2
text-transform: none
letter-spacing: normal
font-weight: bold
font-size: 1rem

h3
color: $color-accent-2
text-decoration: underline
font-weight: bold
font-size: .9rem

h4, h5, h6
display: inline
border-bottom: 1px dashed $color-accent-3
color: $color-accent-3
text-decoration: none
font-weight: normal
font-size: .9rem

h3, h4, h5, h6
margin-top: .9rem
margin-bottom: .5rem

hr
border: 1px dashed $color-accent-3

strong
font-weight: bold

em, cite
font-style: italic

sup, sub
position: relative
vertical-align: baseline
font-size: .75em
line-height: 0

sup
top: -.5em

sub
bottom: -.2em

small
font-size: .85em

acronym, abbr
border-bottom: 1px dotted

ul, ol, dl
line-height: $line-height

ul, ol
ul, ol
ul, ol
margin-top: 0
margin-bottom: 0
ol
list-style: decimal
dt
font-weight: bold
table
width: 100%
font-size: $font-size - 2px
border-collapse: collapse
text-align: left
th
font-size: $font-size - 1px
font-weight: bold
color: $color-lightest
border-bottom: 1px dashed #ccc
padding: 8px 8px
td
border-bottom: none
padding: 9px 8px 0px 8px
margin-top: 0
margin-bottom: 0

ol
list-style: decimal

dt
font-weight: bold

table
width: 100%
border-collapse: collapse
text-align: left
font-size: $font-size - 2px

th
padding: 8px
border-bottom: 1px dashed $color-code-border
color: $color-accent-2
font-weight: bold
font-size: $font-size - 1px

td
padding: 9px 8px 0
border-bottom: none

+ 4
- 0
source/css/_fonts.styl View File

@@ -0,0 +1,4 @@
@font-face
font-style: normal
font-family: "Meslo LG"
src: local("Meslo LG S"), url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")

+ 40
- 60
source/css/_highlight/agate.styl View File

@@ -1,7 +1,7 @@
/*!
/*
* Agate by Taufik Nurrohman <https://github.com/tovic>
* ----------------------------------------------------
*
*
* #ade5fc
* #a2fca2
* #c6b4f0
@@ -13,77 +13,57 @@
* #333
* #62c8f3
* #888
*
*
*/

.highlight
color: white
background: #333
.code
.name,
.strong
font-weight: bold
background: #333
color: white
.code
.name, .strong
font-weight: bold

.code,
.emphasis
font-style: italic
.code, .emphasis
font-style: italic

.tag
color: #62c8f3
.tag
color: #62c8f3

.variable,
.template-variable,
.selector-id,
.selector-class
color: #ade5fc
.variable, .template-variable, .selector-id, .selector-class
color: #ade5fc

.string,
.bullet
color: #a2fca2
.string, .bullet
color: #a2fca2

.type,
.title,
.section,
.attribute,
.quote,
.built_in,
.builtin-name
color: #ffa
.type, .title, .section, .attribute, .quote, .built_in, .builtin-name
color: #ffa

.number,
.symbol,
.bullet
color: #d36363
.number, .symbol, .bullet
color: #d36363

.keyword,
.selector-tag,
.literal
color: #fcc28c
.keyword, .selector-tag, .literal
color: #fcc28c

.comment,
.deletion,
.code
color: #888
.comment, .deletion, .code
color: #888

.regexp,
.link
color: #c6b4f0
.regexp, .link
color: #c6b4f0

.meta
color: #fc9b9b
.meta
color: #fc9b9b

.deletion
background-color: #fc9b9b
color: #333
.deletion
background-color: #fc9b9b
color: #333

.addition
background-color: #a2fca2
color: #333
.addition
background-color: #a2fca2
color: #333

.highlight a
color: inherit
.highlight a
color: inherit

.highlight a:focus,
.highlight a:hover
color: inherit
text-decoration: underline
.highlight a:focus, .highlight a:hover
color: inherit
text-decoration: underline

+ 35
- 49
source/css/_highlight/androidstudio.styl View File

@@ -1,52 +1,38 @@
/*
Date: 24 Fev 2015
Author: Pedro Oliveira <kanytu@gmail . com>
Date: 24 Fev 2015
Author: Pedro Oliveira <kanytu@gmail . com>
*/

.highlight
color: #a9b7c6
background: #282b2e
.code
.number,
.literal,
.symbol,
.bullet
color: #6897BB

.keyword,
.selector-tag,
.deletion
color: #cc7832

.variable,
.template-variable,
.link
color: #629755

.comment,
.quote
color: #808080

.meta
color: #bbb529

.string,
.attribute,
.addition
color: #6A8759

.section,
.title,
.type
color: #ffc66d

.name,
.selector-id,
.selector-class
color: #e8bf6a

.emphasis
font-style: italic

.strong
font-weight: bold
background: #282b2e
color: #a9b7c6

.code
.number, .literal, .symbol, .bullet
color: #6897BB

.keyword, .selector-tag, .deletion
color: #cc7832

.variable, .template-variable, .link
color: #629755

.comment, .quote
color: #808080

.meta
color: #bbb529

.string, .attribute, .addition
color: #6A8759

.section, .title, .type
color: #ffc66d

.name, .selector-id, .selector-class
color: #e8bf6a

.emphasis
font-style: italic

.strong
font-weight: bold

+ 35
- 56
source/css/_highlight/arta.styl View File

@@ -1,59 +1,38 @@
/*
Date: 17.V.2011
Author: pumbur <pumbur@pumbur.net>
Date: 17.V.2011
Author: pumbur <pumbur@pumbur.net>
*/

.highlight
color: #aaa
background: #222
.code
.subst
color: #aaa

.section
color: #fff

.comment,
.quote,
.meta
color: #444

.string,
.symbol,
.bullet,
.regexp
color: #ffcc33

.number,
.addition
color: #00cc66

.built_in,
.builtin-name,
.literal,
.type,
.template-variable,
.attribute,
.link
color: #32aaee

.keyword,
.selector-tag,
.name,
.selector-id,
.selector-class
color: #6644aa

.title,
.variable,
.deletion,
.template-tag
color: #bb1166

.section,
.doctag,
.strong
font-weight: bold

.emphasis
font-style: italic
background: #222
color: #aaa

.code
.subst
color: #aaa

.section
color: #fff

.comment, .quote, .meta
color: #444

.string, .symbol, .bullet, .regexp
color: #ffcc33

.number, .addition
color: #00cc66

.built_in, .builtin-name, .literal, .type, .template-variable, .attribute, .link
color: #32aaee

.keyword, .selector-tag, .name, .selector-id, .selector-class
color: #6644aa

.title, .variable, .deletion, .template-tag
color: #bb1166

.section, .doctag, .strong
font-weight: bold

.emphasis
font-style: italic

+ 34
- 54
source/css/_highlight/atelier-cave-dark.styl View File

@@ -1,68 +1,48 @@
/* Base16 Atelier Cave Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

.highlight
color: #8b8792
background: #19171c
.code
/* Atelier-Cave Comment */
.comment,
.quote
color: #7e7887
background: #19171c
color: #8b8792
.code
/* Atelier-Cave Comment */
.comment, .quote
color: #7e7887

/* Atelier-Cave Red */
.variable,
.template-variable,
.attribute,
.regexp,
.link,
.tag,
.name,
.selector-id,
.selector-class
color: #be4678
/* Atelier-Cave Red */
.variable, .template-variable, .attribute, .regexp, .link, .tag, .name, .selector-id, .selector-class
color: #be4678

/* Atelier-Cave Orange */
.number,
.meta,
.built_in,
.builtin-name,
.literal,
.type,
.params
color: #aa573c
/* Atelier-Cave Orange */
.number, .meta, .built_in, .builtin-name, .literal, .type, .params
color: #aa573c

/* Atelier-Cave Green */
.string,
.symbol,
.bullet
color: #2a9292
/* Atelier-Cave Green */
.string, .symbol, .bullet
color: #2a9292

/* Atelier-Cave Blue */
.title,
.section
color: #576ddb
/* Atelier-Cave Blue */
.title, .section
color: #576ddb

/* Atelier-Cave Purple */
.keyword,
.selector-tag
color: #955ae7
/* Atelier-Cave Purple */
.keyword, .selector-tag
color: #955ae7

.deletion,
.addition
color: #19171c
display: inline-block
width: 100%
.deletion, .addition
display: inline-block
width: 100%
color: #19171c

.deletion
background-color: #be4678
.deletion
background-color: #be4678

.addition
background-color: #2a9292
.addition
background-color: #2a9292

.emphasis
font-style: italic
.emphasis
font-style: italic

.strong
font-weight: bold
.strong
font-weight: bold

+ 33
- 53
source/css/_highlight/atelier-dune-dark.styl View File

@@ -1,57 +1,37 @@
/* Base16 Atelier Dune Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

.highlight
color: #a6a28c
background: #20201d
.code
/* Atelier-Dune Comment */
.comment,
.quote
color: #999580

/* Atelier-Dune Red */
.variable,
.template-variable,
.attribute,
.tag,
.name,
.regexp,
.link,
.name,
.selector-id,
.selector-class
color: #d73737

/* Atelier-Dune Orange */
.number,
.meta,
.built_in,
.builtin-name,
.literal,
.type,
.params
color: #b65611

/* Atelier-Dune Green */
.string,
.symbol,
.bullet
color: #60ac39

/* Atelier-Dune Blue */
.title,
.section
color: #6684e1

/* Atelier-Dune Purple */
.keyword,
.selector-tag
color: #b854d4

.emphasis
font-style: italic

.strong
font-weight: bold
background: #20201d
color: #a6a28c

.code
/* Atelier-Dune Comment */
.comment, .quote
color: #999580

/* Atelier-Dune Red */
.variable, .template-variable, .attribute, .tag, .name, .regexp, .link, .name, .selector-id, .selector-class
color: #d73737

/* Atelier-Dune Orange */
.number, .meta, .built_in, .builtin-name, .literal, .type, .params
color: #b65611

/* Atelier-Dune Green */
.string, .symbol, .bullet
color: #60ac39

/* Atelier-Dune Blue */
.title, .section
color: #6684e1

/* Atelier-Dune Purple */
.keyword, .selector-tag
color: #b854d4

.emphasis
font-style: italic

.strong
font-weight: bold

+ 34
- 55
source/css/_highlight/atelier-estuary-dark.styl View File

@@ -1,69 +1,48 @@
/* Base16 Atelier Estuary Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

.highlight
color: #929181
background: #22221b
.code
/* Atelier-Estuary Comment */
.comment,
.quote
color: #878573
background: #22221b
color: #929181
.code
/* Atelier-Estuary Comment */
.comment, .quote
color: #878573

/* Atelier-Estuary Red */
.variable,
.template-variable,
.attribute,
.tag,
.name,
.regexp,
.link,
.name,
.selector-id,
.selector-class
color: #ba6236
/* Atelier-Estuary Red */
.variable, .template-variable, .attribute, .tag, .name, .regexp, .link, .name, .selector-id, .selector-class
color: #ba6236

/* Atelier-Estuary Orange */
.number,
.meta,
.built_in,
.builtin-name,
.literal,
.type,
.params
color: #ae7313
/* Atelier-Estuary Orange */
.number, .meta, .built_in, .builtin-name, .literal, .type, .params
color: #ae7313

/* Atelier-Estuary Green */
.string,
.symbol,
.bullet
color: #7d9726
/* Atelier-Estuary Green */
.string, .symbol, .bullet
color: #7d9726

/* Atelier-Estuary Blue */
.title,
.section
color: #36a166
/* Atelier-Estuary Blue */
.title, .section
color: #36a166

/* Atelier-Estuary Purple */
.keyword,
.selector-tag
color: #5f9182
/* Atelier-Estuary Purple */
.keyword, .selector-tag
color: #5f9182

.deletion,
.addition
color: #22221b
display: inline-block
width: 100%
.deletion, .addition
display: inline-block
width: 100%
color: #22221b

.deletion
background-color: #ba6236
.deletion
background-color: #ba6236

.addition
background-color: #7d9726
.addition
background-color: #7d9726

.emphasis
font-style: italic
.emphasis
font-style: italic

.strong
font-weight: bold
.strong
font-weight: bold

+ 33
- 53
source/css/_highlight/atelier-forest-dark.styl View File

@@ -1,57 +1,37 @@
/* Base16 Atelier Forest Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

.highlight
color: #a8a19f
background: #1b1918
.code
/* Atelier-Forest Comment */
.comment,
.quote
color: #9c9491

/* Atelier-Forest Red */
.variable,
.template-variable,
.attribute,
.tag,
.name,
.regexp,
.link,
.name,
.selector-id,
.selector-class
color: #f22c40

/* Atelier-Forest Orange */
.number,
.meta,
.built_in,
.builtin-name,
.literal,
.type,
.params
color: #df5320

/* Atelier-Forest Green */
.string,
.symbol,
.bullet
color: #7b9726

/* Atelier-Forest Blue */
.title,
.section
color: #407ee7

/* Atelier-Forest Purple */
.keyword,
.selector-tag
color: #6666ea

.emphasis
font-style: italic

.strong
font-weight: bold
background: #1b1918
color: #a8a19f

.code
/* Atelier-Forest Comment */
.comment, .quote
color: #9c9491

/* Atelier-Forest Red */
.variable, .template-variable, .attribute, .tag, .name, .regexp, .link, .name, .selector-id, .selector-class
color: #f22c40

/* Atelier-Forest Orange */
.number, .meta, .built_in, .builtin-name, .literal, .type, .params
color: #df5320

/* Atelier-Forest Green */
.string, .symbol, .bullet
color: #7b9726

/* Atelier-Forest Blue */
.title, .section
color: #407ee7

/* Atelier-Forest Purple */
.keyword, .selector-tag
color: #6666ea

.emphasis
font-style: italic

.strong
font-weight: bold

+ 33
- 53
source/css/_highlight/atelier-heath-dark.styl View File

@@ -1,57 +1,37 @@
/* Base16 Atelier Heath Dark - Theme */
/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */
/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

.highlight
color: #ab9bab
background: #1b181b
.code
/* Atelier-Heath Comment */
.comment,
.quote
color: #9e8f9e

/* Atelier-Heath Red */
.variable,