Initial

frontend/style.css

@@ -0,0 +1,99 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+#map {
+  width: calc(100% - 316px);
+  height: 100%;
+}
+#detail-map {
+  width: 100%;
+  height: 200px;
+}
+#card-container {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 810;
+  height: 100%;
+  width: 316px;
+  overflow: auto;
+  /* filter: drop-shadow(0 0 2px #000); */
+}
+
+.card {
+  margin: 8px;
+}
+.card img {
+  height: 200px;
+  object-fit: cover;
+  /* no-img fallback */
+  line-height: 200px;
+  background: #666;
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: 24px;
+}
+.card:hover {
+  border-color: green;
+}
+
+.pin svg {
+  filter: drop-shadow(0 0 5px #888);
+  width: 100%;
+  height: 100%;
+}
+.pin.selected {
+  z-index: 800 !important;
+}
+.pin.selected svg {
+  filter: drop-shadow(0 0 5px yellow);
+}
+.pin.later {
+  fill-opacity: 0;
+}
+
+/* badge */
+.badge {
+  color: black;
+}
+.badge.inv {
+  color: white;
+}
+
+.group-dot {
+  display: inline-block;
+  border-radius: 50%;
+  border: .5px solid black;
+  width: 1em;
+  height: 1em;
+}
+
+#spin {
+  z-index: 820;
+}
+#card-template {
+  display: none;
+}
+
+#detail img {
+  /* max-width: 100%; */
+  object-fit: cover;
+  width: 100%;
+  max-height: 600px;
+}
+
+#detail audio {
+  width: 100%;
+}
+
+@media(max-width: 768px) {
+  #card-container {
+    width: 100%;
+  }
+  .card img {
+    height: calc(100vw * 2/3);
+    line-height: calc((100vw - 20px) * 2/3);
+  }
+}