modifications to grid spacing

_layouts/gallery.html

@@ -10,7 +10,7 @@ <h3>{{page.title}}</h3>
         <div class ="card">
             <a href="{{ post.url }}"><img src = "{{post.image}}"></a>
             <div class = "desc">
-                <span>{{ post.date | date_to_string }}</span> <br><h3> <b><a href="{{ post.url }}">{{ post.title }}</a></b></h3> <br> <i>{{post.location}}</i> <br> {{post.medium}} <br><br> {{post.shortdesc}}
+                <span>{{ post.date | date: "%Y" }}</span> <br><h3> <b><a href="{{ post.url }}">{{ post.title }}</a></b></h3> <br> <i>{{post.location}}</i> <br> {{post.medium}} <br><br> {{post.shortdesc}}
             </div>
         </div>
 

_sass/main.scss

@@ -185,7 +185,7 @@ body {
     }
 
     .content {
-        width: calc(100% - 40px); 
+        width: calc(100% -40px); 
         margin: 0 20px;
     }
 }
@@ -244,21 +244,18 @@ body {
 }
 .gallery { 
     z-index: -1;
-    font-size:0;  
-    display:flex;
-    flex-flow: column wrap;
-    
+    font-size:0;    
+    column-gap: 12px; /* must match the bottom margin of imgbox */
+    width:100%;
+
         @media (min-width: 1000px) {
-            width: calc(25%);
-            height:62vw;
+            column-count: 4; 
         }
         @media (min-width: 600px) and (max-width: 1000px){
-            width: calc(33% + 2px);
-            height:100vw;
+            column-count: 3;
         }
         @media (max-width: 600px) {
-            width: calc(50% + 4px);
-            height:280vw;
+            column-count: 2;
         }
     .imgbox {
         img {
@@ -274,8 +271,6 @@ body {
         border-color: $border;
         border-radius:$borderrad;
         margin-bottom: 12px;
-        margin-right: 12px;
-        flex:1 1 10px;
     }
 }
 .page {
@@ -294,8 +289,6 @@ body {
 .project {
     display: grid;
     gap: 20px;
-    width:90%;
-    // Removed fixed height
 
     img {
         object-fit: contain;
@@ -311,22 +304,24 @@ body {
     .main {
         grid-row-end: span 5; 
         border-style: none;
-        height:500px;
-        // Use aspect-ratio
         aspect-ratio: 4 / 3; // Change this ratio as needed
+//        max-height:80vh;
     }
 
-    @media (min-width: 1200px) {
-        grid-template-columns: auto 150px;
-    }
-    @media (min-width: 800px) and (max-width: 1200px){
-        grid-template-columns: auto 100px;
+    @media (min-width: 600px) {
+        grid-template-columns: auto 10vw;
+        width:90%;
+        .main{
+            height:40vw;
+        }
     }
-    @media (max-width: 800px) {
+    @media (max-width: 600px) {
         grid-template-columns: auto auto auto auto;
+        width:100%;
         .main {
             grid-column-start: 1;
             grid-column-end: 5;
+            height:70vw;
             max-height: none;
         }
         img {

_site/3D-display/index.html

@@ -160,8 +160,6 @@ <h3>masonite, glass mirrors, projector<h3>
 
 
 
-
-
 
 
 

_site/assets/css/styles.css

@@ -29,7 +29,7 @@ p { font-size: 15px; text-transform: none; text-align: justify; }
   .content { position: absolute; left: 240px; margin-top: 10px; padding: 10px; width: calc(95% - 260px); } }
 @media (max-width: 600px) { .sidebar { position: fixed; width: 0%; height: 100%; z-index: 1; top: 0; right: -40px; margin-left: 60px; padding-left: 40px; transition: 0.2s; overflow: auto; background-color: black; }
   .sidebar a { color: white; }
-  .content { width: calc(100% - 40px); margin: 0 20px; } }
+  .content { width: calc(100% -40px); margin: 0 20px; } }
 .sidebar #closebtn { font-size: 30px; line-height: 2em; padding-bottom: 20px; text-decoration: none; color: white; font-weight: normal; }
 
 #openbtn { float: right; font-size: 18px; line-height: 1em; }
@@ -42,22 +42,22 @@ p { font-size: 15px; text-transform: none; text-align: justify; }
 .gallery1 .imgbox img { width: 100%; height: auto; margin: 0; }
 .gallery1 .imgbox:hover { opacity: 80%; }
 
-.gallery { z-index: -1; font-size: 0; display: flex; flex-flow: column wrap; }
-@media (min-width: 1000px) { .gallery { width: calc(25%); height: 62vw; } }
-@media (min-width: 600px) and (max-width: 1000px) { .gallery { width: calc(33% + 2px); height: 100vw; } }
-@media (max-width: 600px) { .gallery { width: calc(50% + 4px); height: 280vw; } }
-.gallery .imgbox { box-sizing: border-box; border-right-style: double; border-right-width: 3px; border-bottom-style: double; border-bottom-width: 3px; border-color: white; border-radius: 3px; margin-bottom: 12px; margin-right: 12px; flex: 1 1 10px; }
+.gallery { z-index: -1; font-size: 0; column-gap: 12px; /* must match the bottom margin of imgbox */ width: 100%; }
+@media (min-width: 1000px) { .gallery { column-count: 4; } }
+@media (min-width: 600px) and (max-width: 1000px) { .gallery { column-count: 3; } }
+@media (max-width: 600px) { .gallery { column-count: 2; } }
+.gallery .imgbox { box-sizing: border-box; border-right-style: double; border-right-width: 3px; border-bottom-style: double; border-bottom-width: 3px; border-color: white; border-radius: 3px; margin-bottom: 12px; }
 .gallery .imgbox img { width: 100%; height: auto; margin: 0; }
 
 .page img { width: 70%; border-style: solid; border-width: 1px; border-color: white; box-sizing: border-box; border-radius: 3px; margin-bottom: 10px; }
 
-.project { display: grid; gap: 20px; width: 90%; }
+.project { display: grid; gap: 20px; }
 .project img { object-fit: contain; max-width: 100%; border-style: solid; border-width: 1px; border-color: white; box-sizing: border-box; cursor: pointer; border-radius: 3px; }
-.project .main { grid-row-end: span 5; border-style: none; height: 500px; aspect-ratio: 4 / 3; }
-@media (min-width: 1200px) { .project { grid-template-columns: auto 150px; } }
-@media (min-width: 800px) and (max-width: 1200px) { .project { grid-template-columns: auto 100px; } }
-@media (max-width: 800px) { .project { grid-template-columns: auto auto auto auto; }
-  .project .main { grid-column-start: 1; grid-column-end: 5; max-height: none; }
+.project .main { grid-row-end: span 5; border-style: none; aspect-ratio: 4 / 3; }
+@media (min-width: 600px) { .project { grid-template-columns: auto 10vw; width: 90%; }
+  .project .main { height: 40vw; } }
+@media (max-width: 600px) { .project { grid-template-columns: auto auto auto auto; width: 100%; }
+  .project .main { grid-column-start: 1; grid-column-end: 5; height: 70vw; max-height: none; }
   .project img { max-height: 100px; } }
 
 .pagelist .card { width: 100%; min-height: 152px; height: auto; border-style: solid; border-width: 1px; border-color: white; box-sizing: border-box; border-radius: 3px; margin-top: 10px; display: block; background-color: black; }

_site/caps/index.html

@@ -156,8 +156,6 @@ <h3>ceramic capacitors, electrical solder, wire<h3>
 
 
 
-
-
 
 
 

_site/engineering/index.html

@@ -53,47 +53,47 @@ <h3>Engineering</h3>
         <div class ="card">
             <a href="/synth/"><img src = "/assets/images/synth/synth.jpg"></a>
             <div class = "desc">
-                <span>01 Dec 2023</span> <br><h3> <b><a href="/synth/">DIY Mini Synthesizer Project</a></b></h3> <br> <i>Providence, RI</i> <br> teensy 4.2, teensy audio shield, C <br><br> Working with a friend to design and program a mini synthesizer
+                <span>2024</span> <br><h3> <b><a href="/synth/">DIY Mini Synthesizer Project</a></b></h3> <br> <i>Providence, RI</i> <br> teensy 4.2, teensy audio shield, C <br><br> Working with a friend to design and program a mini synthesizer
             </div>
         </div>
 
 
         <div class ="card">
             <a href="/turbulence/"><img src = "/assets/images/turbulence/onsite.jpg"></a>
             <div class = "desc">
-                <span>01 Nov 2023</span> <br><h3> <b><a href="/turbulence/">Fractal turbulence grid for wind turbine performance</a></b></h3> <br> <i>Breuer Lab, Brown University</i> <br> baltic birch ply, 3D-printed PLA, vacuum cup mounts <br><br> Design and fabrication of a turbulence-generating grid for wind turbine performance testing in a wind tunnel
+                <span>2023</span> <br><h3> <b><a href="/turbulence/">Fractal turbulence grid for wind turbine performance</a></b></h3> <br> <i>Breuer Lab, Brown University</i> <br> baltic birch ply, 3D-printed PLA, vacuum cup mounts <br><br> Design and fabrication of a turbulence-generating grid for wind turbine performance testing in a wind tunnel
             </div>
         </div>
 
 
         <div class ="card">
             <a href="/3D-display/"><img src = "/assets/images/3D-display/3d.jpg"></a>
             <div class = "desc">
-                <span>15 Sep 2022</span> <br><h3> <b><a href="/3D-display/">Persistence-of-Vision 3D display</a></b></h3> <br> <i>LEMS, Brown University</i> <br> masonite, glass mirrors, projector <br><br> Design and fabrication of a small, low-cost persistence-of-vision 3D display as part of an independent study project.
+                <span>2022</span> <br><h3> <b><a href="/3D-display/">Persistence-of-Vision 3D display</a></b></h3> <br> <i>LEMS, Brown University</i> <br> masonite, glass mirrors, projector <br><br> Design and fabrication of a small, low-cost persistence-of-vision 3D display as part of an independent study project.
             </div>
         </div>
 
 
         <div class ="card">
             <a href="/worm/"><img src = "/assets/images/worm/augerhead.jpg"></a>
             <div class = "desc">
-                <span>01 Jul 2022</span> <br><h3> <b><a href="/worm/">Soft robotic worm for soil-sensing</a></b></h3> <br> <i>Organic Robotics Lab, Cornell University</i> <br> 3D-printed resin parts, compressed air, arduino nano, sensors <br><br> Fabrication and testing of a earthworm-inspired, soil-swimming robot for agriculutural soil sensing. Developed gait patterns and steering for a worm composed of soft pneumatic actuators
+                <span>2022</span> <br><h3> <b><a href="/worm/">Soft robotic worm for soil-sensing</a></b></h3> <br> <i>Organic Robotics Lab, Cornell University</i> <br> 3D-printed resin parts, compressed air, arduino nano, sensors <br><br> Fabrication and testing of a earthworm-inspired, soil-swimming robot for agriculutural soil sensing. Developed gait patterns and steering for a worm composed of soft pneumatic actuators
             </div>
         </div>
 
 
         <div class ="card">
             <a href="/krill/"><img src = "/assets/images/krill/krill.jpg"></a>
             <div class = "desc">
-                <span>01 May 2022</span> <br><h3> <b><a href="/krill/">Krill-inspired robotics</a></b></h3> <br> <i>Wilhelmus Lab, Brown University</i> <br> 3D-printed PLA, laser-cut acrylic, arduino, CAD <br><br> Worked to design a passively-actuated krill appendage for the Wilhelmus lab as a part of a group project in ENGN1735: Vibrations of Mechanical Systems.
+                <span>2022</span> <br><h3> <b><a href="/krill/">Krill-inspired robotics</a></b></h3> <br> <i>Wilhelmus Lab, Brown University</i> <br> 3D-printed PLA, laser-cut acrylic, arduino, CAD <br><br> Worked to design a passively-actuated krill appendage for the Wilhelmus lab as a part of a group project in ENGN1735: Vibrations of Mechanical Systems.
             </div>
         </div>
 
 
         <div class ="card">
             <a href="/flapper/"><img src = "/assets/images/roBat/robat.jpg"></a>
             <div class = "desc">
-                <span>01 Jul 2021</span> <br><h3> <b><a href="/flapper/">Bat-inspired flapping-wing robot</a></b></h3> <br> <i>Breuer Lab, Brown University</i> <br> 3D-printed resin parts, metal hardware, pink foam, stepper motors <br><br> Assistance in fabrication and assembly of a bat-inspired flapping-wing robot with PhD student, Xiaozhou Fan. Conducted wind tunnel testing, designed and sculpted a pink foam streamline body.
+                <span>2021</span> <br><h3> <b><a href="/flapper/">Bat-inspired flapping-wing robot</a></b></h3> <br> <i>Breuer Lab, Brown University</i> <br> 3D-printed resin parts, metal hardware, pink foam, stepper motors <br><br> Assistance in fabrication and assembly of a bat-inspired flapping-wing robot with PhD student, Xiaozhou Fan. Conducted wind tunnel testing, designed and sculpted a pink foam streamline body.
             </div>
         </div>
 

_site/feed.xml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-03-20T18:04:17-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Amick Sollenberger</title><subtitle>&quot;Amick&apos;s portfolio site&quot;</subtitle><entry><title type="html">DIY Mini Synthesizer Project</title><link href="http://localhost:4000/synth/" rel="alternate" type="text/html" title="DIY Mini Synthesizer Project" /><published>2023-12-01T00:00:00-05:00</published><updated>2023-12-01T00:00:00-05:00</updated><id>http://localhost:4000/synth</id><content type="html" xml:base="http://localhost:4000/synth/">&lt;p&gt;In the past few months, I have been working with a friend to build a synthesizer using teensy 4.2 and the teensy audio shield. We have collaborated on all aspects of the design and programming. Currently, the device is able to (1) sample and play back recordings, (2) assign samples and beats to steps on an 8-step sequencer, (3) adjust playback frequency, (4) play sine waves at variable frequency.&lt;/p&gt;
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.2">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-03-21T10:43:23-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Amick Sollenberger</title><subtitle>&quot;Amick&apos;s portfolio site&quot;</subtitle><entry><title type="html">DIY Mini Synthesizer Project</title><link href="http://localhost:4000/synth/" rel="alternate" type="text/html" title="DIY Mini Synthesizer Project" /><published>2024-01-01T00:00:00-05:00</published><updated>2024-01-01T00:00:00-05:00</updated><id>http://localhost:4000/synth</id><content type="html" xml:base="http://localhost:4000/synth/">&lt;p&gt;In the past few months, I have been working with a friend to build a synthesizer using teensy 4.2 and the teensy audio shield. We have collaborated on all aspects of the design and programming. Currently, the device is able to (1) sample and play back recordings, (2) assign samples and beats to steps on an 8-step sequencer, (3) adjust playback frequency, (4) play sine waves at variable frequency.&lt;/p&gt;
 
 &lt;p&gt;Moving forward, we are hoping to finalize the board layout and transition to battery power to allow the device to be operated untethered to the computer.&lt;/p&gt;</content><author><name></name></author><category term="engineering" /><category term="design" /><summary type="html">In the past few months, I have been working with a friend to build a synthesizer using teensy 4.2 and the teensy audio shield. We have collaborated on all aspects of the design and programming. Currently, the device is able to (1) sample and play back recordings, (2) assign samples and beats to steps on an 8-step sequencer, (3) adjust playback frequency, (4) play sine waves at variable frequency.</summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="http://localhost:4000/assets/images/synth/synth.jpg" /><media:content medium="image" url="http://localhost:4000/assets/images/synth/synth.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Fractal turbulence grid for wind turbine performance</title><link href="http://localhost:4000/turbulence/" rel="alternate" type="text/html" title="Fractal turbulence grid for wind turbine performance" /><published>2023-11-01T00:00:00-04:00</published><updated>2023-11-01T00:00:00-04:00</updated><id>http://localhost:4000/turbulence</id><content type="html" xml:base="http://localhost:4000/turbulence/">&lt;p&gt;In the fall of 2023, I worked on an independent study project with Professor Kenny Breuer to design a fractal grid to generate turbulence in a wind tunnel. The design was completed in Fusion360, inspired by similar fractal grids in literature. After conducting FEA within the software to determine the stress on the grid under gravity and drag force, I selected baltic birch plywood as the material. The grid was fabricated on a ShopBot CNC. I chose 3” vacuum cups to securely mount the grid to the smooth interior of the wind tunnel. I designed 3D-printed quick-releasing hook attachments for each corner of the grid to streamline installation and removal.&lt;/p&gt;
 

_site/flapper/index.html

@@ -158,8 +158,6 @@ <h3>3D-printed resin parts, metal hardware, pink foam, stepper motors<h3>
 
 
 
-
-
 
 
 

_site/hardwareSculpt/index.html

@@ -160,8 +160,6 @@ <h3>found objects<h3>
 
 
 
-
-
 
 
 

_site/krill/index.html

@@ -158,8 +158,6 @@ <h3>3D-printed PLA, laser-cut acrylic, arduino, CAD<h3>
 
 
 
-
-
 
 
 

_site/lamp/index.html

@@ -152,8 +152,6 @@ <h3>found indicator light panel, electrical wire, galvanized sheet metal<h3>
 
 
 
-
-
 
 
 

_site/project/index.html

@@ -139,8 +139,6 @@ <h3>umbrella, 3d-printed joints<h3>
 
 
 
-
-
 
 
 

_site/rings/index.html

@@ -158,8 +158,6 @@ <h3>brass, silver solder, guitar string beads, bushings<h3>
 
 
 
-
-
 
 
 

_site/rings2/index.html

@@ -154,8 +154,6 @@ <h3>brass, silver solder, Herkimer diamond, quartz<h3>
 
 
 
-
-
 
 
 

_site/structure/index.html

@@ -156,8 +156,6 @@ <h3>glass projector slides, copper tape, solder<h3>
 
 
 
-
-
 
 
 

_site/synth/index.html

@@ -55,7 +55,7 @@
 
 	<h1>DIY Mini Synthesizer Project</h1>
 
-<h3><i>December 2023</i></h3>
+<h3><i>January 2024</i></h3>
 
 
     <h3>Providence, RI<h3>
@@ -154,8 +154,6 @@ <h3>teensy 4.2, teensy audio shield, C<h3>
 
 
 
-
-
 
 
 

_site/tree/index.html

@@ -154,8 +154,6 @@ <h3>miscellaneous ceramic pieces<h3>
 
 
 
-
-
 
 
 

_site/turbulence/index.html

@@ -140,10 +140,6 @@ <h3>baltic birch ply, 3D-printed PLA, vacuum cup mounts<h3>
 
 
 
-            <img src="/assets/images/turbulence/diagram.png" alt="image" onclick="activateImg(this);" >
-
-
-
             <img src="/assets/images/turbulence/hook.png" alt="image" onclick="activateImg(this);" >