design update based on gyorb/master #41

CHANGELOG.md

@@ -13,6 +13,10 @@
   * code block background now transparent
   * date format now D Mon YYYY
   * theme colors are changed via css file
+  * titles, tags, list of posts are not so dense as before
+  * default colors were fine tuned
+  * some other small layout changes
+    
 
 ### Fixed
   * fix breaking change in mainSections introduced in Hugo v0.57.0

README.md

@@ -72,5 +72,5 @@ pygmentsCodeFences = true
   twitter = "twitter id"
   linkedin = "linkedin id"
   email = "myemail"
-  theme_colors = "color-dark"
+  theme_colors = "default-dark" #uses color css file under static/css/default-dark.css
 ~~~~

exampleSite/config.toml

@@ -1,6 +1,6 @@
 baseurl = "/"
 title = "Hugo Themes"
-copyright = "Copyright (c) 2008 - 2014, all rights reserved."
+copyright = "Copyright (c) 2019, all rights reserved."
 languageCode = "en-US"
 canonifyurls = true
 paginate = 3
@@ -49,4 +49,4 @@ pygmentsCodeFences = true
   #gitlab = "gitlab id"
   twitter = "twitter id"
   #linkedin = "linkedin id"
-  theme_colors = "color-dark"
+  theme_colors = "default-dark"

layouts/_default/li.html

@@ -1,7 +1,10 @@
 <div class="content-item">
+
     <a href="{{ .Permalink }}">
-    <div class="post-list"> <h3 class="title"> {{ .Title }} </h3> </div>
+      <div class="post-list"> <h3 class="title"> {{ .Title }} </h3> </div>
     </a>
-    {{ partial "tags.html" . }}
-    <div class="date"> {{ .Date.Format "2 Jan 2006" }} </div>
+    <div class="meta">
+      {{ partial "tags.html" . }}
+      <div class="date"> {{ .Date.Format "2 Jan 2006" }} </div>
+    </div>
 </div>

layouts/_default/list.html

@@ -6,12 +6,10 @@
 
 <div class="content-list">
 {{ range .Data.Pages.GroupByDate "2006" }}
-<div class="content-list-date">{{ .Key }}</div>
   {{ range .Pages }}
   {{ .Render "li"}}
   {{ end }}
 {{ end }}
-</div>
 
 
 {{ partial "footer.html" . }}

layouts/_default/summary.html

@@ -3,7 +3,9 @@
   <header>
     <h2 class="title"> <a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
     <div class="meta">
+      <div class="date">
       {{ .Date.Format "2 Jan 2006" }} - {{ .ReadingTime }} minutes
+      </div>
       {{ partial "tags.html" . }}
     </div>
 
@@ -14,7 +16,7 @@
   </div>
 
   <div class="rmore">
-    <a href='{{ .Permalink }}' class="rmore">Read more ...</a>
+    <a href='{{ .Permalink }}' class="rmore">Read more</a>
   </div>
 
 

layouts/partials/head.html

@@ -17,7 +17,7 @@
 {{ if isset .Site.Params "theme_colors" }}
 <link rel="stylesheet" href="/css/{{ .Site.Params.theme_colors }}.css" />
 {{ else }}
-<link rel="stylesheet" href="/css/color-dark.css" />
+<link rel="stylesheet" href="/css/default-dark.css" />
 {{ end }}
 
 {{ template "_internal/google_analytics_async.html" . }}

layouts/partials/header.html

@@ -21,8 +21,9 @@
 
   </nav>
   <hr/>
-</div>
 
   {{ partial "social-links.html" . }}
 
+</div>
+
 </header>

static/css/color-dark.css

