updacte css

_posts/2023-08-17-maps.md

@@ -27,13 +27,9 @@ crossorigin=""></script>
     }
 </style>
 
-<figure class="blogroll">
+<div id="map" style="height:400px; width:100%; margin-top: 1em;"></div>
-<div id="map" style="height:90cqw; width:90cqw"></div>
+
-<figcaption>
+These black and white map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributor data. The rest are OS Maps from the <a href="http://maps.nls.uk/projects/subscription-api/">National Library of Scotland</a>. The viewer is <a href="https://leafletjs.com/">leaflet.js</a>.
-<br>
-The black and white map tiles are from <a href="https://stamen.com/">Stamen design</a>, essentially a really nice style sheet on top of &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributor data. The rest are OS Maps from the <a href="http://maps.nls.uk/projects/subscription-api/">National Library of Scotland</a>. The viewer is <a href="https://leafletjs.com/">leaflet.js</a>. I used CSS container queries to make this a nice square shape.
-</figcaption>
-</figure>
 
 <script>
     let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', {
@@ -125,6 +121,8 @@ A blender render of what it might look like based on a 3D scan of my flat. This
 </figcaption>
 </figure>
 
+Given how long those took to cut, I'm thinking that I'll split the design into multiple panels so I don't have to babysit the laser cutter for 24 hours. 
+
 <figure>
 <model-viewer src="/assets/blog/maps/bigmap.glb" ar ar-modes="scene-viewer webxr quick-look" camera-controls shadow-intensity="1" exposure="1.08" camera-orbit="30.45deg 63.68deg 27.8m" field-of-view="22.88deg" auto-rotate>
 </model-viewer>
@@ -133,8 +131,6 @@ Here's a 3D version. I got the scan with the lidar scanner on an ipad.
 </figcaption>
 </figure>
 
-Given how long those took to cut, I'm thinking that I'll split the design into multiple panels so I don't have to babysit the laser cutter for 24 hours. 
-
 Let's see how that pans out next time!
 
 <!-- Ideas:

_sass/blogroll.scss

@@ -4,10 +4,8 @@ h2.blogroll-title {
     }
 
 }
-
+figure.blogroll {
-//clamp the size of the images on the blog roll
+    img, svg {
-figure.blogroll > img, figure.blogroll > svg {
-    max-width: 100% !important;
         margin-bottom: 0;
-    border-radius: 1em;
+    }
 }

_sass/main.scss

@@ -68,14 +68,13 @@ main {
     }
 }
 
-/* increase line-height for everything except headings */
+p, figcaption {
-main :not(:is(h1,h2,h3,h4,h5,h6)) {
+    font-size: 1em;
-    line-height: 1.3;
+    line-height: 1.3em;
     }
 
-/* increase line-height for everything except headings */
 main :is(p,h1,h2,h3,h4,h5,h6) {
-    margin-block-end: 0.0em;
+    margin-block-end: 0.2em;
     }
 
 a {
@@ -85,41 +84,35 @@ a {
     color: #222;
 }
 
-header a {
+header a, nav a {
     text-decoration: none;
 }
 
-nav a {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
 div.highlight {
     max-width: 100%;
     overflow: auto;
 }
 
-// .figure {
+p {
-//     max-width: 400px;
+    margin-top: 0.7em;
-//     display: block;
+    margin-bottom: 0.7em;
-//     margin: 0 auto;
+    padding-right: 0;
-//     margin-top: 1em;
+    vertical-align: baseline;
-//     margin-bottom: 1em;
+}
-// }
 
 figure {
-    display: flex;
+    container: fig / inline-size;
-    flex-direction: column;
+    max-width: 450px !important;
-    align-items: center;
+    width: 100%;
     padding-bottom: 1em;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 figure > img, figure > svg, figure > canvas {
-    max-width: 90% !important;
+    width: 100%;
-    margin-bottom: 2em;
+    margin-bottom: 1em;
+    border-radius: 10px;
 }
 
 @media 

_sass/nav.scss

@@ -7,13 +7,6 @@ nav {
     color: darkslategray;
   }
 
-
-nav.page-table-of-contents {
-    white-space: nowrap;
-    li li {padding-right: 2em;}
-}
-
-
 @media 
     only screen and (max-width: $horizontal_breakpoint),
     only screen and (max-height: $vertical_breakpoint)

_sass/projects.scss

@@ -1,8 +1,15 @@
 article.project {
     display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    flex-direction: row;
+
+    h2 {margin-top: 0;}
 
     img {
         max-height: 7em;
+        width: unset;
         aspect-ratio: 1 / 1;
         margin-right: 1em;
         border-radius: 2em;
@@ -13,25 +20,25 @@ article.project {
     }
 }
 
-@media 
+// @media 
-    only screen and (max-width: $horizontal_breakpoint),
+//     only screen and (max-width: $horizontal_breakpoint),
-    only screen and (max-height: $vertical_breakpoint)
+//     only screen and (max-height: $vertical_breakpoint)
-    {  
+//     {  
-        main {
+//         main {
-        padding-top: 10px; 
+//         padding-top: 10px; 
-        padding-left: 20px;
+//         padding-left: 20px;
-        padding-right: 20px;
+//         padding-right: 20px;
-        margin: 0px;
+//         margin: 0px;
-        }
+//         }
     
-        article {
+//         article {
-        margin-left: 0px; 
+//         margin-left: 0px; 
-        } 
+//         } 
 
-        h1 {font-size: 1.5em !important;}
+//         h1 {font-size: 1.5em !important;}
-        .MathJax { 
+//         .MathJax { 
-            font-size: 0.8em !important;
+//             font-size: 0.8em !important;
-            overflow-x: auto;
+//             overflow-x: auto;
-            overflow-y: hidden;
+//             overflow-y: hidden;
-        }
+//         }
-}
+// }

_sass/thesis.scss

@@ -7,7 +7,7 @@ figure {
     margin-inline-start: 0em;
     margin-inline-end: 0em;
     
-    max-width: 900px;
+    max-width: 900px !important;
 
     // border-bottom: solid #222 1px;
     padding-bottom: 1em;
@@ -27,19 +27,29 @@ figcaption {
     max-width: 90%;
 }
 
-// For the table of contents, should probably put this in a container
+nav.page-table-of-contents > ul > li:first-child {
+    display: none;
+}
 
 //For the animation that plays in the nav as you scroll
-nav.page-table-of-contents a {
+nav.page-table-of-contents {
+    li li {font-size: 0.9em}
+
+    ul {
+        padding-inline-start: 6px;
+    }
+
+    a {
         transition: all 200ms ease-in-out;
         color: #000;
         font-weight:normal;
     }
 
-nav.page-table-of-contents li.active > a {
+    li.active > a {
         color: #000!important;
         font-weight:bold;
     }
+}
 
 // modify the spacing of the various levels
 li {

projects.md

@@ -7,9 +7,7 @@ redirect_from:
 {% for post in site.projects %}
 <article class="h-entry project">
     {% unless post.hide_image %}
-    <figure class="blogroll">
     <img class="u-photo" src = "{{post.image}}" alt="{{post.alt}}">
-    </figure>
     {% endunless %}
 
     <section>