Browse Source

Changed design. Added footer ad.

master
Jakub Filo 6 years ago
parent
commit
2aac7ebd7e
  1. BIN
      images/screenshot.png
  2. BIN
      images/tn.png
  3. 11
      layouts/partials/footer.html
  4. 18
      layouts/partials/header.html
  5. 37
      layouts/partials/navi.html
  6. 1
      layouts/partials/pagination.html
  7. 67
      layouts/partials/social.html
  8. 81
      static/css/main.css
  9. 5
      theme.toml

BIN
images/screenshot.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 719 KiB

BIN
images/tn.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 365 KiB

11
layouts/partials/footer.html

@ -1,5 +1,14 @@
{{ with .Site.Params.google_adsense }}
<ins class="adsbygoogle"
style="display:block"
data-ad-client="{{ . }}"
data-ad-slot="8599575024"
data-ad-format="auto">
</ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
{{ end }}
<footer class="container global-footer">
<div class="copyright-note pull-left">
<div class="copyright-note">
{{ .Site.Copyright | safeHTML }}
</div>
</footer>

18
layouts/partials/header.html

@ -4,9 +4,12 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<meta property="og:title" content="{{ if ne .URL "/" }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }}" />
{{ with .Site.Params.description }}
<meta name="description" content="{{ . }}"/>
{{ end }}
{{ with .Site.Params.themecolor }}
<meta name="theme-color" content="{{ . }}" />
{{ end }}
{{ end }}
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{ with .Params.images }}{{ range first 5 . }}
@ -51,13 +54,22 @@
<body>
<header class="global-header" style="background-image:url({{ if isset .Params "image" }}{{ .Params.image }} {{ else }} /images/bg.jpg {{ end }})">
<section class="header-text">
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
<h1>
<a href="{{ .Site.BaseURL }}">
{{ with .Site.Params.avatar }}
<img src="{{ . }}" alt="PLANTROON"/>
{{ end }}
{{ with .Site.Params.heading }}
{{ . }}
{{ end }}
</a>
</h1>
{{ with .Site.Params.subtitle }}
<div class="tag-line">
{{ . }}
</div>
{{ end }}
{{ partial "navi.html" . }}
{{ partial "social.html" . }}
</section>
</header>
<main class="container">

37
layouts/partials/navi.html

@ -1,37 +0,0 @@
<div class="sns-navi hidden-print">
<a href="{{ .Site.BaseURL }}" target="_self" title="Blog">
{{ with .Site.Params.avatar }}
<img src="{{ . }}"/>
{{ end }}
</a>
{{ with .Site.Params.about }}
<a href="{{ . }}" title="About me">
<i class="fa fa-user"></i>
</a>
{{ end }}
{{ with .Site.Params.email }}
<a href="mailto:{{ . }}" target="_self" title="E-mail me">
<i class="fa fa-envelope"></i>
</a>
{{ end }}
{{ with .Site.Params.github }}
<a href="https://github.com/{{ . }}" target="_blank" title="Github">
<i class="fa fa-github"></i>
</a>
{{ end }}
{{ with .Site.Params.youtube }}
<a href="https://youtube.com/{{ . }}" target="_blank" title="Youtube">
<i class="fa fa-youtube"></i>
</a>
{{ end }}
{{ with .Site.Params.twitter }}
<a href="https://twitter.com/{{ . }}" target="_blank" title="Twitter">
<i class="fa fa-twitter"></i>
</a>
{{ end }}
{{ with .Site.Params.steam }}
<a href="https://steamcommunity.com/id/{{ . }}" target="_blank" title="Steam">
<i class="fa fa-steam"></i>
</a>
{{ end }}
</div>

1
layouts/partials/pagination.html

@ -5,7 +5,6 @@
{{if .HasPrev}}
<a class="newer-posts" href="{{ .Prev.URL }}"><span aria-hidden="true">&laquo;</span> Newer Posts</a>
{{end}}
<span class="page-number">Page {{ .PageNumber }} of {{.TotalPages}}</span>
{{if .HasNext}}
<a class="older-posts" href="{{ .Next.URL }}">Older Posts <span aria-hidden="true">&raquo;</span></a>
{{end}}

67
layouts/partials/social.html

