Switch div and a

This ensures, that you can click the button on the whole space and not only on the link-text inside the div.

5 files changed, 58 insertions, 60 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 749e7ea..9bcf660 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -59,12 +59,12 @@
           <div class="author-bio">{{ . }}</div>
         {{ end }}
         {{ with $author.contact }}
-        <div class="btn btn-primary author-contact">
-          <a href="{{ . }}">
-            <i class="fa fa-envelope-o" aria-hidden="true"></i>
-            &nbsp;{{ i18n "contactMe" }}
+          <a class="btn btn-primary author-contact" href="{{ . }}">
+            <div>
+              <i class="fa fa-envelope-o" aria-hidden="true"></i>
+              &nbsp;{{ i18n "contactMe" }}
+            </div>
           </a>
-        </div>
         {{ end }}
       </div>
       {{ end }}
@@ -72,30 +72,30 @@
     <div class="delimiter"></div>
     <div class="pager-container">
       {{ if .Next }}
-        <div class="btn btn-primary btn-older-posts">
-          <a href="{{ .Next.Permalink }}">
+        <a class="btn btn-primary btn-older-posts" href="{{ .Next.Permalink }}">
+          <div>
             <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
-          </a>
-        </div>
+          </div>
+        </a>
       {{ else }}
-        <div class="btn btn-primary btn-older-posts disabled">
-          <a href="#">
+        <a class="btn btn-primary btn-older-posts disabled" href="#">
+          <div>
             <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
-          </a>
-        </div>
+          </div>
+        </a>
       {{ end }}
       {{ if .Prev }}
-        <div class="btn btn-primary btn-newer-posts">
-          <a href="{{ .Prev.Permalink }}">
+        <a class="btn btn-primary btn-newer-posts" href="{{ .Prev.Permalink }}">
+          <div>
             {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
-          </a>
-        </div>
+          </div>
+        </a>
       {{ else }}
-        <div class="btn btn-primary btn-newer-posts disabled">
-          <a href="#">
+        <a class="btn btn-primary btn-newer-posts disabled" href="#">
+          <div>
             {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
-          </a>
-        </div>
+          </div>
+        </a>
       {{ end }}
     </div>
   </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index a6b9b78..47215f6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -29,7 +29,7 @@
     {{ if ne .URL "/" }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }}
   </title>
 
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.min.css" />
+  <link rel="alternative stylesheet" href="{{ .Site.BaseURL }}css/bootstrap.min.css" />
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/font-awesome.min.css" />
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/github.css" />
@@ -56,7 +56,7 @@
       </h3>
       {{ end }}
       {{ if ne ( trim .URL "/" ) .Site.Language.Lang }}
-      <a href="{{ "/" | absLangURL }}" class="btn btn-default btn-home">
+      <a class="btn btn-default btn-home" href="{{ "/" | absLangURL }}">
         <i class="fa fa-angle-left" aria-hidden="true"></i>
         &nbsp;{{ i18n "home" }}
       </a>
@@ -64,11 +64,9 @@
       <!-- sites -->
       <div class="navbar-container">
         {{ range .Site.Menus.main }}
-          <div class="btn btn-default navbar-item">
-            <a href="{{ .URL | absLangURL | safeURL }}">
-              {{ .Name }}
-            </a>
-          </div>
+          <a class="btn btn-default navbar-item" href="{{ .URL | absLangURL | safeURL }}">
+            {{ .Name }}
+          </a>
         {{ end }}
       </div>
       <!-- Languages -->
@@ -77,9 +75,7 @@
       {{ if .IsTranslated }}
       <div class="language-container">
         {{ range .Site.Home.AllTranslations }}
-          <div class="btn btn-default language-button">
-            <a href="{{ .URL }}{{ strings.TrimPrefix "/" $path }}">{{ .Language.LanguageName }}</a>
-          </div>
+        <a class="btn btn-default language-button" href="{{ .URL }}{{ strings.TrimPrefix "/" $path }}">{{ .Language.LanguageName }}</a>
         {{ end }}
       </div>
       {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index f2c7cc4..a7aa9ed 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -2,25 +2,33 @@
   <div class="delimiter"></div>
   <nav class="pagination" role="navigation">
     {{ if .HasNext }}
-      <div class="btn btn-primary btn-older-posts">
-        <a href="{{ .Next.URL }}"><span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}</a>
-      </div>
+      <a class="btn btn-primary btn-older-posts" href="{{ .Next.URL }}">
+        <div>
+          <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
+        </div>
+      </a>
     {{ else }}
-      <div class="btn btn-primary btn-older-posts disabled">
-        <a href="#"><span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}</a>
-      </div>
+      <a class="btn btn-primary btn-older-posts disable" href="#">
+        <div>
+          <span aria-hidden="true">&larr;</span> {{ i18n "olderPosts" }}
+        </div>
+      </a>
     {{ end }}
     <div>
       <span>{{ i18n "pageOf" . }}</span>
     </div>
     {{ if .HasPrev }}
