Book shelf

_posts/2024-03-04-book-shelf.md

@@ -0,0 +1,32 @@
+---
+title: "Weekend builds: Bookshelf"
+layout: post
+excerpt: |
+
+image: 
+thumbnail: 
+assets: /assets/blog/bookshelf/
+head: <script type="module" src="/assets/js/model-viewer.js"></script>
+---
+Here's a little weekend project. We have this mezzanine bed with windows and window shelves around it. I'd like to put books there but sometimes condensation pools so I need something to raise the books a little above the level of the shelf.
+
+<figure>
+<model-viewer src="{{page.assets}}/scan.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls shadow-intensity="2" shadow-softness="1" camera-orbit="63.08deg 66.62deg 1.102m" field-of-view="30deg" interaction-prompt="none" auto-rotate alt="A scan of some books piled against a yellow pillar."> </model-viewer>
+<figcaption>
+Because I can't resist, here's a scan of the relevant area. This one was done with <a href="https://poly.cam/">Polycam</a>  
+</figcaption>
+</figure>
+
+
+
+<figure>
+<section class="image-grid-4x4">
+<img src = "{{page.assets}}/img/all_curves.png">
+<img src = "{{page.assets}}/img/lower_curves.png">
+<img src = "{{page.assets}}/img/lower_curves_feet.png">
+<img src = "{{page.assets}}/img/no_curves.png">
+</section>
+<figcaption>
+Playing around with different designs, I went for the middle ground of having some curves at the base but not the top. I wanted them to be catenary curves but couldn't figure out how to do that in fusion so went with arcs instead. 
+</figcaption>
+</figure>

_sass/base.scss

@@ -74,6 +74,10 @@ main {
     }
 }
 
+:is(h1, h2, h3, h4, .text-balance) {
+    text-wrap: balance;
+}
+
 p, figcaption {
     font-size: 1em;
     line-height: 1.3em;
@@ -85,7 +89,7 @@ main :is(p,h1,h2,h3,h4,h5,h6) {
 
 a {
     text-decoration: underline;
-    text-underline-offset: 2px;
+    text-underline-offset: 0.25em;
     text-decoration-thickness: 0.5px;
     color: var(--theme-text-color);
 }
@@ -112,6 +116,10 @@ figure {
     padding-bottom: 1em;
     margin-left: auto;
     margin-right: auto;
+
+    figcaption {
+        margin-top: 1em;
+    }
 }
 
 figure > img, figure > svg, figure > canvas {
@@ -125,6 +133,21 @@ figure.centered {
     justify-content: center;
 }
 
+section.image-grid-4x4 {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 50% 50%;
+    gap: 0 0;
+    border: solid 1px var(--theme-subtle-outline);
+    margin-bottom: 1em;
+    place-items: stretch stretch;
+
+    * {
+        margin: 0;
+        padding: 0;
+    }
+}
+
 // For fallback images inside custom outline-model-viewer elements
 .outline-model-poster {
     width: 100%;

run.sh

@@ -1,3 +1,4 @@
 #!/usr/bin/env bash
 echo Open http://0.0.0.0:4000
-bundle exec jekyll serve --draft --future --live --incremental
+# bundle exec jekyll serve --draft --future --live --incremental
+bundle exec jekyll serve --live --incremental --livereload