collage

public/styles.css

@@ -77,6 +77,7 @@ label {
 
 input,
 select,
+textarea,
 button {
   min-height: 42px;
   border: 1px solid #c8d2dc;
@@ -85,12 +86,19 @@ button {
 }
 
 input,
-select {
+select,
+textarea {
   width: 100%;
   padding: 0 12px;
   background: #fff;
 }
 
+textarea {
+  min-height: 128px;
+  padding-block: 10px;
+  resize: vertical;
+}
+
 button {
   padding: 0 18px;
   border-color: #153f66;
@@ -107,6 +115,15 @@ button {
   align-items: end;
 }
 
+.collage-form {
+  padding-top: 20px;
+  border-top: 1px solid #d9e0e7;
+}
+
+.collage-controls {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
 .checkbox-label {
   display: flex;
   min-height: 42px;
@@ -183,6 +200,92 @@ code {
   object-fit: cover;
 }
 
+.collage-page {
+  background: var(--chroma);
+}
+
+.collage-page.transparent {
+  background: transparent;
+}
+
+.collage-stage {
+  width: min(100vw, var(--stage-width));
+  height: min(100vh, var(--stage-height));
+  overflow: hidden;
+  display: grid;
+  justify-items: center;
+  padding: var(--collage-spacing);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--collage-fade),
+    #000 calc(100% - var(--collage-fade)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--collage-fade),
+    #000 calc(100% - var(--collage-fade)),
+    transparent 100%
+  );
+}
+
+.collage-track {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  align-items: stretch;
+  gap: var(--collage-spacing);
+  animation: collage-scroll var(--collage-duration) linear infinite;
+  will-change: transform;
+}
+
+.collage-group {
+  display: grid;
+  grid-template-columns: repeat(var(--collage-columns), minmax(0, var(--collage-card-width)));
+  gap: var(--collage-spacing);
+}
+
+.collage-card {
+  align-self: start;
+  width: 100%;
+  height: auto;
+  max-width: var(--collage-card-width);
+  overflow: hidden;
+  transform: none;
+}
+
+.collage-card > iframe,
+.collage-card > blockquote,
+.collage-card > img,
+.collage-card > video {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.collage-card iframe,
+.collage-card blockquote,
+.collage-card img,
+.collage-card video,
+.collage-card twitter-widget,
+.collage-card .twitter-tweet,
+.collage-card .bluesky-embed {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+}
+
+@keyframes collage-scroll {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(calc(-50% - (var(--collage-spacing) / 2)));
+  }
+}
+
 .error {
   border-color: #d77;
 }