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
Only available on Blogger / Blogspot based blogs. Install Blogger dashboard > Template > Edit HTML or Blogger dashboard > Template > Backup / Restore
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>
&copy; 2019. All rights reserved.
</p>
</div>
</div>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 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>Zafer Zent
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent