From 74f98d2e2f5aebccfae8a0107812818da1254db7 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <robert.kaussow@mail.schwarz>
Date: Wed, 10 Oct 2018 16:56:52 +0200
Subject: [PATCH] refactor css

---
 layouts/_default/baseof.html |  30 ++--
 layouts/_default/list.html   |  14 +-
 layouts/_default/single.html |   8 +-
 layouts/partials/footer.html |  18 +-
 static/_css/style.css        | 340 ++++++-----------------------------
 5 files changed, 87 insertions(+), 323 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5ad5d40..646d8d8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,30 +2,34 @@
 <html lang="de">
   {{- partial "head.html" . -}}
   <body>
-  <header class="main">
-    <div class="banner">
-      <span class="icon"><i class="fas fa-flask"></i></span>
-      <span class="title">Geeklabor</span>
-      <span class="underline">Linux und Open Source Blog</span>
+  <header>
+    <div class="site-header">
+      <span class="site-header__icon test"><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="mobile" onclick="toogleClass('default-menu');"><span>Menu</span></div>
-    <nav id="default-menu" class="default">
-      <ul id="all-tags">
+
+    <div class="site-nav__mobile" onclick="toogleClass('default-menu');">
+      <span class="site-nav__btn">Menu</span>
+    </div>
+
+    <nav class="site-nav">
+      <ul class="site-nav__list">
         {{ $currentPage := .Permalink }}
-        <li><a {{ if eq $currentPage (printf "%s" .Site.BaseURL) }}class="active"{{ end }} href="{{ .Site.BaseURL }}">Blog</a></li>
+        <li><a class="site-nav__btn {{- if eq $currentPage (printf "%s" .Site.BaseURL) }} active {{- end }}" href="{{ .Site.BaseURL }}">Blog</a></li>
         {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
           {{ with $.Site.GetPage (printf "/categories/%s" $name) }}
-            <li><a {{ if eq $currentPage .Permalink }}class="active"{{ end }} href="{{ .Permalink }}">{{ $name }}</a></li>
+            <li><a class="site-nav__btn {{ if eq $currentPage .Permalink }} active {{ end }}" href="{{ .Permalink }}">{{ $name }}</a></li>
           {{ end }}
         {{ end }}
       </ul>
     </nav>
   </header>
 
-  <div id="wrapper">
-    <div id="content" class="container-centered">
+  <div class="site-wrapper">
+    <main class="site-content">
       {{ block "main" . }}{{ end }}
-    </div>
+    </main>
     {{- partial "footer.html" . -}}
   </div>
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ddd6c6b..ab51067 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,20 +1,19 @@
 {{ define "main" }}
-<main class="content" role="main">
   {{ $paginator := .Paginate (where .Pages "Type" "post") }}
   {{ range $paginator.Pages }}
-    <article class="blog-entry">
-      <header>
-        <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+    <article class="post">
+      <header class="post__header">
+        <h2 class="post__title"><a class="post__header--link" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
       </header>
 
-      <div class="entry-body">
+      <section class="post__content">
         {{ .Summary }}
         {{ if .Truncated }}
           <div>
-            <br><a class="read_more block_level" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen </a>
+            <br><a class="post__content--more" title="Lese den kompletten Artikel" href="{{ .RelPermalink }}">Weiterlesen </a>
           </div>
         {{ end }}
-      </div>
+      </section>
 
       <footer>
         <span class="break-wordwrap outline">
@@ -48,5 +47,4 @@
     </article>
   {{ end }}
   {{ partial "pagination.html" . }}
-</main>
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3b28a79..b98b828 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,10 +1,10 @@
 {{ define "main" }}
 <main class="content" role="main">
-  <article class="post page">
-    <header class="post-header">
-      <h2 class="post-title">{{ .Title }}</h2>
+  <article class="post">
+    <header>
+      <h2 class="title">{{ .Title }}</h2>
     </header>
-    <section class="post-content">
+    <section class="content">
       {{ .Content }}
     </section>
   </article>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 592bb3d..e4622d1 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,15 +1,15 @@
-<footer id="footer">
+<footer class="footer">
     {{ .Site.RSSLink }}
-	<div class="container-centered">
+	<div class="footer__block">
     {{ with .OutputFormats.Get "atom" -}}
-      <span class="quickmenu-icon"><i class="fas fa-rss"></i> <a href="{{ .Permalink }}">Feed</a></span>
+      <span class="footer__btn"><i class="fas fa-rss"></i> <a class="footer__btn--link" href="{{ .Permalink }}">Feed</a></span>
     {{ end }}
-    <span class="quickmenu-icon"><i class="fas fa-envelope"></i> <a href="#">Kontakt</a></span>
-    <span class="quickmenu-icon"><i class="fas fa-user-lock"></i> <a href="#">Impressum/Datenschutz</a></span>
-    <span>Artikel unter <a class="cc-license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> BY-NC-SA 4.0</a></span>
+    <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>
   </div>
-  <div class="container-centered">
-    Build with <a href="https://gohugo.io/">Hugo</a> and <i class="fas fa-heart"></i><br/>
-    Hosted on <a href="https://uberspace.de/">Uberspace</a>
+  <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>
 </footer>
diff --git a/static/_css/style.css b/static/_css/style.css
index 3cecfb7..d0878c5 100644
--- a/static/_css/style.css
+++ b/static/_css/style.css
@@ -28,19 +28,9 @@ html{
     box-sizing: inherit;
 }
 
-
 /*
     Global Helper Classes
 */
-.serendipity_edit_nugget{
-    display:none;
-}
-
-.container-centered{
-    margin:0 auto;
-    width:80%;
-    max-width:980px;
-}
 .table{
     display:table;
 }
@@ -54,77 +44,49 @@ html{
     clear:both;
 }
 
-span#mailinvite::before,
-span#mailinvite:before{
-    content: "mail\40";
-}
-span#mailinvite::after,
-span#mailinvite:after{
-    content: ".de";
-}
-#badmail,
-.serendipity_comment_s9ymarkup,
-.serendipity_comment_emoticate,
-.serendipity_comment_spamblock,
-.serendipity_comment_gravatar,
-.serendipity_comment_markdown,
-.comment_phone_input
-{
-    display:none;
-}
-.comment_avatar{
-    border-radius: 50%;
-    width: 64px;
-    height: 64px;
-}
-#trackbacks a {
-    white-space: nowrap;
-    margin: 0.5em 0 0;
-    display: inline-block;
-}
-
 
 /*
     Global Blog Header
 */
