1 files changed, 179 insertions, 38 deletions

diff --git a/themes/hugo-xmag/static/css/style.css b/themes/hugo-xmag/static/css/style.css
index 40f6622..0903a7c 100644
--- a/themes/hugo-xmag/static/css/style.css
+++ b/themes/hugo-xmag/static/css/style.css
@@ -3,40 +3,72 @@ body {
   line-height: 1.5em;
   background: #fafafa;
 }
-.header div, .container, .copyright, .menu {
+
+.header div,
+.container,
+.copyright,
+.menu {
   max-width: 1100px;
   margin: auto;
   padding: 0 15px;
 }
-.page .header div, .page .container, .page .copyright, .page .menu { max-width: 900px; }
-.container { hyphens: auto; }
+
+.page .header div,
+.page .container,
+.page .copyright,
+.page .menu {
+  max-width: 900px;
+}
+
+.container {
+  hyphens: auto;
+}
+
 @media (max-width: 930px) {
-  .page .container { padding: 0; }
+  .page .container {
+    padding: 0;
+  }
+}
+
+main {
+  margin-bottom: 15px;
 }
-main { margin-bottom: 15px; }
 
 /* header and footer areas */
 .header {
-  border-top: 5px solid #666;
-  border-bottom: 4px double #666;
+  border-top: 5px solid #0f145d;
+  border-bottom: 4px double #0f145d;
   text-align: center;
   padding: 15px 0 5px;
 }
-.head-meta, .menu {
+
+.head-meta,
+.menu {
   display: flex;
   justify-content: space-between;
 }
-.header, .list section, article { background: #fff; }
-.banner { font-size: 4em; }
+
+.header,
+.list section,
+article {
+  background: #fff;
+}
+
+.banner {
+  font-size: 4em;
+}
+
 .banner .text {
   display: block;
   line-height: 1em;
 }
+
 .list {
   display: flex;
   flex-wrap: wrap;
   margin-left: -15px;
 }
+
 .list section {
   flex: 1 0 350px;
   box-sizing: border-box;
@@ -45,60 +77,137 @@ main { margin-bottom: 15px; }
   padding: 1em;
   overflow-x: hidden;
 }
+
 @media (max-width: 380px) {
-  .list section { flex: auto; }
+  .list section {
+    flex: auto;
+  }
 }
+
 @media (min-width: 715px) {
-  .list section { max-width: calc(50% - 15px); }
+  .list section {
+    max-width: calc(50% - 15px);
+  }
+
   .article-list h1 {
     overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .article-list h1:hover { white-space: inherit; }
+
+  .article-list h1:hover {
+    white-space: inherit;
+  }
 }
+
 @media (min-width: 1080px) {
-  .list section { max-width: calc(33.33333% - 15px); }
+  .list section {
+    max-width: calc(33.33333% - 15px);
+  }
+}
+
+.article-list a,
+.banner a {
+  color: #000;
 }
-.article-list a, .banner a { color: #000; }
+
 .categories a {
   font-size: .9em;
   font-weight: bolder;
   text-transform: uppercase;
   color: #666;
 }
-h1 a:hover { text-decoration: underline; }
-.article-list h1 { margin: .2em auto .2em 0; }
-article { padding: 1em; }
+
+h1 a:hover {
+  text-decoration: underline;
+}
+
+.article-list h1 {
+  margin: .2em auto .2em 0;
+}
+
+article {
+  padding: 1em;
+}
+
 .article-meta {
   text-decoration: none;
   background: #eee;
   padding: 5px;
   border-radius: 5px;
 }
-.menu, .article-meta, footer, .post-nav { text-align: center; }
-.article-footer { text-align: left; }
-.title { font-size: 1.2em; }
-.article-list h1, .title { line-height: 1.2em; }
-.article-list a, .header a, footer a, .categories a, .active a, .comments a { text-decoration: none; }
-.pagination { text-align: center; }
-.pagination li, .terms li { display: inline; }
-.pagination a { padding: 0 .2em; }
+
+.menu,
+.article-meta,
+footer,
+.post-nav {
+  text-align: center;
+}
+
+.article-footer {
+  text-align: left;
+}
+
+.title {
+  font-size: 1.2em;
+}
+
+.article-list h1,
+.title {
+  line-height: 1.2em;
+}
+
+.article-list a,
+.header a,
+footer a,
+.categories a,
+.active a,
+.comments a {
+  text-decoration: none;
+}
+
+.pagination {
+  text-align: center;
+}
+
+.pagination li,
+.terms li {
+  display: inline;
+}
+
+.pagination a {
+  padding: 0 .2em;
+}
+
 .footer {
-  background: #666;
+  background: #0f145d;
   padding: 1em 0;
 }
-.footer, .footer a { color: #fff; }
-.copyright, .copyright a { color: #ccc; }
+
+.footer,
+.footer a {
+  color: #fff;
+}
+
+.copyright,
+.copyright a {
+  color: #ccc;
+}
+
 .menu {
   margin-bottom: .5em;
   flex-wrap: wrap;
 }
+
 .menu li {
   display: inline-block;
   font-weight: bolder;
 }
-.menu a { padding: .5em; }
+
+.menu a {
+  padding: .5em;
+}
+
 .menu a:hover {
   color: #000;
   background: #fff;
@@ -115,7 +224,11 @@ pre {
   box-shadow: 5px 5px 5px #eee;
   overflow-x: auto;
 }
-code { background: #f9f9f9; }
+
+code {
+  background: #f9f9f9;
+}
+
 pre code {
   background: none;
   padding: .5em;
@@ -123,7 +236,12 @@ pre code {
 }
 
 /* misc elements */
-img, iframe, video { max-width: 100%; }
+img,
+iframe,
+video {
+  max-width: 100%;
+}
+
 blockquote {
   background: #f9f9f9;
   border-left: 5px solid #ccc;
@@ -135,9 +253,19 @@ table {
   border-top: 1px solid #666;
   border-bottom: 1px solid #666;
 }
-table thead th { border-bottom: 1px solid #ddd; }
-th, td { padding: 5px; }
-tr:nth-child(even) { background: #eee }
+
+table thead th {
+  border-bottom: 1px solid #ddd;
+}
+
+th,
+td {
+  padding: 5px;
+}
+
+tr:nth-child(even) {
+  background: #eee
+}
 
 .thumbnail {
   height: 5.1em;
@@ -147,28 +275,41 @@ tr:nth-child(even) { background: #eee }
   margin: 5px 8px 5px 0;
   box-shadow: 0 0 8px #666;
 }
+
 .thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-#TableOfContents, #TOC, .comments {
+
+#TableOfContents,
+#TOC,
+.comments {
   border: 1px solid #eee;
   border-radius: 5px;
 }
+
 .comments a {
   display: inline-block;
   width: 100%;
   text-align: center;
   font-size: 1.2em;
 }
-.terms { padding-left: 0; }
+
+.terms {
+  padding-left: 0;
+}
+
 .post-nav {
   margin: .5em 0;
   display: flex;
   justify-content: space-between;
 }
-.footnotes { font-size: .9em; }
+
+.footnotes {
+  font-size: .9em;
+}
+
 .footnotes hr {
   width: 50%;
   margin-left: 0;