-      <div class="btn btn-primary btn-newer-posts">
-        <a href="{{ .Prev.URL }}">{{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span></a>
-      </div>
+      <a class="btn btn-primary btn-newer-posts" href="{{ .Next.URL }}">
+        <div>
+          {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
+        </div>
+      </a>
     {{ else }}
-      <div class="btn btn-primary btn-newer-posts disabled">
-        <a href="#">{{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span></a>
-      </div>
+      <a class="btn btn-primary btn-newer-posts disable" href="#">
+        <div>
+          {{ i18n "newerPosts" }} <span aria-hidden="true">&rarr;</span>
+        </div>
+      </a>
     {{ end }}
   </nav>
 {{ end }}
diff --git a/static/css/color-theme.css b/static/css/color-theme.css
index cd24050..419f10d 100644
--- a/static/css/color-theme.css
+++ b/static/css/color-theme.css
@@ -2,6 +2,7 @@
 From material design color palette:
 
 #f1f8e9 - Light Green  50
+#7cb342 - Light Green 600
 #558b2f - Light Green 800
 #33691e - Light Green 900
 
@@ -51,11 +52,6 @@ From material design color palette:
     color: #0000004d;
 }
 
-/* Color for e.g. headers and links */
-.text-primary, a {
-    color: #558b2f;
-}
-
 a:hover {
     color: #33691e;
 }
@@ -91,23 +87,25 @@ TODO Remove older-posts and newer-posts, when the "pagination.html" also uses th
     border-color: #98a0a4;
 }
 
-.btn {
-    border: 1px solid transparent;
+/* Color for e.g. headers and links */
+.text-primary, a {
+    color: #558b2f;
 }
 
 /* Primary buttons are the ones in the page (not in the header) */
 .btn-primary {
     background-color: transparent;
-    border-color: #ccc;
+    border-color: #7cb342;
+    color: #558b2f;
 }
 
 .btn-primary:hover {
-    color: #fff;
+    color: #33691e;
     background-color: #fff;
-    border-color: #558b2f;
+    border-color: #33691e;
 }
 
-.btn-primary.disabled, .btn-primary.disabled > a {
+.btn-primary.disabled, a.btn-primary.disabled {
     color: #616161;
     background-color: #fff;
     border-color: #bdbdbd;
@@ -120,10 +118,6 @@ TODO Remove older-posts and newer-posts, when the "pagination.html" also uses th
   border-color: #fff;
 }
 
-.btn-default > a {
-  color: #fff;
-}
-
 .btn-default:hover {
     color: #fff;
     background-color: #bdbdbd4d;
diff --git a/static/css/main.css b/static/css/main.css
index 365eedb..122168f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -38,7 +38,7 @@ main {
     text-decoration: none;
 }
 
-a.btn-home {
+.btn-home {
     position: absolute;
     left: 20px;
     top: 20px;
@@ -224,7 +224,7 @@ small, .small {
   font-size: 80%;
 }
 
-.btn > a:hover {
+a > .btn:hover {
   text-decoration: none;
 }