*

links/main.css

@@ -51,7 +51,11 @@ main > pre { font-family: monospace; background: black; color:white; padding:15p
 main > code { font-family: monospace; font-size:12px; margin-bottom: 30px; display: block; background:black; color:white; padding:15px; white-space: pre}
 main > code comment { color:#777}
 
-main ul.gallery { background:none}
+.grid {list-style-type: none;width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);gap: var(--pad-large);}
+.article {grid-column: span 2; padding: 10px}
+.featured {margin: var(--pad) 0;width: 100%;height: 210px;background-repeat: no-repeat;background-size: cover;background-position: center mix-blend-mode: multiply;}
+
+main ul.gallery { background:none,}
 main ul.gallery li { clear: both; display: block; height: 260px; margin-top: -2px}
 main ul.gallery li:last-child { border-bottom: 0px}
 main ul.gallery li a { display: block; padding: 10px}
@@ -87,7 +91,7 @@ main img.detail { max-width: 64px; float: left;border: 1px solid #777;padding: 2
 main .shortcut, main kbd { background: #fff; display: inline-block; padding: 2px 5px; margin: 0px; color: black; font-size: 12px; line-height: 16px; border-radius: 2px; font-weight: bold }
 main .shortcut-list dt, main .shortcut-list dd { display: inline; line-height: 25px; margin-left: 0; margin-right: 10px; }
 
-main > table.logbook tr td { padding-bottom: 15px;padding-top: 15px; }
+main > table.logbook tr td { padding-bottom: 15px;padding-top: 15px;}
 main > table img { max-width: 100%; display: block; margin:20px 0;}
 main > table tr th { text-align: left; font-weight: bold }
 main > table tr > * { padding:5px 15px; vertical-align: top;}

site/articles.html

@@ -36,17 +36,82 @@
 <!-- Generated file, do not edit -->
 
 <h1>articles</h1><h2>Articles</h2>
-<ul class='nobull capital'>
-    <li><a href='boat_projects.html'>Boat projects</a></li>
-    <li><a href='computing_and_sustainability.html'>Computing and Sustainability</a></li>
-    <li><a href='weathering_software_winter.html'>Weathering Software Winter</a></li>
-    <li><a href='working_offgrid_efficiently.html'>Working Offgrid Efficiently</a></li>
-    <li><a href='tools_ecosystem.html'>Tools Ecosystem</a></li>
-    <li><a href='solar_cooking_experiment.html'>Solar Cooking Experiment</a></li>
-    <li><a href='logbooks.html'>Logbooks</a></li>
-    <li><a href='buying_a_sailboat.html'>Buying a Sailboat</a></li>
-    <li><a href='why_a_boat.html'>Why live on a boat?</a></li>
-</ul>
 
-</main><footer><hr /><span style='float:right'>Edited on Tue Nov 19 08:27:34 2024
+<div class='grid'>
+    <div class='article'>
+        <a href="boat_projects.html">
+            <div class='featured' style="background-image: url('../media/content/boat_projects/boat_projects_portal.jpg');">
+            </div>
+            <h3>Boat Projects</h3>
+        </a>
+            <p>A portal for all of the improvements we've made on Pino over the years.</p>
+    </div>
+    <div class='article'>
+        <a href="computing_and_sustainability.html">
+            <div class='featured' style="background-image: url('../media/content/blog/cs_portal.jpg');">
+            </div>
+            <h3>Computing and Sustainability</h3>
+        </a>
+            <p>An Approach to Computing and Sustainability Inspired From Permaculture.</p>
+    </div>
+    <div class='article'>
+        <a href="weathering_software_winter.html">
+            <div class='featured' style="background-image: url('../media/content/blog/wsw_portal.jpg');">
+            </div>
+            <h3>Weathering Software Winter</h3>
+        </a>
+            <p>A deep dive into how to preserve software.</p>
+    </div>
+    <div class='article'>
+        <a href="working_offgrid_efficiently.html">
+            <div class='featured' style="background-image: url('../media/content/blog/woe_portal.jpg');">
+            </div>
+            <h3>Working Offgrid Efficiently</h3>
+        </a>
+            <p>The lessons we learned while trying to balance work, pleasure and maintenance during the first 3 years of living aboard Pino.</p>
+    </div>
+    <div class='article'>
+        <a href="tools_ecosystem.html">
+            <div class='featured' style="background-image: url('../media/content/blog/te_portal.jpg');">
+            </div>
+            <h3>Tools Ecosystem</h3>
+        </a>
+            <p>The many failures and realizations that led us to design and use our own tools.</p>
+    </div>
+    <div class='article'>
+        <a href="solar_cooking_experiment.html">
+            <div class='featured' style="background-image: url('../media/content/blog/sce_portal.jpg');">
+            </div>
+            <h3>Solar Cooking Experiment</h3>
+        </a>
+            <p>A summer experimenting with a solar cooker, in which we learned to plan our meals with the weather.</p>
+    </div>
+    <div class='article'>
+        <a href="logbooks.html">
+            <div class='featured' style="background-image: url('../media/content/blog/logbook_portal.jpg');">
+            </div>
+            <h3>Logbooks</h3>
+        </a>
+            <p>A portal for our sailing logbook transcriptions, detailing sea conditions, our progress, as well as our thoughts.</p>
+    </div>
+    <div class='article'>
+        <a href="buying_a_sailboat.html">
+            <div class='featured' style="background-image: url('../media/content/blog/bas_portal.jpg');">
+            </div>
+            <h3>Buying a Sailboat</h3>
+        </a>
+            <p>Some advice on buying a sailboat based on our personal experience purchasing Pino.</p>
+    </div>
+    <div class='article'>
+        <a href="why_a_boat.html">
+            <div class='featured' style="background-image: url('../media/content/blog/wab_portal.jpg');">
+            </div>
+            <h3>Why a boat?</h3>
+        </a>
+            <p>What led us to live and work from a sailboat.</p>
+    </div>
+</div>
+
+
+</main><footer><hr /><span style='float:right'>Edited on Tue Nov 19 15:57:54 2024
  <a href='https://github.com/hundredrabbits/100r.co/edit/main/src/inc/articles.htm'>[edit]</a><br/></span><b>Hundredrabbits</b> © 2024 — <a href='https://github.com/hundredrabbits/100r.co/blob/main/LICENSE.by-nc-sa-4.0.md' target='_blank'>BY-NC-SA 4.0</a> | <a href='../site/support.html'>Donate</a> | <a href='../site/rabbits.html'>Contact</a> | <a href='../site/index.html'>Index</a><a href='https://merveilles.town/@neauoire' rel='me' class='hidden'></a><a href='https://merveilles.town/@rek' rel='me' class='hidden'></a></footer></body></html>

site/projects.html

@@ -39,12 +39,12 @@ <h1>projects</h1><ul class='jump'>
     <li><a href='#tools'>Tools</a></li>
     <li><a href='#games'>Games</a></li>
     <li><a href='#books'>Books</a></li>
-    <li><a href='#videos'>Videos</a></li>
+    <li><a href='#other'>Other</a></li>
 </ul>
 
 <h2 id='tools'>Tools</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/orca.turnip.png"></td>
         <td><b>Orca</b> is a two-dimensional esoteric programming language in which every letter of the alphabet is an operator, where lowercase letters operate on bang, uppercase letters operate each frame.<br>[ <a href="orca.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/orca">Download</a> ]</td>
@@ -63,7 +63,7 @@ <h2 id='tools'>Tools</h2>
     </tr>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/nasu.turnip.png"></td>
-        <td><b>Nasu</b> is a <b>spritesheet editor</b> designed to create 8-bit fonts and sprites.<br>[ <a href="nasu.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/nasu">Download</a> ]</td>
+        <td><b>Nasu</b> is a spritesheet editor designed to create 8-bit fonts and sprites.<br>[ <a href="nasu.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/nasu">Download</a> ]</td>
     </tr>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/adelie_03.png"></td>
@@ -81,7 +81,7 @@ <h2 id='tools'>Tools</h2>
 
 <h2 id='books'>Books</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/wiktopher_icon.png"></td>
         <td><b>Wiktopher</b> is a 218-page fiction book following the story of Lupen and Eka as they sandfin across the Soronan Desert and learn about the varied lives of its inhabitants. The book features illustrations of creatures, plants, maps and languages of the different cultures of its world. Themes include cultural identity, food preservation, community, low-tech and more.<br>[ <a href="wiktopher.html">Read more</a> | <a href="https://hundredrabbits.itch.io/wiktopher">Download</a> ]</td>
@@ -98,7 +98,7 @@ <h2 id='books'>Books</h2>
 
 <h2 id='games'>Games</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/niju.turnip.png"></td>
         <td><b>Niju</b> is a little application to review the Japanese hiragana and katakana alphabets.<br>[ <a href="niju.html">Read more</a> | <a href="https://hundredrabbits.itch.io/niju">Download</a> ]</td>
@@ -129,14 +129,18 @@ <h2 id='games'>Games</h2>
     </tr>
 </table>
 
-<h2 id='videos'>Videos</h2>
+<h2 id='other'>Other</h2>
 
-<table border='1'>
-    <tr>
+<table>
+        <tr>
         <td style="width:100px"><img src="../media/interface/videos_icon.png"></td>
         <td>From 2016 to 2020, we published videos on YouTube every month, the goal was to share our progress around the Pacific to our friends, and family and to provide some context for our projects.<br>See the [<a href="videos.html">full list</a>] of videos</td>
     </tr>
+    <tr>
+        <td style="width:100px"><img src="../media/content/projects/rabbitwaves_icon.png"></td>
+        <td>Rabbit Waves serves as a vessel to expand in a playful way using hand drawn illustrations, on some of our favourite subjects, like communication, hand tools, food preservation, and seafaring.<br>[ <a href="rabbit_waves.html">Read more</a> ]</td>
+    </tr>
 </table>
 
-</main><footer><hr /><span style='float:right'>Edited on Tue Nov 19 12:33:25 2024
+</main><footer><hr /><span style='float:right'>Edited on Tue Nov 19 14:53:23 2024
  <a href='https://github.com/hundredrabbits/100r.co/edit/main/src/inc/projects.htm'>[edit]</a><br/></span><b>Hundredrabbits</b> © 2024 — <a href='https://github.com/hundredrabbits/100r.co/blob/main/LICENSE.by-nc-sa-4.0.md' target='_blank'>BY-NC-SA 4.0</a> | <a href='../site/support.html'>Donate</a> | <a href='../site/rabbits.html'>Contact</a> | <a href='../site/index.html'>Index</a><a href='https://merveilles.town/@neauoire' rel='me' class='hidden'></a><a href='https://merveilles.town/@rek' rel='me' class='hidden'></a></footer></body></html>

src/inc/articles.htm

@@ -1,12 +1,76 @@
 <h2>Articles</h2>
-<ul class='nobull capital'>
-    <li><a href='boat_projects.html'>Boat projects</a></li>
-    <li><a href='computing_and_sustainability.html'>Computing and Sustainability</a></li>
-    <li><a href='weathering_software_winter.html'>Weathering Software Winter</a></li>
-    <li><a href='working_offgrid_efficiently.html'>Working Offgrid Efficiently</a></li>
-    <li><a href='tools_ecosystem.html'>Tools Ecosystem</a></li>
-    <li><a href='solar_cooking_experiment.html'>Solar Cooking Experiment</a></li>
-    <li><a href='logbooks.html'>Logbooks</a></li>
-    <li><a href='buying_a_sailboat.html'>Buying a Sailboat</a></li>
-    <li><a href='why_a_boat.html'>Why live on a boat?</a></li>
-</ul>
+
+<div class='grid'>
+    <div class='article'>
+        <a href="boat_projects.html">
+            <div class='featured' style="background-image: url('../media/content/boat_projects/boat_projects_portal.jpg');">
+            </div>
+            <h3>Boat Projects</h3>
+        </a>
+            <p>A portal for all of the improvements we've made on Pino over the years.</p>
+    </div>
+    <div class='article'>
+        <a href="computing_and_sustainability.html">
+            <div class='featured' style="background-image: url('../media/content/blog/cs_portal.jpg');">
+            </div>
+            <h3>Computing and Sustainability</h3>
+        </a>
+            <p>An Approach to Computing and Sustainability Inspired From Permaculture.</p>
+    </div>
+    <div class='article'>
+        <a href="weathering_software_winter.html">
+            <div class='featured' style="background-image: url('../media/content/blog/wsw_portal.jpg');">
+            </div>
+            <h3>Weathering Software Winter</h3>
+        </a>
+            <p>A deep dive into how to preserve software.</p>
+    </div>
+    <div class='article'>
+        <a href="working_offgrid_efficiently.html">
+            <div class='featured' style="background-image: url('../media/content/blog/woe_portal.jpg');">
+            </div>
+            <h3>Working Offgrid Efficiently</h3>
+        </a>
+            <p>The lessons we learned while trying to balance work, pleasure and maintenance during the first 3 years of living aboard Pino.</p>
+    </div>
+    <div class='article'>
+        <a href="tools_ecosystem.html">
+            <div class='featured' style="background-image: url('../media/content/blog/te_portal.jpg');">
+            </div>
+            <h3>Tools Ecosystem</h3>
+        </a>
+            <p>The many failures and realizations that led us to design and use our own tools.</p>
+    </div>
+    <div class='article'>
+        <a href="solar_cooking_experiment.html">
+            <div class='featured' style="background-image: url('../media/content/blog/sce_portal.jpg');">
+            </div>
+            <h3>Solar Cooking Experiment</h3>
+        </a>
+            <p>A summer experimenting with a solar cooker, in which we learned to plan our meals with the weather.</p>
+    </div>
+    <div class='article'>
+        <a href="logbooks.html">
+            <div class='featured' style="background-image: url('../media/content/blog/logbook_portal.jpg');">
+            </div>
+            <h3>Logbooks</h3>
+        </a>
+            <p>A portal for our sailing logbook transcriptions, detailing sea conditions, our progress, as well as our thoughts.</p>
+    </div>
+    <div class='article'>
+        <a href="buying_a_sailboat.html">
+            <div class='featured' style="background-image: url('../media/content/blog/bas_portal.jpg');">
+            </div>
+            <h3>Buying a Sailboat</h3>
+        </a>
+            <p>Some advice on buying a sailboat based on our personal experience purchasing Pino.</p>
+    </div>
+    <div class='article'>
+        <a href="why_a_boat.html">
+            <div class='featured' style="background-image: url('../media/content/blog/wab_portal.jpg');">
+            </div>
+            <h3>Why a boat?</h3>
+        </a>
+            <p>What led us to live and work from a sailboat.</p>
+    </div>
+</div>

src/inc/projects.htm

@@ -2,12 +2,12 @@
     <li><a href='#tools'>Tools</a></li>
     <li><a href='#games'>Games</a></li>
     <li><a href='#books'>Books</a></li>
-    <li><a href='#videos'>Videos</a></li>
+    <li><a href='#other'>Other</a></li>
 </ul>
 
 <h2 id='tools'>Tools</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/orca.turnip.png"></td>
         <td><b>Orca</b> is a two-dimensional esoteric programming language in which every letter of the alphabet is an operator, where lowercase letters operate on bang, uppercase letters operate each frame.<br>[ <a href="orca.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/orca">Download</a> ]</td>
@@ -26,7 +26,7 @@ <h2 id='tools'>Tools</h2>
     </tr>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/nasu.turnip.png"></td>
-        <td><b>Nasu</b> is a <b>spritesheet editor</b> designed to create 8-bit fonts and sprites.<br>[ <a href="nasu.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/nasu">Download</a> ]</td>
+        <td><b>Nasu</b> is a spritesheet editor designed to create 8-bit fonts and sprites.<br>[ <a href="nasu.html">Documentation</a> | <a href="https://hundredrabbits.itch.io/nasu">Download</a> ]</td>
     </tr>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/adelie_03.png"></td>
@@ -44,7 +44,7 @@ <h2 id='tools'>Tools</h2>
 
 <h2 id='books'>Books</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/wiktopher_icon.png"></td>
         <td><b>Wiktopher</b> is a 218-page fiction book following the story of Lupen and Eka as they sandfin across the Soronan Desert and learn about the varied lives of its inhabitants. The book features illustrations of creatures, plants, maps and languages of the different cultures of its world. Themes include cultural identity, food preservation, community, low-tech and more.<br>[ <a href="wiktopher.html">Read more</a> | <a href="https://hundredrabbits.itch.io/wiktopher">Download</a> ]</td>
@@ -61,7 +61,7 @@ <h2 id='books'>Books</h2>
 
 <h2 id='games'>Games</h2>
 
-<table border='1'>
+<table>
     <tr>
         <td style="width:100px"><img src="../media/content/projects/niju.turnip.png"></td>
         <td><b>Niju</b> is a little application to review the Japanese hiragana and katakana alphabets.<br>[ <a href="niju.html">Read more</a> | <a href="https://hundredrabbits.itch.io/niju">Download</a> ]</td>
@@ -92,11 +92,15 @@ <h2 id='games'>Games</h2>
     </tr>
 </table>
 
-<h2 id='videos'>Videos</h2>
+<h2 id='other'>Other</h2>
 
-<table border='1'>
-    <tr>
+<table>
+        <tr>
         <td style="width:100px"><img src="../media/interface/videos_icon.png"></td>
         <td>From 2016 to 2020, we published videos on YouTube every month, the goal was to share our progress around the Pacific to our friends, and family and to provide some context for our projects.<br>See the [<a href="videos.html">full list</a>] of videos</td>
     </tr>
+    <tr>
+        <td style="width:100px"><img src="../media/content/projects/rabbitwaves_icon.png"></td>
+        <td>Rabbit Waves serves as a vessel to expand in a playful way using hand drawn illustrations, on some of our favourite subjects, like communication, hand tools, food preservation, and seafaring.<br>[ <a href="rabbit_waves.html">Read more</a> ]</td>
+    </tr>
 </table>