cleaned up design process, added border

src/design-process.md

@@ -5,67 +5,67 @@ theme: [air, alt, wide]
 style: css/custom.css
 ---
 
-<style>
-
-.img-container {
-  text-align: center;
-}
-
-.img-container img {
-  position: absolute;
-  left:50%;
-  transform: translateX(-50%);
-}
-
-</style>
-
 ```js
 // IMAGES
 
 const img_src_kerning = FileAttachment("./imgs/text_kerning_example.png").href;
 const img_src_zoomin = FileAttachment("./imgs/crop_M.jpg").href;
-
-function return_img(src, size) {
-  return html` <img src="${src}" height="${size}px" width="${size}px" /> `;
-}
+const img_style =
+  "object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
+import { return_resized_img } from "./components/img_utils.js";
 ```
 
-<div class= "grid grid-cols-2">
-  <div class="card">
-    <h1> Design Process  </h1>
-
-For every iteration of One.MIT, Prof. W. Craig Carter created the designs, algorithms, numerical solutions, and data translation -- a tremendous undertaking.
+<div class= "grid grid-cols-2" style="grid-auto-rows: auto;">
 
-**Placing the names and creating the mosaics**
+:::card
 
-Every One.MIT artwork starts from a black and white image: MIT's Great Dome, drawn by Heidi Erickson (2018); the MIT Seal (2020); an image Carter himself drew, inspired by a lithograph produced for the 1916 celebration of MIT's move from Boston to Cambridge (2024).
+# Kerning
 
-The black and white regions sow the seeds that produce the heavy and light fonts that you see in the final image. For the final layout files, it was necessary for Carter to recreate kerns and the fonts as algorithmic geometric objects.
+For every One.MIT mosaic, Prof. W. Craig Carter created the designs, algorithms, numerical solutions, and data translation -- a tremendous undertaking.
 
-The font types are inherited from their position in the background image. Quality typesetting requires the spacing between characters to be “kerned.” For example, the appearance of **LY** looks better when the spacing within the **L** and the **Y** is smaller. **IM** looks better with a wider spacing and so the kern is larger.
+Every One.MIT mosaic starts from a black and white image: MIT's Great Dome, drawn by Heidi Erickson (2018); the MIT Seal (2020); an image inspired by a 1916 lithograph celebrating MIT's move to Cambridge (2024).
+The black and white regions sow the seeds that produce the heavy and light fonts that you see in the final image.
+For the final layout files, it was necessary for Carter to recreate kerns and the fonts as algorithmic geometric objects.The font types are inherited from their position in the background image.
 
