Lanyon-Blogger-Template

Lanyon-Blogger-Template

Lanyon Blogger/Blogspot Template adapted into the Blogger from Jekyll.

#blogger#blogger-templates#blogspot#blogspot-templates#blogger-template#blogger-theme#blogspot-template#blogspot-theme#design#xml
Demo Download

Lanyon

Lanyon is an unassuming Blogger template that places content first by tucking away navigation in a hidden drawer.

Lanyon Blogger/Blogspot Template adapted into the Blogger from Jekyll.

Jekyll Version : https://github.com/poole/lanyon

Contents

Usage

Only available on Blogger / Blogspot based blogs. Install Blogger dashboard > Template > Edit HTML or Blogger dashboard > Template > Backup / Restore

Options

Lanyon includes some customizable options, typically applied via classes on the <body> element.

<!-- Toggleable sidebar -->
<div class='sidebar' id='sidebar'>
<div class='sidebar-item'>
<p>A reserved <a href='http://blogger.com' target='_blank'>Blogger</a> theme that places the utmost gravity on content with a hidden drawer. Made by <a href='https://twitter.com/zaferzent' target='_blank'>@zaferzent</a>.</p>
</div>
<nav class='sidebar-nav'>
<a class='sidebar-nav-item active' href='/'>Home</a>    
<a class='sidebar-nav-item' href='/p/about.html'>About</a>
<a class='sidebar-nav-item' href=''>Contact</a>
<a class='sidebar-nav-item' href='https://github.com/zaferzent'>GitHub project page</a>
<span class='sidebar-nav-item'>Lanyon Template v1.0.</span>
<span class='sidebar-nav-item'>Blogger Adapted by Zafer Zent</span>
</nav>
<div class='sidebar-item'>
<p>
&amp;copy; 2019. All rights reserved.
</p>
</div>
</div>

Themes

Lanyon ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

There are eight themes available at this time.

To use a theme, add any one of the available theme classes to the <body> element in the default.html layout, like so:

<body class="theme-base-08">
  ...
</body>

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Reverse the page orientation with a single class.

<body class="layout-reverse">
  ...
</body>

Make the sidebar overlap the viewport content with a single class:

<body class="sidebar-overlay">
  ...
</body>

This will keep the content stationary and slide in the sidebar over the side content. It also adds a box-shadow based outline to the toggle for contrast against backgrounds, as well as a box-shadow on the sidebar for depth.

It's also available for a reversed layout when you add both classes:

<body class="layout-reverse sidebar-overlay">
  ...
</body>

Author

Zafer Zent

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog