colour download icons

lipu-tenpo · Jan 15, 2024 · a121707 · a121707
1 parent a541961
commit a121707
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/lipu/lipu.hbs b/lipu/lipu.hbs
@@ -17,20 +17,23 @@ css:
     <ul>
       <li>
         <a href="/pdfs/{{lipu.pdf}}">
-          <img class="icon" src="/icons/file.svg" alt="file icon" />
+          <img class="icon colour" src="/icons/file.svg" alt="file icon" />
           lipu tenpo {{lipu.title}}
+          <img class="icon colour" src="/icons/file.svg" alt="file icon" />
         </a>
       </li>
       <li>
         <a href="/pdfs/{{lipu.pdf_pf}}">
-          <img class="icon" src="/icons/printer.svg" alt="printer icon" />
+          <img class="icon colour" src="/icons/printer.svg" alt="printer icon" />
           lipu tenpo {{lipu.title}} (tawa ilo sitelen*)
+          <img class="icon colour" src="/icons/printer.svg" alt="printer icon" />
         </a>
       </li>
       <li>
         <a href="/pdfs/{{lipu.pdf_bwpf}}">
-          <img class="icon" src="/icons/printer.svg" alt="printer icon" />
+          <img class="icon bnw" src="/icons/printer.svg" alt="printer icon" />
           lipu tenpo {{lipu.title}} (pimeja/walo tawa ilo sitelen*)
+          <img class="icon bnw" src="/icons/printer.svg" alt="printer icon" />
         </a>
       </li>
     </ul>

diff --git a/public/stylesheet-lipu.css b/public/stylesheet-lipu.css
@@ -45,6 +45,17 @@ h2 {
   height: 1.5rem;
   width: auto;
   margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
+.pdfs .icon.colour {
+  /* filter: invert(97%) sepia(82%) saturate(721%) hue-rotate(328deg)
+    brightness(108%) contrast(101%); */
+  filter: invert(80%) sepia(18%) saturate(763%) hue-rotate(8deg) brightness(99%)
+    contrast(87%);
+}
+.pdfs .icon.bnw {
+  filter: invert(16%) sepia(0%) saturate(1649%) hue-rotate(146deg)
+    brightness(96%) contrast(87%);
 }
 
 .embed {