-(_Image: An example of text with kerning. <a href="https://en.wikipedia.org/wiki/Kerning">Curious about kerning? Learn more at Wikipedia.</a>_)
+Quality typesetting requires the spacing between characters to be [“kerned.”](https://en.wikipedia.org/wiki/Kerning)
+For example, the appearance of **LY** looks better when the spacing within the **L** and the **Y** is smaller.
+**IM** looks better with a wider spacing and so the kern is larger.
 
-  </div>
+The kerns are different for the different font &ndash; each character pair has four possible kerns.
+This produces some complexity because minor adjustments can switch font types that have different widths and kerns.
+The change in spacing produces a cascading effect on subsequent font choices.
+Modifying just one letter from light to dark (and vice versa) perturbs the spacing in the whole image and requires re-computing the entire mosaic.
 
-  <div class="card">
-    ${resize((width,height)=> return_img(img_src_kerning,Math.min(width,height)))}
-  </div>
+_(Image: An example of text with [kerning](https://en.wikipedia.org/wiki/Kerning).)_
 
-  <div class="card">
+:::
+
+<div style="min-height:350px;">
+  ${resize((width,height)=> return_resized_img(img_src_kerning,width,height,img_style))}
+</div>
 
-The kerns are different for the different fonts—each character pair has four possible kerns. This produces some complexity because minor adjustments can switch font types that have different widths and kerns. The change in spacing produces a cascading effect on subsequent font choices. Modifying just one letter from light to dark (and vice versa) perturbs the spacing in the whole image and requires re-computing the entire mosaic.
+:::card
 
-Finally, Carter needed to find a font scale that fills the wafer space maximally. This seems straightforward at first. However, a small font change can cause an entire word to wrap around to the next line (which is familiar to anyone trying to fit an essay into a fixed number of pages). Optimization would be simple if the leftover space smoothly decreased as the font scale gets larger—but the word wrap problem throws a spanner in the works. Carter’s algorithm alleviates this somewhat by searching for names that slot into remaining spaces at the end of each row. Even with these minute fixes, a satisfactory font scale cannot always be obtained. So, the final algorithm performs an optimization over many different choices for the random order of the names.
+# Font Optimization
 
-Once a solution (i.e., the final image created by the millions of characters) is obtained it must be converted to two different printing languages. For the wafer fabrication, Carter had to write data conversions to the layout file format (GDSII) that was created for interconnects on silicon chips.  For the large wall print, the data is converted to PostScript and then from PostScript to PDF.
+Finally, Carter needed to find a font scale that fills the wafer space maximally.
+While this seems straightforward at first, a small font change can cause an entire word to wrap around to the next line (familiar to anyone trying to fit an essay into a fixed number of pages).
+Optimization would be simple if the leftover space smoothly decreased as the font scale gets larger—but the word wrap problem throws a spanner in the works.
+Carter’s algorithm alleviates this somewhat by searching for names that slot into remaining spaces at the end of each row.
+
+Even with these minute fixes, a satisfactory font scale cannot always be obtained.
+So, the final algorithm performs an optimization over many different choices for the random order of the names.
+
+Once a solution (i.e., the final image created by the millions of characters) is obtained it must be converted to two different printing languages.
+For the wafer fabrication, Carter had to write data conversions to the layout file format (GDSII) that was created for interconnects on silicon chips.
+For the large wall print, the data is converted to PostScript and then from PostScript to PDF.
 
 _(Image: Zooming on the One.MIT 2018 wafer design)_
 
-  </div>
+:::
 
-  <div class="card">
-    ${resize((width,height)=> return_img(img_src_zoomin,Math.min(width,height)))}
-  </div>
+<div style="min-height:350px;">
+  ${resize((width,height)=> return_resized_img(img_src_zoomin,width,height,img_style))}
+</div>
 
 </div>

src/gathering-names.md

@@ -10,7 +10,7 @@ style: css/custom.css
 
 const img_src = FileAttachment("./imgs/about-OCR4.png").href;
 const img_style =
-  "object-fit:cover; object-position:left; border-radius: 0.75rem;";
+  "object-fit:cover; object-position: left; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
 import { return_resized_img } from "./components/img_utils.js";
 ```
 

src/inception.md

@@ -9,7 +9,8 @@ style: css/custom.css
 // IMAGES
 
 const img_src = FileAttachment("./imgs/MIT-nano-exterior_0.jpg").href;
-const img_style = "object-fit:cover; border-radius: 0.75rem;";
+const img_style =
+  "object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
 import { return_resized_img } from "./components/img_utils.js";
 ```
 
@@ -35,7 +36,7 @@ The [onemit.mit.edu]("https://onemit.mit.edu") interactive website allows visito
 
 :::
 
-<div style="min-height:500px;">
+<div style="min-height:450px;">
   ${resize((width,height)=> return_resized_img(img_src,width,height,img_style))}
 </div>
 

src/index.md

@@ -33,13 +33,13 @@ Come see the wafers in the MIT.nano first floor galleries located in the southwe
 :::
 
 <div class="grid grid-cols-3" style="grid-auto-rows: auto;">
-  <div class="img-container" style="min-height:242px;">
+  <div class="img-container" style="min-height:300px;">
     ${resize((width,height)=> return_resized_img_link(img_src_2018,"./onemit2018",Math.min(width,height)))}
   </div>
-  <div class="img-container" style="min-height:242px;">
+  <div class="img-container" style="min-height:300px;">
     ${resize((width,height)=> return_resized_img_link(img_src_2020,"./onemit2020",Math.min(width,height)))}
   </div>
-  <div class="img-container" style="min-height:242px;">
+  <div class="img-container" style="min-height:300px;">
     ${resize((width,height)=> return_resized_img_link(img_src_2024,"./onemit2024",Math.min(width,height)))}
   </div>
 </div>

src/onemit2018.md

@@ -11,7 +11,8 @@ sql:
 // SEARCH BACKGROUND IMAGE
 
 const img_src = FileAttachment("./imgs/onemit2018-search_background.jpg").href;
-const img_style = "object-fit:cover; border-radius: 0.75rem;";
+const img_style =
+  "object-fit:cover; border-radius: 0.75rem; border: solid 1px var(--theme-foreground-faintest);";
 import { return_resized_img } from "./components/img_utils.js";
 ```