diff options
Diffstat (limited to 'layouts/partials/header.html')
| -rw-r--r-- | layouts/partials/header.html | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..f61d3c5 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,165 @@ +{{ $baseurl := .Site.BaseURL }}
+<!doctype html>
+<html lang="{{.Site.LanguageCode}}">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+ <title>{{ .Title }}</title>
+ <script src="{{$baseurl}}/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+ <link rel="import" href="{{$baseurl}}/bower_components/iron-icons/iron-icons.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-drawer-panel/paper-drawer-panel.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-icon-button/paper-icon-button.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-toolbar/paper-toolbar.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-fab/paper-fab.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-item/paper-item.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/paper-menu/paper-menu.html">
+ <link rel="import" href="{{$baseurl}}/bower_components/iron-image/iron-image.html">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
+ <style is="custom-style">
+ body {
+ font-family: 'Roboto', sans-serif;
+ }
+ .nav {
+ border-right: 1px solid #ccc;
+ }
+ {{if .Site.Params.cover}}
+ paper-scroll-header-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: var(--paper-grey-200, #eee);
+ /* background for toolbar when it is at its full size */
+ --paper-scroll-header-panel-full-header: {
+ background-image: url({{$baseurl}}/{{.Site.Params.cover}});
+ };
+ /* background for toolbar when it is condensed */
+ --paper-scroll-header-panel-condensed-header: {
+ background-image: url({{$baseurl}}/{{.Site.Params.cover}});
+ };
+ }
+ {{else}}
+ paper-scroll-header-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: var(--paper-grey-200, #eee);
+ /* background for toolbar when it is at its full size */
+ --paper-scroll-header-panel-full-header: {
+ background-image: url({{$baseurl}}/images/cover.png);
+ };
+ /* background for toolbar when it is condensed */
+ --paper-scroll-header-panel-condensed-header: {
+ background-image: url({{$baseurl}}/images/cover.png);
+ };
+ }
+ {{end}}
+ paper-toolbar {
+ /* custom toolbar height */
+ height: 256px;
+ background-color: transparent;
+ }
+ .profile{
+ width: 100%;
+ padding-bottom: 20px;
+ }
+ .photo{
+ margin: 20px;
+ display: inline-block;
+ height: 64px; width: 64px;
+ border-radius: 50%;
+ }
+ .article{
+ border: 1px solid #bebebe;
+ padding: 16px;
+ margin: 16px;
+ border-radius: 5px;
+ background-color: #fff;
+ }
+ .title{
+ font-size: 22px;
+ padding: 8px 0 16px;
+ }
+ .description{
+ font-size: 16px;
+ padding-bottom: 8px;
+ }
+ .author{
+ font-size: 16px;
+ padding-left: 20px;
+ color: white;
+ }
+ .design{
+ font-size: 14px;
+ }
+ .copyright{
+ font-size: 16px;
+ }
+ paper-menu a {
+ text-decoration: none;
+ color: #212121;
+ }
+ </style>
+
+</head>
+<body>
+ <paper-drawer-panel id="drawerPanel" responsive-width="1280px">
+ <div class="nav scroll" drawer>
+ {{if .Site.Params.profile}}
+ <iron-image class="profile" sizing="cover" src="{{$baseurl}}/{{.Site.Params.profile}}">
+ {{else}}
+ <iron-image class="profile" sizing="cover" src="{{$baseurl}}/images/profile.png">
+ {{end}}
+ {{if .Site.Params.photo}}
+ <iron-image class="photo" sizing="cover" src="{{$baseurl}}/{{.Site.Params.photo}}"></iron-image>
+ {{else}}
+ <iron-image class="photo" sizing="cover" src="{{$baseurl}}/images/photo.png"></iron-image>
+ {{end}}
+ <div class="author">{{.Site.Params.author}}</div>
+ </iron-image>
+ <paper-menu>
+ <a href="{{$baseurl}}"><paper-item>
+ <iron-icon icon="home"></iron-icon> <div class="flex">Home</div>
+ <iron-icon icon="chevron-right"></iron-icon>
+ </paper-item></a>
+ <a href="{{$baseurl}}/categories/"><paper-item>
+ <iron-icon icon="drafts"></iron-icon> <div class="flex">Categories</div>
+ <iron-icon icon="chevron-right"></iron-icon>
+ </paper-item></a>
+ <a href="{{$baseurl}}/tags/"><paper-item>
+ <iron-icon icon="loyalty"></iron-icon> <div class="flex">Tags</div>
+ <iron-icon icon="chevron-right"></iron-icon>
+ </paper-item></a>
+ </paper-menu>
+ </div>
+
+ <paper-scroll-header-panel main condenses header-height="256" condensed-header-height="64">
+
+ <paper-toolbar>
+
+ <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+ <div class="bottom title">{{.Site.Title}}</div>
+ <div class="flex"></div>
+ {{with .Site.Params.facebook}}
+ <a href="https://www.facebook.com/{{ . }}"><paper-icon-button src="{{$baseurl}}/images/facebook-dreamstale25.png"></paper-icon-button></a>
+ {{end}}
+ {{with .Site.Params.twitter}}
+ <a href="https://twitter.com/{{ . }}"><paper-icon-button src="{{$baseurl}}/images/twitter-dreamstale71.png"></paper-icon-button></a>
+ {{end}}
+ {{with .Site.Params.gplus}}
+ <a href="https://google.com/+{{ . }}"><paper-icon-button src="{{$baseurl}}/images/google+-dreamstale37.png"></paper-icon-button></a>
+ {{end}}
+ {{with .Site.Params.linkedin}}
+ <a href="https://www.linkedin.com/in/{{ . }}"><paper-icon-button src="{{$baseurl}}/images/linkedin-dreamstale45.png"></paper-icon-button></a>
+ {{end}}
+ {{with .Site.Params.github}}
+ <a href="https://github.com/{{ . }}"><paper-icon-button src="{{$baseurl}}/images/github2-dreamstale35.png"></paper-icon-button></a>
+ {{end}}
+ <a href="{{$baseurl}}/index.xml"><paper-icon-button src="{{$baseurl}}/images/feed-dreamstale27.png"></paper-icon-button></a>
+
+ </paper-toolbar>
|