1 files changed, 156 insertions, 1 deletions
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 0427766..63fa860 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -109,6 +109,12 @@ a {
   color: #fff;
   text-shadow: 0 0 2px #000;
   transition: opacity 0.2s;
+  opacity: 0;
+  pointer-events: none;
+}
+.legend.visible {
+  opacity: 1;
+  pointer-events: auto;
 }
 .legend .category {
   cursor: pointer;
@@ -157,6 +163,9 @@ a {
   height: 100vh;
   width: 50vw;
 }
+.detail > div.content {
+  height: auto;
+}
 .detail .content > div {
   min-height: 100%;
   padding: 3rem 5rem 6rem 5rem;
@@ -263,7 +272,6 @@ a {
 }
 .quote.visible {
   opacity: 1;
-  pointer-events: auto;
 }
 .quote div {
   text-align: right;
@@ -412,3 +420,150 @@ a {
   cursor: pointer;
   height: 1.5rem;
 }
+
+/** landscape warning */
+
+.landscape-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background: #111111;
+  color: #fff;
+  font-family: "Helvetica", sans-serif;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.landscape-warning .landscape-message {
+  margin: 2rem 0;
+  text-align: center;
+}
+.landscape-warning path {
+  fill: #fff;
+}
+.landscape-warning .rotate-icon {
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: -0.5rem;
+}
+.landscape-warning .phone-icon {
+  width: 3rem;
+  height: 3rem;
+  transform: rotate(90deg);
+}
+.landscape-warning .last-museum-logo {
+  width: 8rem;
+}
+
+@media only screen and (max-height: 500px) {
+  .intro .close {
+    top: 1rem;
+    right: 1rem;
+  }
+  .site-title {
+    top: 1rem;
+  }
+  .site-title img {
+    height: 1rem;
+  }
+  .quote {
+    top: 1rem;
+    right: 1rem;
+    font-size: 0.75rem;
+  }
+  .credits-link {
+    bottom: 0;
+    right: 0;
+    margin: 0;
+    padding: 1rem;
+  }
+  .legend {
+    bottom: 1rem;
+    left: 1rem;
+    margin: 0;
+  }
+  .scene-tooltip {
+    display: none !important;
+  }
+
+  /* detail */
+  .detail {
+    flex-direction: column-reverse;
+    overflow-y: scroll;
+  }
+  .detail .media {
+    box-sizing: border-box;
+    padding: 0;
+  }
+  .gallery {
+    margin-top: 3rem;
+    position: relative;
+  }
+  .gallery .buttons.arrows {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: auto;
+  }
+  .buttons.close {
+    width: auto;
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 1rem;
+    margin: 0;
+    z-index: 1;
+  }
+  .detail > div {
+    width: 100%;
+  }
+  .gallery .image img {
+    max-height: calc(100vh - 4rem);
+  }
+  .clocks {
+    height: calc(100vh - 6rem);
+  }
+
+  .detail .content {
+    overflow: visible;
+  }
+  .detail .content > div {
+    padding: 1rem 3rem;
+  }
+
+  /* credits */
+  .credits .row,
+  .credits .bibliography {
+    flex-direction: column;
+  }
+  .credits .row .column {
+    width: 100%;
+    padding: 0 0 1rem 0;
+    position: static;
+  }
+  .credits .row .column:first-child {
+    padding-top: 2rem;
+  }
+  .credits .inner {
+    padding: 1rem;
+  }
+  .credits .close {
+    position: fixed;
+    right: 1rem;
+  }
+  .credits .bibliography .column {
+    width: 100%;
+    padding: 0 0;
+  }
+  .credits .logos {
+    padding: 0;
+  }
+  .credits .logos a {
+    padding: 0.5rem;
+  }
+}