Merge pull request #79 from ngsilverman/ns/lipu-sin

Improve latest issue display

index.hbs

@@ -23,16 +23,41 @@ description: "o kama pona lon lipu pi lipu tenpo!"
 {{!-- first lipu_ale --}}
 <section id="lipu-nanpa-lon">
   <article class="lipuwan">
+    <div class="lipu-sin">lipu sin</div>
+    <h3 id="{{ lipu_ale.[0].title }}">
+      <a href="lipu/{{slugify lipu_ale.[0].title}}">
+        {{ lipu_ale.[0].title }}
+      </a>
+    </h3>
+    <div class="date">
+      <time datetime="{{ asReadableDate lipu_ale.[0].date }}">{{ asReadableDate lipu_ale.[0].date }}</time>
+    </div>
     <a href="lipu/{{slugify lipu_ale.[0].title}}">
       {{{eleventyImage (appendString "pdfs/" lipu_ale.[0].cover_image) "" lipu_ale.[0].title 400}}}
-      <h3 id="{{ lipu_ale.[0].title }}">
-        {{ lipu_ale.[0].title }}
-      </h3>
-      <span class="date">
-        <time datetime="{{ asReadableDate lipu_ale.[0].date }}">{{ asReadableDate lipu_ale.[0].date }}</time>
-      </span>
     </a>
   </article>
+
+  {{#with (getkey collections lipu_ale.[0].title)}}
+  {{#if this}}
+  <ul>
+    {{#each this}}
+    <li>
+      <a class="article" href="{{page.url}}">
+        <span class="nimi-suli">{{data.[nimi-suli]}}</span>
+      </a>
+      <span class="jan-pali" style="color: {{colourhash data.[jan-pali]}}">
+        <span class="sitelen-pona">jan</span>
+        {{data.[jan-pali]}}
+      </span>
+      <span class="category" style="color: {{colourhash (getTokiTypeTag data.tags)}}">
+        <span class="sitelen-pona">{{getTokiTypeTag data.tags}}</span>
+        {{getTokiTypeTag data.tags}}
+      </span>
+    </li>
+    {{/each}}
+  </ul>
+  {{/if}}
+  {{/with}}
 </section>
 
 

public/stylesheet-index.css

@@ -100,9 +100,10 @@
 
 #lipu-nanpa-lon {
   display: flex;
+  flex-flow: row wrap;
   justify-content: center;
-  align-items: center;
-  margin: 2rem 0;
+  align-items: flex-end;
+  margin: 2rem;
 }
 
 .lipu-flex {
@@ -163,3 +164,31 @@
 .lipuwan a:hover {
   text-decoration: underline;
 }
+
+#lipu-nanpa-lon .lipuwan {
+  margin-right: 2rem;
+  max-width: none;
+  display: block;
+  text-align: left;
+}
+#lipu-nanpa-lon .lipu-sin {
+  font-size: 2rem;
+  font-weight: bold;
+  line-height: 1;
+}
+#lipu-nanpa-lon .lipuwan h3 {
+  margin: 0;
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 1;
+}
+#lipu-nanpa-lon .lipuwan .date {
+  font-size: 1.7rem;
+}
+#lipu-nanpa-lon .lipuwan img {
+  margin-top: .7rem;
+  max-width: 12rem;
+}
+#lipu-nanpa-lon .jan-pali {
+  padding: 0 .5rem;
+}

public/stylesheet-lipu.css

@@ -115,9 +115,6 @@ h2 {
   color: var(--colour-laso-pimeja);
   border-radius: var(--blob-border-radius-04);
 }
-.sitelen-pona {
-  font-family: "sitelen seli kiwen", sans-serif;
-}
 .toki ul {
   margin: 0;
   padding: 0;

public/stylesheet.css

@@ -364,3 +364,7 @@ footer .licence {
     }
   }
 }
+
+.sitelen-pona {
+  font-family: "sitelen seli kiwen", sans-serif;
+}