Skip to content

Commit

Permalink
chg: beautified nearly all files !refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@znegva
znegva committed Sep 1, 2017
1 parent 964ca44 commit 1c88837
Show file tree
Hide file tree
Showing 13 changed files with 542 additions and 547 deletions.
79 changes: 23 additions & 56 deletions README.md
View file
@@ -1,21 +1,22 @@
# Hyde Theme for Bolt CMS

Hyde is a brazen two-column theme that pairs a prominent sidebar with
uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. Both created by [Mark Otto](https://github.com/mdo).
Hyde is a brazen two-column theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. Both created by [Mark Otto](https://github.com/mdo).

This is the [Bolt CMS](http://bolt.cm/) adaption of the theme.

![hyde-for-bolt-01](https://user-images.githubusercontent.com/7450884/28960604-a62ac4ea-78ff-11e7-830f-5eff2b994056.png)


## Contents

- [Options](#options)

- [Sidebar menu](#sidebar-menu)
- [Sticky sidebar content](#sticky-sidebar-content)
- [Themes](#themes)
- [Reverse layout](#reverse-layout)

- [Features](#features)

- [Favicon](#favicon)
- [Optional display of teaserimage in main article](#Optional-display-of-teaserimage-in-main-article)
- [Galleries](#galleries)
Expand All @@ -24,40 +25,32 @@ This is the [Bolt CMS](http://bolt.cm/) adaption of the theme.
- [Code highlighting](#code-highlighting)
- [Maintenance Text](#maintenance-text)
- [Copyright notice](#copyright-notice)
- [License](#license)

- [License](#license)

## Options

Hyde for Bolt includes some customizable options, typically
applied via `theme.yml` file.
Hyde for Bolt includes some customizable options, typically applied via `theme.yml` file.

### Sidebar menu

The `main` menu is used for the sidebar, you can adjust it in
the `config://menu.yml` file.
The `main` menu is used for the sidebar, you can adjust it in the `config://menu.yml` file.

You can show a very basic search-box as the last item of the menu,
to enable it set `show_search_in_menu: true` in `theme.yml`.
You can show a very basic search-box as the last item of the menu, to enable it set `show_search_in_menu: true` in `theme.yml`.

You can show a copyright notice for your site at the bottom of the sidebar,
to enable it set `show_copyright_in_sidebar: true` in `theme.yml`.
You can show a copyright notice for your site at the bottom of the sidebar, to enable it set `show_copyright_in_sidebar: true` in `theme.yml`.

### Sticky sidebar content

By default Hyde for Bolt ships with a sidebar that affixes it's content to the
bottom of the sidebar.
You can optionally disable this by setting `sticky_sidebar: false` in `theme.yml`.
By default Hyde for Bolt ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by setting `sticky_sidebar: false` in `theme.yml`.

### Themes

Hyde for Bolt ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16).
Apply a theme to change the color scheme (mostly applies to sidebar and links).
Hyde for Bolt ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).

![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)

To use a theme, uncomment the related line in `theme.yml` to set the
`color_theme` variable to the right value.
To use a theme, uncomment the related line in `theme.yml` to set the `color_theme` variable to the right value.

### Reverse layout

Expand All @@ -67,69 +60,43 @@ Hyde for Bolt's page orientation can be reversed by setting `reverse_layout: tru

### Favicon

Just add a `favicon.png` with at least size of 180px*180px at the top level of your files-folder and it will be used as _favicon_ as well as _apple-touch-icon_, otherwise the themes default favicon ![](images/favicon.png) will be used.
Just add a `favicon.png` with at least size of 180px*180px at the top level of your files-folder and it will be used as _favicon_ as well as _apple-touch-icon_, otherwise the themes [default favicon](images/favicon.png) will be used.

### Optional display of teaserimage in main article

By adding the field `show_image_above_body` with `type: checkbox` to your
contenttype you can regulate if the teaser image will be shown on top of the article/entry.
Normally the teaser image (field `image`) is only used for listings.
By adding the field `show_image_above_body` with `type: checkbox` to your contenttype you can regulate if the teaser image will be shown on top of the article/entry. Normally the teaser image (field `image`) is only used for listings.

### Galleries

Hyde for Bolt supports galleries - to use them just add a field `gallery` with `type: imagelist` to your contenttype.
[ImageLightbox](https://osvaldas.info/image-lightbox-responsive-touch-friendly)
is used as lightbox for the gallery images.
Hyde for Bolt supports galleries - to use them just add a field `gallery` with `type: imagelist` to your contenttype. [ImageLightbox](https://osvaldas.info/image-lightbox-responsive-touch-friendly) is used as lightbox for the gallery images.

Captions for galleries can be shown optionally, to manage this behavior add a field
`show_gallery_captions` with `type: checkbox` to your contenttype.
Captions for galleries can be shown optionally, to manage this behavior add a field `show_gallery_captions` with `type: checkbox` to your contenttype.

### GPX tracks

If you regularly publish gpx tracks with your posts, you can add a field `gpx` with
`type: file` to your contenttype.
You also have to extend `accept_file_types` in `config.yml` to accept `gpx`-files
in order to be able to upload your tracks.
If a nonempty field `gpx` is found in your record a map is drawn right below the
content (and above a gallery, if there is one).
If you regularly publish gpx tracks with your posts, you can add a field `gpx` with `type: file` to your contenttype. You also have to extend `accept_file_types` in `config.yml` to accept `gpx`-files in order to be able to upload your tracks. If a nonempty field `gpx` is found in your record a map is drawn right below the content (and above a gallery, if there is one).

The map is created using [leaflet](http://leafletjs.com/) and
[leaflet-gpx](https://github.com/mpetazzoni/leaflet-gpx) and uses maptiles from
the [Open Street Map Project](https://www.openstreetmap.org), some symbols from
[Font Awesome](http://fontawesome.io/) are used in the footer to indicate distance,
duration and elevations of your track.
The map is created using [leaflet](http://leafletjs.com/) and [leaflet-gpx](https://github.com/mpetazzoni/leaflet-gpx) and uses maptiles from the [Open Street Map Project](https://www.openstreetmap.org), some symbols from [Font Awesome](http://fontawesome.io/) are used in the footer to indicate distance, duration and elevations of your track.

### Optional publishing date and taxonomies

You can define for which ContentTypes the publishing date will be displayed by
adding `show_publishdate: true` to your contenttypes values in `config://contenttypes.yml`.
Typically you don't want to show the publishdate for pages.
You can define for which ContentTypes the publishing date will be displayed by adding `show_publishdate: true` to your contenttypes values in `config://contenttypes.yml`. Typically you don't want to show the publishdate for pages.

Display of taxonomies can be controlled via adding a corresponding value, e.g. `shown_taxonomies: [ categories, tags ]` to your contenttype definition.
Hereby it is possible to use some taxonomies internally but not showing them to your visitors.
Tags will be prefixed with a hash #, categories will be prefixed with an @.
Display of taxonomies can be controlled via adding a corresponding value, e.g. `shown_taxonomies: [ categories, tags ]` to your contenttype definition. Hereby it is possible to use some taxonomies internally but not showing them to your visitors. Tags will be prefixed with a hash #, categories will be prefixed with an @.

Both rules apply for listings as well as the display of the documents.


### Code highlighting

Code blocks are highlighted using [highlight.js](https://highlightjs.org/),
the theme used for highlighting can be defined in `theme.yml` by setting the
`highlight_theme` variable (use only lowercase!), see the [highlight.js demo page](https://highlightjs.org/static/demo/)
for previews of the different themes.
Code blocks are highlighted using [highlight.js](https://highlightjs.org/), the theme used for highlighting can be defined in `theme.yml` by setting the `highlight_theme` variable (use only lowercase!), see the [highlight.js demo page](https://highlightjs.org/static/demo/) for previews of the different themes.

### Maintenance text

To set an individual title and content of your Maintenance-Site, just create `block/maintenance`
(it has to have exactly this slug) and set title and content there.
To set an individual title and content of your Maintenance-Site, just create `block/maintenance` (it has to have exactly this slug) and set title and content there.

### Copyright notice

If you regularly use content which needs a copyright notice, just add a field
`copyright` with `type: html` or `type:markdown` to your contenttype. The notice
will be added below your content, and below the gallery (if there is one).

If you regularly use content which needs a copyright notice, just add a field `copyright` with `type: html` or `type:markdown` to your contenttype. The notice will be added below your content, and below the gallery (if there is one).

## License

Expand Down
57 changes: 32 additions & 25 deletions _gallery.twig
View file
Expand Up @@ -4,35 +4,42 @@
#}

<div class="thumbs">
{% for image in record.gallery %}
{% for image in record.gallery %}

{% set fn = image['filename'] %}
{% if record.show_gallery_captions %}
{% set caption = image.title %}
{% else %}
{% set caption = "" %}
{% endif %}
<a href="{{ asset(image.filename, 'files') }}" title="{{ caption }}">
<img src="{{ fn|thumbnail('thumb_350w') }}"
alt="{{ caption }}"
srcset="{{ fn|thumbnail('thumb_250w') }} 250w,
{% set fn = image['filename'] %}
{% if record.show_gallery_captions %}
{% set caption = image.title %}
{% else %}
{% set caption = "" %}
{% endif %}
<a href="{{ asset(image.filename, 'files') }}" title="{{ caption }}">
<img src="{{ fn|thumbnail('thumb_350w') }}" alt="{{ caption }}" srcset="{{ fn|thumbnail('thumb_250w') }} 250w,
{{ fn|thumbnail('thumb_350w') }} 350w,
{{ fn|thumbnail('thumb_450w') }} 450w">
</a>
{% endfor %}
</a>
{% endfor %}
</div>
<script>
$('.thumbs a').imageLightbox({
allowedTypes: 'png|jpg|jpeg|gif', // string;
animationSpeed: 250, // integer;
preloadNext: true, // bool; silently preload the next image
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
quitOnEnd: false, // bool; quit after viewing the last image
quitOnImgClick: false, // bool; quit when the viewed image is clicked
quitOnDocClick: true, // bool; quit when anything but the viewed image is clicked
onStart: function(){ overlayOn(); }, // function/bool; calls function when the lightbox starts
onEnd: function(){ overlayOff(); captionOff(); }, // function/bool; calls function when the lightbox quits
onLoadStart: function(){ captionOff(); }, // function/bool; calls function when the image load begins
onLoadEnd: function(){ captionOn(); } // function/bool; calls function when the image finishes loading
$('.thumbs a').imageLightbox({
allowedTypes: 'png|jpg|jpeg|gif', // string;
animationSpeed: 250, // integer;
preloadNext: true, // bool; silently preload the next image
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
quitOnEnd: false, // bool; quit after viewing the last image
quitOnImgClick: false, // bool; quit when the viewed image is clicked
quitOnDocClick: true, // bool; quit when anything but the viewed image is clicked
onStart: function() {
overlayOn();
}, // function/bool; calls function when the lightbox starts
onEnd: function() {
overlayOff();
captionOff();
}, // function/bool; calls function when the lightbox quits
onLoadStart: function() {
captionOff();
}, // function/bool; calls function when the image load begins
onLoadEnd: function() {
captionOn();
} // function/bool; calls function when the image finishes loading
});
</script>

0 comments on commit 1c88837

Please sign in to comment.