xoxys/theme-geeklab
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rework most css naming issues and cleanup layout

Browse Source
This commit is contained in:
Robert Kaussow 2018-10-10 23:44:51 +02:00
parent 74f98d2e2f
commit 60beb1dbdf
5 changed files with 92 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/_default/baseof.html
View File

@ -4,22 +4,22 @@
<body> <body>
<header> <header>
<div class="site-header"> <div class="site-header">
<span class="site-header__icon test"><i class="fas fa-flask"></i></span> <span class="site-header__icon"><i class="fas fa-flask"></i></span>
<span class="site-header__title">Geeklabor</span> <span class="site-header__title">Geeklabor</span>
<span class="site-header__description">Linux und Open Source Blog</span> <span class="site-header__description">Linux und Open Source Blog</span>
</div> </div>
<div class="site-nav__mobile" onclick="toogleClass('default-menu');"> <div class="site-nav__mobile" onclick="toogleClass('default-menu');">
<span class="site-nav__btn">Menu</span> <span class="site-nav__button">Menu</span>
</div> </div>
<nav class="site-nav"> <nav class="site-nav">
<ul class="site-nav__list"> <ul class="site-nav__list">
{{ $currentPage := .Permalink }} {{ $currentPage := .Permalink }}
<li><a class="site-nav__btn {{- if eq $currentPage (printf "%s" .Site.BaseURL) }} active {{- end }}" href="{{ .Site.BaseURL }}">Blog</a></li> <li><a class="site-nav__button {{- if eq $currentPage (printf "%s" .Site.BaseURL) }} is-active {{- end }}" href="{{ .Site.BaseURL }}">Blog</a></li>
{{ range $name, $taxonomy := .Site.Taxonomies.categories }} {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
{{ with $.Site.GetPage (printf "/categories/%s" $name) }} {{ with $.Site.GetPage (printf "/categories/%s" $name) }}
<li><a class="site-nav__btn {{ if eq $currentPage .Permalink }} active {{ end }}" href="{{ .Permalink }}">{{ $name }}</a></li> <li><a class="site-nav__button {{ if eq $currentPage .Permalink }} is-active {{ end }}" href="{{ .Permalink }}">{{ $name }}</a></li>
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </ul>

25
layouts/_default/list.html
View File

@ -2,22 +2,22 @@
{{ $paginator := .Paginate (where .Pages "Type" "post") }} {{ $paginator := .Paginate (where .Pages "Type" "post") }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<article class="post"> <article class="post">
<header class="post__header"> <header class="post-header">
<h2 class="post__title"><a class="post__header--link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2> <h2 class="post-header__title"><a class="post-header__link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
</header> </header>
<section class="post__content"> <section class="post-content">
{{ .Summary }} {{ .Summary }}
{{ if .Truncated }} {{ if .Truncated }}
<div> <div>
<br><a class="post__content--more" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen </a> <br><a class="post-content__link is-readmore" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen</a>
</div> </div>
{{ end }} {{ end }}
</section> </section>
<footer> <footer>
<span class="break-wordwrap outline"> <span class="post-footer__button">
<i class="far fa-calendar-alt"></i> <i class="far fa-calendar-alt post-footer__icon"></i>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}"> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ .Date.Day }}. {{ index $.Site.Data.de_month (printf "%d" .Date.Month) }} {{ .Date.Year }} {{ .Date.Day }}. {{ index $.Site.Data.de_month (printf "%d" .Date.Month) }} {{ .Date.Year }}
</time> </time>
@ -26,20 +26,19 @@
{{ range .Param "authors" }} {{ range .Param "authors" }}
{{ $name := . }} {{ $name := . }}
{{ with $.Site.GetPage (printf "/authors/%s" $name | urlize) }} {{ with $.Site.GetPage (printf "/authors/%s" $name | urlize) }}
<span class="single_user break-wordwrap outline"> <span class="post-footer__button">
<i class="fas fa-user"></i> <a href="{{ .RelPermalink }}" title="Alle Artikel des Autors">{{ $name }}</a> <i class="fas fa-user post-footer__icon"></i>
<a class="post-footer__link" href="{{ .RelPermalink }}" title="Alle Artikel des Autors">{{ $name }}</a>
</span> </span>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ range .Param "categories" }} {{ range .Param "categories" }}
{{ $name := . }} {{ $name := . }}
<span class="outline"> <span class="post-footer__button">
{{ with $.Site.GetPage (printf "/categories/%s" $name | urlize) }} {{ with $.Site.GetPage (printf "/categories/%s" $name | urlize) }}
<span class="break-wordwrap"> <i class="fas fa-tags post-footer__icon"></i>
<i class='fas fa-tags'></i> <a class="post-footer__link" href="{{ .RelPermalink }}" title="Alle Artikel in '{{ $name }}'">{{ $name }}</a>
<a href="{{ .RelPermalink }}" title="Alle Artikel in '{{ $name }}'">{{ $name }}</a>
</span>
{{ end }} {{ end }}
</span> </span>
{{ end }} {{ end }}