@@ -1,33 +0,0 @@
-
-/*
- * main green: #99cc66
- * */
-
-body { background: #101010; color: #dbdbdb; }
-a { color: #dbdbdb; }
-pre { background: #1D1F21; border: 1px solid #5C5C5C; border-radius: 5px; }
-code { background: #1D1F21; }
-blockquote { background: #1D1F21; border-left: 3px solid #99cc66; }
-table { margin: 1em auto; border-collapse: collapse; }
-table, th, td { border: 1px solid #5C5C5C; }
-tr:hover { background: #1D1F21; }
-th { background: #1D1F21; }
-.siteTitle a { color: #99cc66; }
-.post .content h1{ color: #99cc66; }
-.post .content h2{ color: #99cc66; }
-.post .content h3{ color: #99cc66; }
-.post .content h4{ color: #99cc66; }
-.post .content h5{ color: #99cc66; }
-.post .content h6{ color: #99cc66; }
-.post .content a:hover { color: #99cc66; }
-.social-link:hover { color: #99cc66; }
-.nav-item-title:hover { color: #99cc66; }
-.tag a:hover { color: #99cc66; }
-.copyright { color: #404040; }
-.poweredby { color: #404040; }
-.poweredby a { color: #404040; }
-.post-preview .title a{ color: #99cc66; }
-.content-item a:hover{ text-decoration: underline; color: #99cc66; }
-.post-list .title { color: #99cc66; }
-.rmore { color: #dbdbdb; }
-.terms .term a:hover { text-decoration: underline; color: #99cc66; }

static/css/layout.css

@@ -2,13 +2,11 @@ body {
   font-family: "Arial", Gadget, sans-serif;
   counter-reset: heading;
   margin: 0;
-  padding: 1em 0.5em 0.5em 0.5em;
-
 }
 
 .main {
-  margin: 0 auto;
-  max-width: 64em;
+  margin: auto;
+  max-width: 42em;
 }
 
 img {
@@ -29,7 +27,7 @@ figcaption {
 }
 
 iframe {
-  max-width: 64em;
+  max-width: 42em;
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -40,24 +38,25 @@ li {
 }
 
 p {
+  line-height: 1.4em;
  }
 
-h1 { font-size: 2.75em;
+h1 { font-size: 2em;
      font-weight: normal;
 }
-h2 { font-size: 2.25em;
+h2 { font-size: 1.5em;
      font-weight: normal;
 }
-h3 { font-size: 2em;
+h3 { font-size: 1.17em;
      font-weight: normal;
 }
-h4 { font-size: 1.5em;
+h4 { font-size: 1.12em;
      font-weight: normal;
 }
-h5 { font-size: 1.25em;
+h5 { font-size: .83em;
      font-weight: normal;
 }
-h6 { font-size: 1em;
+h6 { font-size: .75em;
      font-weight: normal;
 }
 
@@ -122,7 +121,7 @@ th, td {
 
 /* site title  */
 .siteTitle {
-  font-size: 3.5em;
+  font-size: 2.75em;
   margin-bottom: 0.1em;
 }
 
@@ -139,6 +138,12 @@ th, td {
   flex-flow: row wrap;
 }
 
+.post {
+  margin-top: 1.5em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
 .post .title {
   text-align: center;
 }
@@ -160,11 +165,11 @@ th, td {
 }
 
 .post .content h4{
-  margin: .5em 0em;
+  margin: .75em 0em;
 }
 
 .post .content h5{
-  margin: .5em 0em;
+  margin: .75em 0em;
 }
 
 .post .content p{
@@ -191,6 +196,20 @@ th, td {
   font-size: 0.9em;
 }
 
+.content-item {
+  margin-top: 0.5em;
+  padding: 0.1em 0.3em 0.5em 0.3em
+}
+
+.content-item .meta{
+  margin-top: 0.5em;
+  padding-top: 0.5em;
+  display: -webkit-flex;
+  display:flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .content-item .tags {
   margin-bottom: 0.2em;
   font-size: 0.7em;
@@ -200,6 +219,7 @@ th, td {
   font-size: 0.7em;
   font-weight: bold;
   white-space: nowrap;
+  text-align: right;
 }
 
 .post-footer-menu {
@@ -279,7 +299,7 @@ th, td {
 
 .social-link {
   margin: 0.2em;
-  font-size: 1.5em;
+  font-size: 1.2em;
 }
 
 .social-link:hover {
@@ -308,7 +328,7 @@ th, td {
 }
 
 .post-list .title {
-  margin-bottom: 0em;
+  margin: 0em;
 }
 
 .tag {
@@ -323,9 +343,15 @@ th, td {
 
 .post-preview {
   text-decoration: none;
+  padding-bottom: 1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
 }
 
 .post-preview .title {
+  margin-top: 0.3em;
   margin-bottom: 0.3em;
 }
 
@@ -334,7 +360,8 @@ th, td {
 }
 
 .post-preview .summary {
-  margin-top: 0.2em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
   line-height: 1.4em;
 }
 
@@ -349,8 +376,15 @@ th, td {
 .post-preview .meta {
   font-size: 0.8em;
   font-weight: bold;
-  padding-bottom: 0.3em;
-  padding-top: 0.3em;
+  padding: 0.3em 1em 0.5em 1em;
+  text-align: left;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.post-preview .date {
+  font-weight: bold;
   text-align: left;
 }
 
@@ -360,11 +394,24 @@ th, td {
 }
 
 .rmore {
+  margin-top: 0.5em;
   white-space:nowrap;
-  text-decoration: underline;
+  text-align: right;
+}
+
+.rmore a {
+  border-radius: 0.2em;
+  padding: 0.3em;
 }
 
 /* terms list */
+.terms {
+  border-radius: 0.2em;
+  width: 50%;
+  margin: auto;
+  margin-bottom: 1em;
+}
+
 .terms a {
   font-size: 1.2em;
   text-decoration: none;
@@ -416,6 +463,7 @@ th, td {
 .sitemap {
     margin: auto;
     width: 50%;
+    font-size: 1.4em;
 }
 
 @media only screen and (min-width: 400px) {