Merge pull request #28 from MITLibraries/post-84-modern

Improved rendering of blocks on Page records

Author: matt-bernhardt

asset/css/base.css

@@ -9,4 +9,6 @@
 // We remove Open Sans from the font stack to prevent sending traffic to Google Fonts.
 body {
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 1.7rem;
+    line-height: 1.5;
 }

asset/scss/base.scss

@@ -2,3 +2,4 @@
 @import "navigation";
 @import "search";
 @import "site-page-pagination";
+@import "block-layout/all";

asset/scss/content/_all.scss

@@ -0,0 +1,6 @@
+@import "item-showcase";
+@import "item-with-metadata";
+@import "list-of-sites";
+@import "map";
+@import "media-embed";
+@import "resource";

asset/scss/content/block-layout/_all.scss

@@ -0,0 +1,32 @@
+.item-showcase {
+    border: none;
+    padding: 1rem;
+
+    // Omeka has a bizarre overly-specific rule specifying the maximum height of images in a showcase that ends up overriding the size selection feature. This unsets it.
+    .resource.item:not(:only-child) img {
+        max-height: inherit;
+    }
+
+    &.large {
+        .item.resource {
+            width: 31%;
+            margin-left: 1%;
+            margin-right: 1%;
+            padding: 0;
+        }
+    }
+
+    &.medium {
+        .item.resource {
+            width: 20rem;
+            padding: 0;
+        }
+    }
+
+    &.square {
+        .item.resource {
+            width: 20rem;
+            padding: 0;
+        }
+    }
+}

asset/scss/content/block-layout/_item-showcase.scss

@@ -0,0 +1,44 @@
+.item-with-metadata {
+    float: right;
+    margin-top: 0;
+    padding: 1rem;
+    width: 48%;
+
+    .show.resource {
+        container-type: inline-size;
+        margin: 0;
+        padding: 1rem;
+        text-align: left;
+
+        dl {
+            .property {
+                display: grid;
+                grid-template-columns: 1fr 2fr;
+                gap: 1rem;
+                margin-bottom: 1rem;
+
+                dt {
+                    grid-column: 1;
+                }
+
+                dd {
+                    grid-column: 2;
+                }
+            }
+        }
+
+    }
+}
+
+@container (width < 500px) {
+    .show.resource {
+        background: #fcc;
+    }
+}
+
+@media (width <= 600px) {
+    .item-with-metadata {
+        float: none;
+        width: 100%;
+    }
+}

asset/scss/content/block-layout/_item-with-metadata.scss

@@ -0,0 +1,18 @@
+.list-of-sites {
+    .site-list {
+        .site {
+            display: flow-root;
+            margin-bottom: 2rem;
+
+            .site-link {
+                font-size: 2.6rem;
+                text-decoration: none;
+
+                &:hover,
+                &:focus {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}

asset/scss/content/block-layout/_list-of-sites.scss

@@ -0,0 +1,3 @@
+.mapping-block {
+    margin-bottom: 1rem;
+}

asset/scss/content/block-layout/_map.scss

@@ -0,0 +1,45 @@
+body.page {
+    .blocks>.file {
+        border: none;
+        padding: 1rem;
+
+        .item.resource {
+            img {
+                margin: unset;
+            }
+
+            &:first-of-type {
+                padding: inherit;
+                margin: inherit;
+            }
+        }
+
+        &.medium {
+            .item.resource {
+                max-width: 20rem;
+            }
+        }
+
+        &.square {
+            .item.resource {
+                max-width: 20rem;
+            }
+        }
+
+        &.large {
+            max-width: 48%;
+        }
+
+        &.large.center {
+            margin: 0 auto;
+        }
+
+        &.right {
+            padding-right: 0;
+        }
+
+        &.left {
+            padding-left: 0;
+        }
+    }
+}

asset/scss/content/block-layout/_media-embed.scss

@@ -0,0 +1,44 @@
+body .resource {
+    margin: 1rem;
+    padding: 0;
+    text-align: center;
+
+    a {
+        display: block;
+        margin-bottom: 1rem;
+    }
+
+    h3 {
+        padding-bottom: 1rem;
+    }
+
+    img {
+        border: 1px solid $gray-l3;
+        box-shadow: 0 0 5px $gray-l3;
+        margin: 0;
+        padding: 1rem;
+    }
+
+    .caption {
+        padding: 0 1rem 1rem;
+        text-align: left;
+    }
+
+    h3 + .caption {
+        border-top: 1px solid $gray-l3;
+        padding-top: 1rem;
+    }
+
+    .file {
+        border: none;
+        margin: 0;
+    }
+
+    // There is a very-specific rule coming from Omeka core that we need to override.
+    &.item {
+        .caption {
+            font-size: 1.5rem;
+            line-height: 1.3;
+        }
+    }
+}