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>
<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__description">Linux und Open Source Blog</span>
</div>
<div class="site-nav__mobile" onclick="toogleClass('default-menu');">
<span class="site-nav__btn">Menu</span>
<span class="site-nav__button">Menu</span>
</div>
<nav class="site-nav">
<ul class="site-nav__list">
{{ $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 }}
{{ 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 }}
</ul>

25
layouts/_default/list.html
View File

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

18
layouts/_default/single.html
View File

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

30
layouts/partials/footer.html
View File

@ -1,15 +1,27 @@
<footer class="footer">
<footer class="site-footer">
{{ .Site.RSSLink }}
<div class="footer__block">
<div class="site-footer__block">
{{ 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 }}
<span class="footer__btn"><i class="fas fa-envelope"></i> <a class="footer__btn--link" href="#">Kontakt</a></span>
<span class="footer__btn"><i class="fas fa-user-lock"></i> <a class="footer__btn--link" href="#">Impressum/Datenschutz</a></span>
<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>
<span class="site-footer__button">
<i class="fas fa-envelope"></i>
<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 class="footer__block">
Build with <a class="footer__btn--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>
<div class="site-footer__block">
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="site-footer__link" href="https://uberspace.de/">Uberspace</a>
</div>
</footer>

180
static/_css/style.css
View File

@ -83,10 +83,10 @@ html{
.site-nav__mobile {
display: none;
}
.site-nav__mobile span {
.site-nav__button {
margin: 0.8em 0;
}
.site-nav__btn{
.site-nav__button{
color: #D9D9D9;
text-decoration: none;
padding: 0.2em 0.5em;
@ -94,8 +94,8 @@ html{
border-radius: 6px;
display: inline-block;
}
.site-nav__btn:hover,
.site-nav__btn.active {
.site-nav__button:hover,
.site-nav__button.is-active {
background: #3D4352;
cursor: pointer;
}
@ -108,6 +108,7 @@ html{
margin: 0 0.3em;
}
/*
Content Section
*/
@ -118,7 +119,7 @@ html{
height: 100%;
}
.site-content,
.footer__block {
.site-footer__block {
margin:0 auto;
width:80%;
max-width:980px;
@ -132,52 +133,53 @@ html{
.post:first-child{
border:0;
}
.post__header--link {
.post-header__link {
color:#000000;
text-decoration: none;
}
.post__header--link:hover{
.post-header__link:hover{
text-decoration: underline;
}
.post__title {
.post-header__title {
font-weight: normal;
}
.post__content--more,
.blog-entry footer a {
.post-content__link {
color:#0A539A;
text-decoration: underline;
}
.blog-entry footer a,
#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 {
.post-content__link:hover {
background:#0A539A;
color:#FFFFFF;
text-decoration:none;
}
.blog-entry footer a:hover,
#pagenav a:hover,
#serendipity_comment input[type="submit"]:hover,
#comments a.viewmode:hover{
.post-content__link.is-readmore:after {
content:' \f30b';
font-family: 'Font Awesome 5 Free';
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;
border-color: #3E82C7;
color:#FFFFFF;
@ -185,113 +187,24 @@ html{
cursor:pointer;
}
.post__content--more:after {
content:' \f30b';
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{
.post-footer__button {
color: #4A4A4A;
margin-right:10px;
}
.blog-entry footer span a{
position:relative;
margin:2px 0;
display:inline-block;
}
.blog-entry footer span.break-wordwrap{
position:relative;
display:inline-block;
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{
font-weight:bold;
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
*/
.footer {
.site-footer {
position: absolute;
bottom: -7.6em;
width: 100%;
@ -299,22 +212,23 @@ html{
color: #FFFFFF;
padding: 1em 0;
}
.footer__block {
.site-footer__block {
line-height:30px;
}
.footer__btn--link {
.site-footer__link {
color:#FFA31E;
text-decoration:underline;
}
.footer__btn--link:hover{
.site-footer__link:hover{
background:#FFA31E;
color:#000000;
text-decoration:none;
}
.footer__btn {
.site-footer__button {
margin:0 10px 0 0;
}
/* page navigation */
#pagenav{
margin-top:1em;
@ -382,7 +296,7 @@ all and (max-width: 900px){
}
@media all and (max-device-width: 710px), all and (max-width: 710px){
header.main nav.default {
.site-nav {
display: none;
}
.site-nav__mobile {