18
layouts/_default/single.html
View File

@ -1,12 +1,10 @@
{{ define "main" }} {{ define "main" }}
<main class="content" role="main"> <article class="post">
<article class="post"> <header class="post-header">
<header> <h2 class="post-header__title">{{ .Title }}</h2>
<h2 class="title">{{ .Title }}</h2> </header>
</header> <section class="post-content">
<section class="content"> {{ .Content }}
{{ .Content }} </section>
</section> </article>
</article>
</main>
{{ end }} {{ end }}

30
layouts/partials/footer.html
View File

@ -1,15 +1,27 @@
<footer class="footer"> <footer class="site-footer">
{{ .Site.RSSLink }} {{ .Site.RSSLink }}
<div class="footer__block"> <div class="site-footer__block">
{{ with .OutputFormats.Get "atom" -}} {{ with .OutputFormats.Get "atom" -}}
<span class="footer__btn"><i class="fas fa-rss"></i> <a class="footer__btn--link" href="{{ .Permalink }}">Feed</a></span> <span class="site-footer__button">
<i class="fas fa-rss"></i>
<a class="site-footer__link" href="{{ .Permalink }}">Feed</a>
</span>
{{ end }} {{ end }}
<span class="footer__btn"><i class="fas fa-envelope"></i> <a class="footer__btn--link" href="#">Kontakt</a></span> <span class="site-footer__button">
<span class="footer__btn"><i class="fas fa-user-lock"></i> <a class="footer__btn--link" href="#">Impressum/Datenschutz</a></span> <i class="fas fa-envelope"></i>
<span>Artikel unter <a class="footer__btn--link" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></span> <a class="site-footer__link" href="#">Kontakt</a>
</span>
<span class="site-footer__button">
<i class="fas fa-user-lock"></i>
<a class="site-footer__link" href="#">Impressum/Datenschutz</a>
</span>
<span>
Artikel unter
<a class="site-footer__link" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
</span>
</div> </div>
<div class="footer__block"> <div class="site-footer__block">
Build with <a class="footer__btn--link" href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/> Build with <a class="site-footer__link" href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/>
Hosted on <a class="footer__btn--link" href="https://uberspace.de/">Uberspace</a> Hosted on <a class="site-footer__link" href="https://uberspace.de/">Uberspace</a>
</div> </div>
</footer> </footer>

180
static/_css/style.css
View File