-header.main .banner {
+.site-header {
     background: #4186C9;
     padding: 2em 0;
     text-align: center;
     color: #FFF;
 }
-header.main .icon {
+.site-header__icon {
     font-size: 2.5em;
     background: #FFF;
     padding: 0 0.25em;
     border-radius: 50%;
     color: #4186C9;
 }
-header.main .title {
+.site-header__title {
     font-size: 2.5em;
     font-family:CreteRound;
     font-weight: normal;
     padding-left: 0.3em;
 }
-header.main .underline {
+.site-header__description {
     display: block;
     margin: 0.8em 0 0.5em;
 }
-header.main nav,
-header.main div.mobile {
+.site-nav,
+.site-nav__mobile {
     background: #2F333E;
     text-align: center;
     color: #D9D9D9;
 }
-header.main nav.default,
-header.main nav.default.visible {
+.site-nav {
     display: block;
 }
-header.main div.mobile {
+.site-nav__mobile {
     display: none;
 }
-header.main a,
-div.mobile span{
+.site-nav__mobile span {
+    margin: 0.8em 0;
+}
+.site-nav__btn{
     color: #D9D9D9;
     text-decoration: none;
     padding: 0.2em 0.5em;
@@ -132,82 +94,57 @@ div.mobile span{
     border-radius: 6px;
     display: inline-block;
 }
-header.main a:hover,
-header.main a.active,
-div.mobile span:hover {
+.site-nav__btn:hover,
+.site-nav__btn.active {
     background: #3D4352;
     cursor: pointer;
 }
-header.main nav ul{
+.site-nav__list{
     margin:0;
     padding: 0.8em 0;
 }
-header.main nav ul li {
+.site-nav__list li {
     display:inline-block;
     margin: 0 0.3em;
 }
 
-div.mobile span {
-    margin: 0.8em 0;
-}
-#mobile-menu{
-    display:none;
-}
-
-
 /*
     Content Section
 */
-#wrapper {
+.site-wrapper {
     position: relative;
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
-#content{
-    padding-bottom:110px;
+.site-content,
+.footer__block {
+    margin:0 auto;
+    width:80%;
+    max-width:980px;
 }
-#content .blog-entry:first-child{
-    border:0;
-}
-h2 {
-    font-weight: normal;
-}
-.blog-entry,
-#entry-comment{
+
+.post {
     word-wrap: break-word;
     border-top:1px dashed #959595;
-    padding:1.5em 0;
+    margin: 1.5em 2em;
 }
-.serendipity_staticpage {
-    border: none;
+.post:first-child{
+    border:0;
 }
-.blog-entry,
-#entry-comment,
-#pagenav{
-   margin-left: 2em;
-   margin-right: 2em;
-}
-
-.blog-entry img{
-    max-width: 100%;
-    height: auto;
-}
-
-.blog-entry header a{
+.post__header--link {
     color:#000000;
     text-decoration: none;
 }
-.blog-entry header a:hover{
+.post__header--link:hover{
     text-decoration: underline;
 }
+.post__title {
+    font-weight: normal;
+}
 
-.blog-entry .entry-body a,
-.blog-entry .entry-body-extended a,
-.blog-entry .entry-extended a,
-.blog-entry footer a,
-.serendipity_staticpage a,
-#entry-comment a{
+.post__content--more,
+.blog-entry footer a {
     color:#0A539A;
     text-decoration: underline;
 }
@@ -231,12 +168,8 @@ h2 {
 #comments{
     padding-bottom:1em;
 }
-.blog-entry .entry-body a:hover,
-.blog-entry .entry-body-extended a:hover,
-.blog-entry .entry-extended a:hover,
-.blog-entry footer a:hover,
-.serendipity_staticpage a:hover,
-#entry-comment a:hover{
+
+.post__content--more:hover {
     background:#0A539A;
     color:#FFFFFF;
     text-decoration:none;
@@ -251,28 +184,16 @@ h2 {
     text-decoration:none;
     cursor:pointer;
 }
-#comments .viewmode-active{
-    background:#EAEAEA;
-}
-a.read_more:after{
+
+.post__content--more:after {
     content:' \f30b';
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
 }
-a.read_more{
+.post__content--more {
     margin-bottom: 1.5em;
     display: inline-block;
 }
-
-a.cc-license:before{
-    content:' \f25e';
-    font-family: 'Font Awesome 5 Brands';
-}
-a.cc-license{
-    margin-bottom: 1.5em;
-    display: inline-block;
-}
-
 #trackbacks{
     padding:3em 0 1.5em 0;
 }
@@ -357,16 +278,6 @@ a.cc-license{
     padding-right:10px;
 }
 
-.serendipity_image_left{
-    display:block;
-    float: left;
-    margin: 0 2em 1em 0
-}
-.serendipity_image_center {
-    display: block;
-    margin: 0 auto 1em auto;
-}
-
 .geshi{
     font-size:13px!important;
     font-family: monospace;
@@ -380,29 +291,30 @@ a.cc-license{
 /*
     Global Blog Footer
 */
-#footer {
+.footer {
     position: absolute;
-    bottom: 0px;
+    bottom: -7.6em;
     width: 100%;
-    background:#2F333E;
-    color:#FFFFFF;
-    padding:10px 0;
+    background: #2F333E;
+    color: #FFFFFF;
+    padding: 1em 0;
 }
-#footer div{
+.footer__block {
     line-height:30px;
 }
-#footer a{
+.footer__btn--link {
     color:#FFA31E;
     text-decoration:underline;
 }
-#footer a:hover{
+.footer__btn--link:hover{
     background:#FFA31E;
     color:#000000;
     text-decoration:none;
 }
-#footer .quickmenu-icon{
+.footer__btn {
     margin:0 10px 0 0;
 }
+
 /* page navigation */
 #pagenav{
     margin-top:1em;
@@ -438,156 +350,6 @@ a.cc-license{
 }
 
 
-/*
-    search field
-*/
-#serendipityQuickSearchTermField{
-    height: 2em;
-    width: 15em;
-    border: 1px solid #595959;
-    border-radius: 6px;
-    font-size: 1.2em;
-    font-family:OpenSansLight, Arial;
-    padding:0 2em 0 2em;
-    margin: 1.5em 0 0 0;
-}
-.serendipity_searchQuery{
-    background:#FAFF86;
-}
-i.fa-search {
-    position: absolute;
-    color: #A6A6A6;
-    font-size: 1.2em;
-    top: 2em;
-    padding: 0 0.5em;
-}
-header.main .wrapper {
-    position: relative;
-}
-
-/*
-    contact form
-*/
-.input-group {
-    position: relative;
-    display: table;
-    border-collapse: separate;
-    width:55%;
-}
-.input-group-addon:first-child {
-    border-right: 0px none;
-}
-.input-group .form-control:first-child, .input-group-addon:first-child{
-    border-bottom-right-radius: 0px;
-    border-top-right-radius: 0px;
-}
-.input-group-addon {
-    padding: 6px 12px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 1;
-    color: #555;
-    text-align: center;
-    background: #EEE;
-    border: 1px solid #CCC;
-    width: 1%;
-    white-space: nowrap;
-    vertical-align: middle;
-}
-.margin-bottom-sm {
-    margin-bottom: 5px !important;
-    display:table;
-}
-.input-group .form-control:last-child,
-.input-group-addon:last-child {
-    border-bottom-left-radius: 0px;
-    border-top-left-radius: 0px;
-}
-.input-group .form-control {
-    position: relative;
-    z-index: 2;
-    float: left;
-    width: 100%;
-    margin-bottom: 0px;
-}
-.form-control {
-    display: block;
-    width: 100%;
-    height: 34px;
-    padding: 6px 12px;
-    font-size: 14px;
-    line-height: 1.42857;
-    color: #555;
-    background-color: #FFF;
-    border: 1px solid #CCC;
-}
-#serendipity_comment textarea{
-    position:relative;
-    font-family:OpenSans;
-    border: 1px solid #CCC;
-    padding:5px;
-    width:80%;
-    max-width: 100%;
-    min-height:180px;
-    margin:2% 0;
-}
-
-form#serendipity_comment{
-    margin:25px 0 0 0;
-}
-.serendipity_comment{
-    position:relative;
-    margin:0 0 10px 0;
-}
-.serendipity_comment.commentlevel-0 { margin-top:35px; }
-.commentlevel-1 { padding-left: 1em; }
-.commentlevel-2 { padding-left: 2em; }
-.commentlevel-3 { padding-left: 3em; }
-.commentlevel-4 { padding-left: 4em; }
-.commentlevel-5 { padding-left: 5em; }
-.commentlevel-6 { padding-left: 6em; }
-.commentlevel-7 { padding-left: 7em; }
-.commentlevel-8 { padding-left: 8em; }
-.commentlevel-9 { padding-left: 9em; }
-.serendipity_comment h4{
-    padding:0;
-    margin:0;
-}
-.serendipity_comment .table-cell{
-    vertical-align:top;
-
-}
-.serendipity_comment div.avatar{
-    position:absolute;
-}
-#entry-comment .serendipity_comment div.content{
-    margin-left:75px;
-}
-.manage_comments{
-    margin-bottom:25px;
-}
-#serendipity_comment .form_button{
-    margin:20px 0 0 0;
-}
-#serendipity_comment .form_button input{
-    margin:0 10px 0 0;
-}
-#contacts{
-    padding:20px 0 0 0;
-}
-#contacts div{
-    padding:2px 0;
-}
-#serendipity_replyTo{
-    width: 39%;
-    height: 30px;
-    font-size: 14px;
-}
-
-.content_msg {
-    display: none;
-}
-
 @media all and (max-device-width: 900px),
 all and (max-width: 900px){
     .container-centered{
@@ -623,10 +385,10 @@ all and (max-width: 900px){
     header.main nav.default {
         display: none;
     }
-    header.main div.mobile {
+    .site-nav__mobile {
         display: block;
     }
-    header.main .banner {
+    .site-header__banner{
         padding-left: 1em;
         padding-right: 1em;
     }
