Portfolio: new gallery-style list page

assets/css/compiled/main.css

@@ -513,6 +513,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .prose {
   color: var(--tw-prose-body);
   max-width: 65ch;
@@ -1890,6 +1924,10 @@ body:has(#menu-controller:checked) {
   margin: auto;
 }
 
+.-m-4 {
+  margin: -1rem;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
@@ -1966,6 +2004,10 @@ body:has(#menu-controller:checked) {
   margin-bottom: 0.75rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -2054,6 +2096,14 @@ body:has(#menu-controller:checked) {
   height: 3rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -2062,10 +2112,6 @@ body:has(#menu-controller:checked) {
   height: 2rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-36 {
   height: 9rem;
 }
@@ -2189,10 +2235,18 @@ body:has(#menu-controller:checked) {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -2254,6 +2308,14 @@ body:has(#menu-controller:checked) {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -2262,6 +2324,10 @@ body:has(#menu-controller:checked) {
   border-left-width: 4px;
 }
 
+.border-solid {
+  border-style: solid;
+}
+
 .border-dotted {
   border-style: dotted;
 }
@@ -2347,11 +2413,21 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .object-scale-down {
   -o-object-fit: scale-down;
      object-fit: scale-down;
 }
 
+.object-center {
+  -o-object-position: center;
+     object-position: center;
+}
+
 .object-left {
   -o-object-position: left;
      object-position: left;
@@ -2361,6 +2437,14 @@ body:has(#menu-controller:checked) {
   padding: 1rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -2439,6 +2523,11 @@ body:has(#menu-controller:checked) {
   padding-bottom: 0.75rem;
 }
 
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -2552,6 +2641,10 @@ body:has(#menu-controller:checked) {
   font-weight: 600;
 }
 
+.font-black {
+  font-weight: 900;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -2572,6 +2665,10 @@ body:has(#menu-controller:checked) {
   line-height: 2rem;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -2620,6 +2717,16 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
 }
 
+.text-neutral-300 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
+}
+
+.text-neutral {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral), var(--tw-text-opacity));
+}
+
 .text-primary-700 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-700), var(--tw-text-opacity));
@@ -2705,11 +2812,21 @@ body:has(#menu-controller:checked) {
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
 }
 
+.hover\:border-neutral-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-600), var(--tw-border-opacity));
+}
+
 .hover\:bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
@@ -3187,6 +3304,10 @@ body:has(#menu-controller:checked) {
     width: 33.333333%;
   }
 
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
   .md\:p-\[10vh\] {
     padding: 10vh;
   }

content/portfolio/30daymapchallenge-2022.md

@@ -0,0 +1,19 @@
+
++++
+title = "30DayMapChallenge 2022"
+slug = "30daymapchallenge-2022"
+date = "2022-12-19T14:11:29Z"
+draft = false
+type = "portfolio"
+author = "osgav"
+showDate = false
+showReadingTime = false
+images = ["images/posts/30dmc/2022/fullres/all.jpg"]
+cover = "images/posts/30dmc/2022/fullres/all.jpg"
+keywords = ["30DayMapChallenge", "cartography", "map design", "GIS", "QGIS", "visidata"]
++++
+
+**blog post:** [30DayMapChallenge 2022](/blog/30daymapchallenge-2022.html)
+
+[![all](/images/posts/30dmc/2022/all.jpg)](/images/posts/30dmc/2022/fullres/all.jpg)
+

content/portfolio/a-map-of-melbourne.md

@@ -0,0 +1,19 @@
+
++++
+title = "A map of Melbourne"
+slug = "a-map-of-melbourne"
+date = "2022-08-24T11:09:13Z"
+draft = false
+type = "portfolio"
+author = "osgav"
+showDate = false
+showReadingTime = false
+images = ["images/posts/a-map-of-melbourne/melbourne_attractions.png"]
+cover = "images/posts/a-map-of-melbourne/melbourne_attractions.png"
+keywords = ["GIS", "QGIS", "maps", "map design", "cartography"]
++++
+
+**blog post:** [A map of Melbourne](/blog/a-map-of-melbourne.html)
+
+[![a map of Melbourne](/images/posts/a-map-of-melbourne/melbourne_attractions.png)](/images/posts/a-map-of-melbourne/melbourne_attractions.png)
+

content/portfolio/a-map-of-swellendam.md

@@ -0,0 +1,21 @@
+
++++
+title = "A map of Swellendam"
+slug = "a-map-of-swellendam"
+date = "2022-04-08T15:57:04Z"
+draft = false
+type = "portfolio"
+author = "osgav"
+showDate = false
+showReadingTime = false
+images = ["images/posts/a-map-of-swellendam/swellendam-01-full.png"]
+cover = "images/posts/a-map-of-swellendam/swellendam-01-full.png"
+keywords = ["GIS", "QGIS", "maps", "map design", "cartography"]
++++
+
+**blog post:** [A map of Swellendam](/blog/a-map-of-swellendam.html)
+
+[![swellendam01](/images/posts/a-map-of-swellendam/swellendam-01-web.png)](/images/posts/a-map-of-swellendam/swellendam-01-full.png)
+
+[![swellendam01](/images/posts/a-map-of-swellendam/swellendam-02-web.png)](/images/posts/a-map-of-swellendam/swellendam-02-full.png)
+

content/portfolio/jen-barry-site-selection.md

@@ -0,0 +1,19 @@
+
++++
+title = "GEOG 868: Jen and Barry's Site Selection"
+slug = "jen-barry-site-selection"
+date = "2022-09-01T15:12:42Z"
+draft = false
+type = "portfolio"
+author = "osgav"
+showDate = false
+showReadingTime = false
+images = ["images/posts/jen-barry-site-selection/jen_barry_site_selection_candidate_cities.png"]
+cover = "images/posts/jen-barry-site-selection/jen_barry_site_selection_candidate_cities.png"
+keywords = ["GIS", "SQL", "CLI", "site selection", "spatial analysis", "cartography", "map design", "PostGIS", "visidata", "psql", "ogr2ogr", "pgAdmin", "QGIS", "grayscale", "ice cream"]
++++
+
+**blog post:** [GEOG 868: Jen and Barry's Site Selection](/blog/jen-barry-site-selection.html)
+
+[![map of Jen and Barry's Site Selection candidate cities](/images/posts/jen-barry-site-selection/jen_barry_site_selection_candidate_cities.png)](/images/posts/jen-barry-site-selection/jen_barry_site_selection_candidate_cities.png)
+

content/portfolio/mapping-the-class-roster.md

@@ -0,0 +1,19 @@
+
++++
+title = "GEOG 868: Mapping the Class Roster"
+slug = "mapping-the-class-roster"
+date = "2022-08-18T16:15:45Z"
+draft = false
+type = "portfolio"
+author = "osgav"
+showDate = false
+showReadingTime = false
+images = ["images/posts/class-roster/class-roster-map.png"]
+cover = "images/posts/class-roster/class-roster-map.png"
+keywords = ["GIS", "SQL", "CLI", "database design", "map design", "cartography",  "PostGIS", "pgcli", "ogr2ogr", "QGIS"]
++++
+
+**blog post:** [GEOG 868: Mapping the Class Roster](/blog/mapping-the-class-roster.html)
+
+[![class roster map](/images/posts/class-roster/class-roster-map.png)](/images/posts/class-roster/class-roster-map.png)
+