From 60beb1dbdfa8524999608add2be227df7bbe57be Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Wed, 10 Oct 2018 23:44:51 +0200
Subject: [PATCH] rework most css naming issues and cleanup layout

---
 layouts/_default/baseof.html |   8 +-
 layouts/_default/list.html   |  25 +++--
 layouts/_default/single.html |  18 ++--
 layouts/partials/footer.html |  30 ++++--
 static/_css/style.css        | 180 +++++++++--------------------------
 5 files changed, 92 insertions(+), 169 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 646d8d8..5881ce3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -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>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ab51067..d7a0fea 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -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 }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b98b828..3598b7c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -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 }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e4622d1..aeb6a43 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -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>
diff --git a/static/_css/style.css b/static/_css/style.css
index d0878c5..22cd12e 100644
--- a/static/_css/style.css
+++ b/static/_css/style.css
@@ -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 {
