[camel-website] branch master updated: refactor: responsive blog design fixes

[zregvart]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 23281d2  refactor: responsive blog design fixes
23281d2 is described below

commit 23281d2281289dca04515098bdc079ade7d9417b
Author: Zoran Regvart <zregv...@apache.org>
AuthorDate: Tue Sep 17 08:54:04 2019 +0200

    refactor: responsive blog design fixes
---
 antora-ui-camel/src/css/blog.css | 83 ++++++++++++++++++++++++----------------
 layouts/blog/list.html           |  4 +-
 2 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index b9f70e1..0e3dea7 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -3,41 +3,21 @@
   margin: var(--static-margin);
 }
 
-.list {
+.blog.list {
   display: flex;
+  flex-direction: column-reverse;
 }
 
-.list aside {
+.blog.list aside {
   margin-top: 2.5rem;
   padding-right: 2rem;
   line-height: 2rem;
 }
 
-@media screen and (min-width: 1024px) {
-  .blog {
-    max-width: var(--static-max-width--desktop);
-  }
-
-  .blog .post {
-    flex-direction: column;
-  }
-
-  .blog a.arrow {
-    font-size: 1rem;
-  }
-
-  .blog a.arrow.prev::after {
-    content: "\00A0previous";
-  }
-
-  .blog a.arrow.next::before {
-    content: "next\00A0";
-  }
-
-  .blog .post .post-content {
-    margin-left: 0;
-    width: auto;
-  }
+.blog.list aside ul {
+  list-style: none;
+  padding: 0;
+  margin-top: 1rem;
 }
 
 article.blog:first-child {
@@ -64,7 +44,7 @@ article.blog p {
 .blog .post {
   margin-top: 1rem;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 
 .blog .post aside .summary {
@@ -82,28 +62,63 @@ article.blog p {
 }
 
 .blog .post aside {
-  width: 30rem;
+  width: 100%;
 }
 
 .blog a.arrow {
-  font-size: 3rem;
+  font-size: 1rem;
   text-decoration: none;
 }
 
 .blog a.arrow.prev::after {
-  content: "";
+  content: "\00A0previous";
 }
 
 .blog a.arrow.next::before {
-  content: "";
+  content: "next\00A0";
 }
 
 .blog .post .post-content {
-  margin-left: 2rem;
-  width: 100%;
+  margin-left: 0;
+  width: auto;
 }
 
 .blog .post-content img.featured {
   width: 100%;
   height: auto;
 }
+
+@media screen and (min-width: 1024px) {
+  .blog {
+    max-width: var(--static-max-width--desktop);
+  }
+
+  .blog .post {
+    flex-direction: row;
+  }
+
+  .blog .post aside {
+    width: 30rem;
+  }
+
+  .blog a.arrow {
+    font-size: 3rem;
+  }
+
+  .blog a.arrow.prev::after {
+    content: "";
+  }
+
+  .blog a.arrow.next::before {
+    content: "";
+  }
+
+  .blog .post .post-content {
+    margin-left: 2rem;
+    width: 100%;
+  }
+
+  .blog.list {
+    flex-direction: row;
+  }
+}
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 9175e92..e5a0425 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -4,9 +4,11 @@
     <main role="main" class="doc blog list">
         <aside>
             <h3>Categories</h3>
+            <ul>
             {{ range .Site.Taxonomies.categories.Alphabetical }}
-                <p><a class="category" href="{{ "/categories/" | relURL }}{{ 
.Name | urlize }}/">{{ .Name | upper }}<span>{{ .Count }}</span></a></p>
+                <li><a class="category" href="{{ "/categories/" | relURL }}{{ 
.Name | urlize }}/">{{ .Name | upper }}<span>{{ .Count }}</span></a></li>
             {{ end }}
+            </ul>
         </aside>
         <div>
             {{ $pages := ($.Paginator 3).Pages }}