1 files changed, 202 insertions, 0 deletions
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
new file mode 100644
index 0000000..40b4e7a
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -0,0 +1,202 @@
+@media (max-width: 600px) {
+
+  /* document sizing */
+
+  body {
+    min-height: 100vh;
+    /* mobile viewport bug fix */
+    min-height: -webkit-fill-available;
+  }
+  html {
+    height: -webkit-fill-available;
+  }
+  .app > div {
+    height: 100vh;
+    height: -webkit-fill-available;
+  }
+  .viewer-nav > .nav-row > div.nav-player-container {
+    display: none;
+  }
+  .viewer-nav > .main-nav > div:nth-child(1) {
+    width: 75%;
+  }
+  .viewer-nav > .main-nav > div:nth-child(3) {
+    width: 25%;
+  }
+
+  /* basically everything is a single column with some side padding */
+  
+  .credits,
+  .schedule,
+  .schedule-about,
+  .player-transcript .paragraph,
+  .player-transcript .paragraph.intro_paragraph,
+  .player-transcript .media .citation {
+    width: 100%;
+    padding-left: 1.0rem;
+    padding-right: 1.0rem;
+  }
+
+  /* font settings for body text */
+  
+  .player-transcript .section_heading {
+    font-size: 2rem;
+  }
+  .player-transcript .paragraph.intro_paragraph {
+    font-size: 1.8rem;
+    line-height: 1.1;
+  }
+  .player-transcript .paragraph {
+    max-width: none;
+  }
+  .speaker-icon {
+    display: none;
+  }
+
+  /* logo and header icons */
+
+  .eflux-nav .transcript-icon {
+    display: none;
+  }
+  .eflux-nav .playToggle,
+  .eflux-nav .transcript-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .eflux-logo {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .growl-tooltip {
+    display: none;
+  }
+
+  /* nav */
+
+  .viewer-nav {
+    position: fixed;
+  }
+  .viewer-sections {
+    position: fixed;
+  }
+  .sections-nav.viewer-nav > .nav-row > div {
+
+  }
+  .sections-nav > .nav-row > div.credits-element,
+  .sections-nav > .nav-row > div.checklist-element {
+    
+  }
+  .sections-nav > .nav-row > div.subscribe-link,
+  .sections-nav > .nav-row > div.footnotes-link,
+  .sections-nav > .nav-row > div.transcript-link {
+    display: none;
+  }
+  .checklist-open .viewer-sections {
+    transform: translateZ(0) translateY(calc(3rem - 100%));
+    height: 100%;
+  }
+
+  /* checklist */
+
+  .checklist-dropdown-column {
+  }
+  .checklist-inner {
+    width: 100%;
+  }
+  .checklist-section {
+    border-top: 0;
+  }
+  .checklist-row {
+    position: relative;
+    flex-direction: column;
+    border-top: 1px solid;
+  }
+  .checklist-dropdown-placeholder {
+    display: none;
+  }
+  .checklist-row > div {
+    width: calc(50vmin - 0.5rem);
+    padding-left: 1rem;
+  }
+  .checklist-row .media-image {
+    position: absolute;
+    top: 0.75rem;
+    right: 1rem;
+    width: calc(50vmin - 1.5rem);
+    max-height: 8rem;
+  }
+  .checklist-table {
+    width: 100%;
+    margin: 1rem 0;
+  }
+  .checklist-row {
+    line-height: 1.2;
+    margin-bottom: 1.0rem;
+  }
+  .checklist-row .media-id,
+  .checklist-row .media-section {
+    margin-bottom: 1.0rem;
+  }
+  .checklist-row .media-thumbnail img {
+    max-width: 100%;
+  }
+
+  /* transcript, should we show it */
+
+  .transcript {
+    width: 100vw;
+  }
+  .transcript .content {
+    border-left: 0;
+  }
+
+
+  /* schedule and credits */
+
+  .schedule-row {
+    flex-direction: column;
+  }
+  .schedule-title {
+    width: 100%;
+  }
+  .credits {
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+  .credits > div {
+    width: calc(50% - 0.5rem);
+    margin-right: 0;
+  }
+  .open ~ .artist-columns {
+    height: 100%;
+  }
+  .schedule .credits {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .schedule .credits {
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+  .schedule .credits > div {
+    width: 100%;
+    margin-right: 0;
+    padding: 0;
+    padding-right: 0.5rem;
+  }
+  .schedule .credits > div:first-child {
+    padding-top: 0.375rem;
+  }
+
+  /* site credits */
+
+  .site-credits {
+    width: 100%;
+    padding: 0 1rem;
+  }
+  .venue-name {
+    padding-bottom: 0.75rem;
+  }
+
+
+}