Initial Commit

styles/styles.css

@@ -0,0 +1,78 @@
+html {
+  margin: 0;
+  height: 100vh;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+}
+
+.photocollage {
+    display: flex;
+
+    justify-content: flex-start; 
+    align-items: flex-start; 
+    /* flex-flow: row wrap; */ 
+    flex-direction: row; 
+    flex-wrap: wrap; 
+    align-content: flex-start;
+
+    height: 100%;
+    padding: 15px;
+    gap: 5px;
+}
+
+.noto-sans-mono-font {
+  font-family: "Noto Sans Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+}
+
+.photo {
+  background-color: #eeeeee;
+  filter: drop-shadow(0px 3px 3px #888888);
+  display: inline-block;
+  padding: 1vh;
+  margin: 1vh;
+}
+
+.photocontent {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: normal;
+  align-content: normal;
+}
+
+.photoimage {
+  display: block;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  align-self: center;
+  order: 0;
+}
+
+.photoimagesrc {
+  max-width:40vw;
+  max-height:40vw;
+  width: auto;
+  height: auto;
+}
+
+.photodetails {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: auto;
+  align-self: flex-end;
+  order: 0;
+  text-align: right;
+  line-height: 70%;
+  font-size: 0.75rem;
+}