@ -83,10 +83,10 @@ html{
.site-nav__mobile { .site-nav__mobile {
display: none; display: none;
} }
.site-nav__mobile span { .site-nav__button {
margin: 0.8em 0; margin: 0.8em 0;
} }
.site-nav__btn{ .site-nav__button{
color: #D9D9D9; color: #D9D9D9;
text-decoration: none; text-decoration: none;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
@ -94,8 +94,8 @@ html{
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
} }
.site-nav__btn:hover, .site-nav__button:hover,
.site-nav__btn.active { .site-nav__button.is-active {
background: #3D4352; background: #3D4352;
cursor: pointer; cursor: pointer;
} }
@ -108,6 +108,7 @@ html{
margin: 0 0.3em; margin: 0 0.3em;
} }
/* /*
Content Section Content Section
*/ */
@ -118,7 +119,7 @@ html{
height: 100%; height: 100%;
} }
.site-content, .site-content,
.footer__block { .site-footer__block {
margin:0 auto; margin:0 auto;
width:80%; width:80%;
max-width:980px; max-width:980px;
@ -132,52 +133,53 @@ html{
.post:first-child{ .post:first-child{
border:0; border:0;
} }
.post__header--link { .post-header__link {
color:#000000; color:#000000;
text-decoration: none; text-decoration: none;
} }
.post__header--link:hover{ .post-header__link:hover{
text-decoration: underline; text-decoration: underline;
} }
.post__title { .post-header__title {
font-weight: normal; font-weight: normal;
} }
.post__content--more, .post-content__link {
.blog-entry footer a {
color:#0A539A; color:#0A539A;
text-decoration: underline; text-decoration: underline;
} }
.blog-entry footer a, .post-content__link:hover {
#comments a.viewmode,
#comments .viewmode-active{
border:1px solid #BFBFBF;
padding:1px 3px;
border-radius: 4px;
text-decoration: none;
color:#505050;
text-transform: uppercase;
}
#trackback_url{
padding-bottom: 1.5em;
}
.blog-entry footer .fa{
font-size:22px;
padding:0 5px 0 0;
}
#comments{
padding-bottom:1em;
}
.post__content--more:hover {
background:#0A539A; background:#0A539A;
color:#FFFFFF; color:#FFFFFF;
text-decoration:none; text-decoration:none;
} }
.blog-entry footer a:hover, .post-content__link.is-readmore:after {
#pagenav a:hover, content:' \f30b';
#serendipity_comment input[type="submit"]:hover, font-family: 'Font Awesome 5 Free';
#comments a.viewmode:hover{ font-weight: 900;
}
.post-content__link.is-readmore {
margin-bottom: 1.5em;
display: inline-block;
}
.post-footer__link {
border:1px solid #BFBFBF;
padding:1px 4px;
margin:2px 0;
border-radius: 4px;
text-decoration: none;
color:#505050;
text-transform: uppercase;
position:relative;
display:inline-block;
}
.post-footer__icon {
font-size: 20px;
padding: 0 2px;
}
.post-footer__link:hover {
background:#4CA0F4; background:#4CA0F4;
border-color: #3E82C7; border-color: #3E82C7;
color:#FFFFFF; color:#FFFFFF;
@ -185,113 +187,24 @@ html{
cursor:pointer; cursor:pointer;
} }
.post__content--more:after { .post-footer__button {
content:' \f30b'; color: #4A4A4A;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.post__content--more {
margin-bottom: 1.5em;
display: inline-block;
}
#trackbacks{
padding:3em 0 1.5em 0;
}
#trackbacks article footer a{
margin:0.5em 0 1em 0;
}
.blog-entry footer span.outline{
margin-right:10px; margin-right:10px;
}
.blog-entry footer span a{
position:relative;
margin:2px 0;
display:inline-block;
}
.blog-entry footer span.break-wordwrap{
position:relative; position:relative;
display:inline-block; display:inline-block;
white-space:nowrap; white-space:nowrap;
} }
.blog-entry footer span{
color:#4A4A4A;
}
.blog-entry .update{
font-style: italic;
}
.blog-entry .update span:first-child{
text-decoration: underline;
}
.notice,
.geshi{
word-wrap: break-word;
padding:1% 0;
border-radius:3px;
}
.notice div{
vertical-align:middle;
padding-left:7px;
padding-right:7px;
}
.notice div:first-child{
text-align:center;
font-size:20px;
width:60px;
padding-right:0;
}
.notice-noarticle{
margin:40px 1.5em;
}
.notice-info,
.notice-important,
.notice-success,
.notice-warning{
margin:5px 0;
width:80%;
}
.notice-noarticle,
.notice-info{
border:1px solid #A3C0DC;
background:#E1EAF4;
color:#2D547E;
}
.notice-important{
border:1px solid #FF9595;
background:#FFD3D3;
color:#D30000;
}
.notice-success{
border:1px solid #95FF9C;
background:#CFFFD1;
color:#00A809;
}
.notice-warning{
border:1px solid #FFFF7E;
background:#FFFFBE;
color:#EE6905;
}
.sticky{ .sticky{
font-weight:bold; font-weight:bold;
padding-right:10px; padding-right:10px;
} }
.geshi{
font-size:13px!important;
font-family: monospace;
border:1px solid #BFBFBF;
background:#F6F6F6;
overflow: auto;
white-space:nowrap;
padding: 0 1em 0 0;
}
/* /*
Global Blog Footer Global Blog Footer
*/ */
.footer { .site-footer {
position: absolute; position: absolute;
bottom: -7.6em; bottom: -7.6em;
width: 100%; width: 100%;
@ -299,22 +212,23 @@ html{
color: #FFFFFF; color: #FFFFFF;
padding: 1em 0; padding: 1em 0;
} }
.footer__block { .site-footer__block {
line-height:30px; line-height:30px;
} }
.footer__btn--link { .site-footer__link {
color:#FFA31E; color:#FFA31E;
text-decoration:underline; text-decoration:underline;
} }
.footer__btn--link:hover{ .site-footer__link:hover{
background:#FFA31E; background:#FFA31E;
color:#000000; color:#000000;
text-decoration:none; text-decoration:none;
} }
.footer__btn { .site-footer__button {
margin:0 10px 0 0; margin:0 10px 0 0;
} }
/* page navigation */ /* page navigation */
#pagenav{ #pagenav{
margin-top:1em; margin-top:1em;
@ -382,7 +296,7 @@ all and (max-width: 900px){
} }
@media all and (max-device-width: 710px), all and (max-width: 710px){ @media all and (max-device-width: 710px), all and (max-width: 710px){
header.main nav.default { .site-nav {
display: none; display: none;
} }
.site-nav__mobile { .site-nav__mobile {