Updates

static/css/album.css

@@ -0,0 +1,17 @@
+h1 {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+.imageMeta__wrapper,
+.imageMeta {
+  display: flex;
+  gap: 12px;
+}
+
+.imageMeta__wrapper {
+  gap: 2rem;
+}

static/css/base.css

@@ -1,11 +1,39 @@
+a {
+  text-decoration: none;
+}
+
 body {
+  background-color: black;
+  color: white;
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; 
 }
 
-main {
-  margin: 0 18vw;
+nav {
+  display: flex;
+  align-items: center;
 }
 
-img {
-  max-width: 100%;
+.logo {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+main {
+  margin: 0 24vw;
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  gap: 10px;
+}
+
+@media only screen and (max-width: 812px) {
+  main {
+    margin: 0;
+  }
+  footer {
+    flex-direction: column;
+    text-align: center;
+  }
 }

static/fonts/Material-Icons-Outlined.css

@@ -0,0 +1,22 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(Material-Icons-Outlined.woff2) format('woff2');
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}