some more changes

sass/gallery.scss

@@ -1,14 +1,22 @@
 @import "variables";
 
+
 .gallery {
   display: grid;
-  grid-auto-flow: row dense; 
-  grid-auto-rows: 1fr; 
-  grid-template-columns: 1fr 1fr 1fr; 
-  grid-template-rows: 1fr 1fr 1fr; 
-  gap: 2em 2em; 
-  grid-template-areas: 
-    ". . ."
-    ". . ."
-    ". . .";
+  grid-auto-flow: row dense;
+  grid-auto-rows: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2em 2em;
+
+  img {
+    max-width: 100%;
+  }
+
+  img:hover {
+    border: 2px ridge var(--accent);
+  }
+}
+
+.gallery:has(img:hover) img:not(:hover) {
+  filter: brightness(0.5) contrast(0.5);
 }

sass/main.scss

@@ -13,7 +13,11 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: Monaco, Consolas, Ubuntu Mono, monospace;
+  font-family:
+    Monaco,
+    Consolas,
+    Ubuntu Mono,
+    monospace;
   font-size: 1rem;
   line-height: 1.54;
   background-color: var(--background);
@@ -27,7 +31,8 @@ body {
     font-size: 1rem;
   }
 }
-h1, h2 {
+h1,
+h2 {
   display: flex;
   align-items: center;
   font-weight: 500;
@@ -35,7 +40,10 @@ h1, h2 {
   color: var(--accent2);
 }
 
-h3, h4, h5, h6 {
+h3,
+h4,
+h5,
+h6 {
   display: flex;
   align-items: center;
   font-weight: 400;
@@ -54,17 +62,17 @@ h2 {
   padding-bottom: 7px;
 }
 
-
 h3 {
   font-size: 1.2rem;
   font-weight: bolder;
 }
 
-h4, h5, h6 {
+h4,
+h5,
+h6 {
   font-size: 1.15rem;
 }
 
-
 a {
   color: inherit;
 }
@@ -142,16 +150,16 @@ code {
   background: var(--accent-alpha-20);
   padding: 1px 6px;
   margin: 0 2px;
-  font-size: .95rem;
+  font-size: 0.95rem;
 }
 
 pre {
   font-family: monospace;
   padding: 20px;
-  font-size: .95rem;
+  font-size: 0.95rem;
   overflow: auto;
-  border-top: 1px solid rgba(255, 255, 255, .1);
-  border-bottom: 1px solid rgba(255, 255, 255, .1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
   @media (max-width: $phone-max-width) {
     white-space: pre-wrap;
@@ -176,7 +184,7 @@ blockquote {
   }
 
   &:before {
-    content: '”';
+    content: "”";
     font-family: Georgia, serif;
     font-size: 3.875rem;
     position: absolute;
@@ -197,7 +205,7 @@ blockquote {
   }
 
   p:before {
-    content: '>';
+    content: ">";
     display: block;
     position: absolute;
     left: -25px;
@@ -212,7 +220,9 @@ table {
   margin: 40px 0;
 }
 
-table, th, td {
+table,
+th,
+td {
   border: none;
   padding: 10px;
 }
@@ -222,11 +232,11 @@ th {
 }
 
 td {
-   border-bottom: 1px dotted var(--accent);
- }
+  border-bottom: 1px dotted var(--accent);
+}
 
-
-ul, ol {
+ul,
+ol {
   margin-left: 30px;
   padding: 0;
 
@@ -247,12 +257,13 @@ ol ol {
   display: flex;
   flex-direction: column;
   padding: 40px;
-  max-width: 864px;
+  max-width: 75vw;
   min-height: 100vh;
   margin: 0 auto;
 
   @media (max-width: $phone-max-width) {
     padding: 20px;
+    max-width: 864px;
   }
 }
 
@@ -276,11 +287,11 @@ hr {
     break-inside: avoid-page;
     padding-top: 1rem;
   }
-  p, table {
+  p,
+  table {
     break-inside: avoid-page;
   }
   .noprint {
     display: none;
   }
 }
-

templates/shortcodes/gallery.html

@@ -1,10 +1,9 @@
 <div class="gallery">
-{% for asset in page.assets -%}
-  {%- if asset is matching("[.](jpg|png)$") -%}
-    {% set image = resize_image(path=asset, width=960, height=720, op="fit") %}
+  {% for asset in page.assets -%} {%- if asset is matching("[.](jpg|png)$") -%}
+  {% set image = resize_image(path=asset, width=960, height=720, op="fit") %}
     <a href="{{ get_url(path=asset) }}" target="_blank">
       <img src="{{ image.url }}" />
     </a>
-  {%- endif %}
-{%- endfor %}
+  </label>
+  {%- endif %} {%- endfor %}
 </div>