plantroon/planblog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Moved social links to top and made them disappear when cursor is outside

Browse Source 
header
This commit is contained in:
Jakub Filo 2017-04-18 03:20:56 +02:00
parent a4b7d7214a
commit 5a735fdeb0
8 changed files with 26 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
layouts/partials/header.html
View File

@ -17,9 +17,6 @@
{{ end }}{{ end }} {{ end }}{{ end }}
{{ if .IsPage }} {{ if .IsPage }}
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
{{ with .Site.Params.facebook }}
<meta property="og:article:author" content="https://facebook.com/{{ . }}" />
{{ end }}
<meta property="og:article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}" /> <meta property="og:article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}" />
{{ range .Params.tags }} {{ range .Params.tags }}
<meta property="og:article:tag" content="{{ . }}" /> <meta property="og:article:tag" content="{{ . }}" />
@ -31,11 +28,10 @@
<title> <title>
{{ if ne .URL "/" }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }} {{ if ne .URL "/" }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }}
</title> </title>
<link rel="canonical" href=" {{ .Permalink }}" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.min.css" /> <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.min.css" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" /> <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/font-awesome.min.css" /> <link rel="stylesheet" href="{{ .Site.BaseURL }}css/font-awesome.min.css" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/github.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" type="text/css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" type="text/css">
<link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.png" /> <link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.png" />
{{ if eq .URL "/" }} {{ if eq .URL "/" }}
@ -52,8 +48,9 @@
{{ end }} {{ end }}
</head> </head>
<body> <body>
<header class="global-header" style="background-image:url({{ if isset .Params "image" }}{{ .Params.image }} {{ else }} /images/bg.jpg {{ end }})"> <header class="global-header" style="background-image:url({{ if isset .Params "image" }}{{ .Params.image }} {{ else }} /images/bg.svg {{ end }})">
<section class="header-text"> <section class="header-text">
{{ partial "social.html" . }}
<h1> <h1>
<a href="{{ .Site.BaseURL }}"> <a href="{{ .Site.BaseURL }}">
{{ with .Site.Params.avatar }} {{ with .Site.Params.avatar }}
@ -69,7 +66,7 @@
{{ . }} {{ . }}
</div> </div>
{{ end }} {{ end }}
{{ partial "social.html" . }}
</section> </section>
</header> </header>
<main class="container"> <main class="container">

11
layouts/partials/social.html
View File

@ -1,7 +1,4 @@
<div class="sns-social hidden-print"> <div class="sns-social hidden-print">
<a href="/index.xml" title="Subscribe">
<i class="fa fa-rss"></i>
</a>
{{ with .Site.Params.about }} {{ with .Site.Params.about }}
<a href="{{ . }}" target="_self" title="About me"> <a href="{{ . }}" target="_self" title="About me">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
@ -62,4 +59,12 @@
<i class="fa fa-key"></i> <i class="fa fa-key"></i>
</a> </a>
{{ end }} {{ end }}
{{ with .Site.Params.trakt }}
<a href="https://trakt.tv/users/{{ . }}" target="_blank">
<i class="fa fa-film"></i>
</a>
{{ end }}
<a href="/index.xml" title="Subscribe">
<i class="fa fa-rss"></i>
</a>
</div> </div>

115
static/css/github.css
View File

@ -1,115 +0,0 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs-comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}

1
static/css/highlight.pack.js
View File

File diff suppressed because one or more lines are too long

20
static/css/main.css
View File

@ -3,21 +3,26 @@ html {
} }
main { main {
max-width: 750px; max-width: 640px;
word-wrap: break-word; word-wrap: break-word;
} }
/* Header */ /* Header */
.global-header { .global-header {
background: #222 no-repeat center center; background: #222 no-repeat center center;
background-size: cover; background-size: cover;
} }
.global-header:hover .sns-social {
display: block;
position: relative;
top: 10px;
}
.header-text { .header-text {
position: relative; position: relative;
padding-bottom: 1px; padding-bottom: 1px;
height: 100%; vertical-align: middle;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
@ -25,19 +30,22 @@ main {
.header-text .tag-line { .header-text .tag-line {
margin: 10px auto; margin: 10px auto;
padding: 0 10px; padding: 0 10px;
max-width: 430px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
} }
.header-text .sns-social { .header-text .sns-social {
top: -500px;
position: relative;
text-align: center; text-align: center;
display: block;
transition-duration: 1s;
} }
.header-text .sns-social a { .header-text .sns-social a {
display: inline-block; display: inline-block;
width: 32px; width: 42px;
height: 32px; height: 32px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
text-decoration: none; text-decoration: none;
@ -62,13 +70,13 @@ main {
text-decoration: none; text-decoration: none;
} }
/* Footer */ /* Footer */
.global-footer { .global-footer {
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
max-width: 640px;
height: 100px; height: 100px;
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);

BIN
static/images/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/images/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 343 KiB

BIN
static/images/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB