feat(design): display cover art and tags

adrienjoly · Jun 10, 2018 · dc2fe77 · dc2fe77
1 parent 9e57e03
commit dc2fe77
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/png" href="/icon.png"/>
     {% seo %}
     <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}"> <!-- github-pages style -->
+    <link rel="stylesheet" href="{{ "/index.css?v=" | append: site.github.build_revision | relative_url }}">
   </head>
   <body>
     <div class="container-lg px-3 my-5 markdown-body">

diff --git a/index.css b/index.css
@@ -0,0 +1,33 @@
+* {
+  box-sizing: border-box;
+}
+
+article {
+  display: inline-block;
+  width: 320px;
+  height: 420px;
+  padding: 8px;
+  overflow: hidden;
+}
+
+article img {
+  width: 320px;
+  height: 320px;
+}
+
+.markdown-body article p {
+  margin-bottom: 0;
+}
+
+.release-date {
+  color: gray;
+  font-size: 90%;
+}
+
+.tag {
+  color: white;
+  background-color: lightgray;
+  border-radius: 12px;
+  font-size: 90%;
+  padding: 2px 8px;
+}
diff --git a/index.md b/index.md
@@ -3,6 +3,18 @@ title: My Albums
 ---
 
 {% for album in site.data.albums %}
-- [{{ album.title }}, by {{ album.artist }}]({{ album.url }})<br/>
-  <small style="color:gray;">{{ album.release_date | date: "%b %-d, %Y" }}</small>
+  <article>
+    <a href="{{ album.url }}">
+      <img src="{{ album.img }}" alt="{{ album.title }} {{ album.artist }}"/>
+      <p>{{ album.title }}</p>
+    </a>
+    <p>by {{ album.artist }}</p>
+    {% if album.tags %}
+      {% for tag in album.tags %}
+        <span class="tag">{{ tag }}</span>
+      {% endfor %}
+    {% else %}
+      <span class="release-date">{{ album.release_date | date: "%b %-d, %Y" }}</span>
+    {% endif %}
+  </article>
 {% endfor %}