@ -0,0 +1,67 @@
<div class="sns-social hidden-print">
{{ with .Site.Params.rss }}
<a href="{{ . }}" title="Subscribe">
<i class="fa fa-rss"></i>
</a>
{{ end }}
{{ with .Site.Params.about }}
<a href="{{ . }}" target="_self" title="About me">
<i class="fa fa-user"></i>
</a>
{{ end }}
{{ with .Site.Params.email }}
<a href="mailto:{{ . }}" target="_self" title="E-mail me">
<i class="fa fa-envelope"></i>
</a>
{{ end }}
{{ with .Site.Params.github }}
<a href="https://github.com/{{ . }}" target="_blank" title="Github">
<i class="fa fa-github"></i>
</a>
{{ end }}
{{ with .Site.Params.youtube }}
<a href="https://youtube.com/{{ . }}" target="_blank" title="Youtube">
<i class="fa fa-youtube"></i>
</a>
{{ end }}
{{ with .Site.Params.twitter }}
<a href="https://twitter.com/{{ . }}" target="_blank" title="Twitter">
<i class="fa fa-twitter"></i>
</a>
{{ end }}
{{ with .Site.Params.steam }}
<a href="https://steamcommunity.com/id/{{ . }}" target="_blank" title="Steam">
<i class="fa fa-steam"></i>
</a>
{{ end }}
{{ with .Site.Params.instagram }}
<a href="https://instagram.com/{{ . }}" target="_blank">
<i class="fa fa-instagram"></i>
</a>
{{ end }}
{{ with .Site.Params.googleplus }}
<a href="https://plus.google.com/+{{ . }}" target="_blank">
<i class="fa fa-google"></i>
</a>
{{ end }}
{{ with .Site.Params.facebook }}
<a href="https://facebook.com/{{ . }}" target="_blank">
<i class="fa fa-facebook"></i>
</a>
{{ end }}
{{ with .Site.Params.stackoverflow }}
<a href="https://stackoverflow.com/users/{{ . }}" target="_blank">
<i class="fa fa-stack-overflow"></i>
</a>
{{ end }}
{{ with .Site.Params.linkedin }}
<a href="https://linkedin.com/in/{{ . }}" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
{{ end }}
{{ with .Site.Params.keybase }}
<a href="https://keybase.io/{{ . }}" target="_blank">
<i class="fa fa-key"></i>
</a>
{{ end }}
</div>

81
static/css/main.css

@ -31,14 +31,14 @@ main {
font-weight: 300;
}
.header-text .sns-navi {
.header-text .sns-social {
text-align: center;
}
.header-text .sns-navi a {
.header-text .sns-social a {
display: inline-block;
width: 42px;
height: 42px;
width: 32px;
height: 32px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 24px;
@ -46,7 +46,7 @@ main {
transition: color,border-color 0.1s linear;
}
.header-text .sns-navi a:hover {
.header-text .sns-social a:hover {
border-color: rgba(255, 255, 255, 1.0);
color: rgba(255, 255, 255, 1.0);
}
@ -66,8 +66,6 @@ a.btn-header {
position: absolute;
top: 20px;
padding: 7px 16px;
border: 1px solid rgba(255, 255, 255, 1.0);
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 1.0);
text-decoration: none;
@ -81,10 +79,6 @@ a.btn-header:hover {
color: rgba(0, 0, 0, 1.0);
}
a.btn-back {
left: 20px;
}
/* Footer */
.global-footer {
@ -94,6 +88,7 @@ a.btn-back {
height: 100px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.4);
text-align: center;
}
/* Article */
@ -113,11 +108,9 @@ a.btn-back {
.post-tag a {
padding: 0 10px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 12px;
color: rgba(0, 0, 0, 0.3);
text-decoration: none;
transition: color,border-color,background-color 0.1s linear;
transition: color,background-color 0.1s linear;
}
.post-tag a:hover {
@ -135,70 +128,16 @@ a.btn-back {
text-align: center;
}
.author-info {
padding: 25px 0;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.author-name {
margin: 0 0 5px 0;
font-size: 30px;
}
.author-bio {
color: rgba(0, 0, 0, 0.5);
}
.author-contact {
position: relative;
display: inline-block;
padding-top: 10px;
height: 100px;
text-align: center;
}
.author-contact a {
display: inline-block;
padding: 7px 16px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
color: rgba(0, 0, 0, 0.7);
text-decoration: none;
font-weight: 300;
font-size: 13px;
transition: background-color,border-color,color 0.1s linear;
}
.author-contact a:hover {
border: 1px solid rgba(51, 122, 182, 1.0);
background-color: rgba(51, 122, 183, 1.0);
color: rgba(255, 255, 255, 1.0);
}
/* Pagination */
.pagination
{
width: 100%;
text-align: center;
}
.older-posts,.newer-posts
{
display: inline!important;
border: 1px solid #ddd;
border-radius: 15px;
text-decoration: none;
transition: border .3s ease;
padding: 5px 14px;
}
.page-number
{
display: inline-block;
min-width: 100px;
padding: 2px 0;
transition: background-color .1s linear;
}
.newer-posts
@ -213,8 +152,7 @@ a.btn-back {
.older-posts:hover,.newer-posts:hover
{
color: #889093;
border-color: #98a0a4;
text-decoration: none;
}
/* Override some of Bootstrap's styles */
@ -230,6 +168,7 @@ pre code {
}
.pager li>a {
border: 0px;
transition: background-color 0.1s linear;
}

5
theme.toml

@ -1,7 +1,6 @@
author = "Keichi Takahashi"
modified_by = "Jakub Filo"
author = "Jakub Filo"
description = "Simple and clean blog theme for hugo. Added Adsense functionality, fixed unwanted scrollbar behavior and renamed for my personal use."
license = "MIT"
name = "planblog"
source_repo = "git@github.com:keichi/vienna.git"
source_repo = "git@github.com:plantroon/planblog.git"
tags = ["blog", "tags", "bootstrap"]

Loading…
Cancel
Save