Converted slideshow to flexbox

diff --git a/commercial/groke/index.html b/commercial/groke/index.html
index 60a5dc786fb59fffdb47e2ee7adc3e70476a88f1..d5330677d88d4d5035d1174331163ccee41f8234 100644 (file)
--- a/commercial/groke/index.html
+++ b/commercial/groke/index.html
@@ -48,8 +48,7 @@
                        </ul>
                </nav>
                <main>
-                       <div class="slideshow full">
-                               <img
+                       <div class="slideshow full"><img
                                        srcset="/media/photos_960/groke1.jpg,
                                                /media/photos_1920/groke1.jpg x2,
                                                /media/photos_3840/groke1.jpg x4"

diff --git a/script.js b/script.js
index 9d9f24412f4f8cb4485ad9bd7411b53bb45a63c4..b19680cebf4e75c0db4187ed49e6a607f3633fcc 100644 (file)
--- a/script.js
+++ b/script.js
@@ -150,7 +150,8 @@ function setup () {
                border: 1px solid red;
                color: red;
                background-color: white;
-               z-index: 100
+               z-index: 100;
+               overflow: scroll;
        ">
        <summary>Change notes Chester</summary>
        <p>Requests implemented from last meeting:</p>
@@ -182,12 +183,9 @@ function setup () {
        </ul>
        <p>Still todo:</p>
        <ul>
-               <li>Clickthrough all images when in focus mode</li>
-               <li>Mobile view</li>
-               <li>Dark mode???</li>
-               <li>Annotated images</li>
-               <li>Look into image scaling mechanic</li>
-               <li>Possibly closed captions on audio</li>
+               <li>Annotated images if needed</li>
+               <li>Briefly look into image scaling</li>
+               <li>Dark mode if needed</li>
        </ul>
 </details>`;
 

diff --git a/style.css b/style.css
index 208b55e9ac70c83dfead3610d22fdf1be4882b18..9728b28f9dc47f1d0181a9d985736d28e9f05382 100644 (file)
--- a/style.css
+++ b/style.css
@@ -130,6 +130,7 @@ blockquote {
        margin-bottom: calc(30px + 25px);
        width: calc(55vw - 25px);
        height: calc((55vw - 25px) / 1.5);
+       display: flex;
 }
 .slideshow.full {
        --full-overhang: 8vw;
@@ -139,7 +140,7 @@ blockquote {
 }
 .slideshow > *:not(span) {
        display: inline-block;
-       width: 99%;
+       width: 98%;
        height: 100%;
        object-fit: contain;
 }
@@ -153,7 +154,8 @@ blockquote {
        line-height: 100%;
        z-index: 0;
        cursor: pointer;
-       color: var(--darkgray)
+       color: var(--darkgray);
+       flex-wrap: nowrap;
 }
 .slideshow > span:hover { color: var(--mediumgray); }
 .prev {
@@ -280,3 +282,89 @@ blockquote {
        background-color: rgba(0,0,0,0.5);
        font-style: italic;
 }
+
+@media (orientation: portrait) {
+       :root {
+               font-size: 1.3em;
+       }
+
+       nav {
+               position: static;
+               padding: 50px 25px 50px 25px;
+       }
+       main {
+               position: static;
+               padding: 50px 25px 50px 25px;
+       }
+
+       .audioNote {
+               width: 100%;
+               margin: 40px 0 40px 0;
+       }
+       .audioNote audio {
+               width: 100%;
+       }
+       .audioNote aside {
+               width: calc(100% - 40px);
+               margin: 20px;
+       }
+       .audioNote.reversed aside { text-align: left; }
+
+       .blockquoteImage {
+               width: 100%;
+               margin: 40px 0 40px 0;
+       }
+       .blockquoteImage img {
+               width: 100%;
+       }
+       .blockquoteImage blockquote {
+               display: inline-block;
+               width: 100%;
+               margin: 40px 0 40px 0;
+               text-align: right;
+       }
+
+       .blockquoteImage.reversed {
+               margin-left: 0
+       }
+       .blockquoteImage.reversed blockquote {
+               text-align: left;
+       }
+
+       .slideshow, .slideshow.full {
+               margin: 0;
+               margin-top: 50px;
+               margin-bottom: calc(30px + 25px);
+               width: calc(100vw - 50px);
+               height: calc((100vw - 50px) / 1.5);
+       }
+       .slideshow > *:not(span) {
+               display: inline-block;
+               width: 92%;
+               height: 100%;
+               object-fit: contain;
+       }
+       .slideshow > span {
+               position: relative;
+               display: inline-flex;
+               align-items: center;
+               vertical-align: top;
+               width: 27%;
+               height: 100%;
+               line-height: 100%;
+               z-index: 0;
+               cursor: pointer;
+               color: var(--darkgray)
+       }
+       .slideshow > span:hover { color: var(--mediumgray); }
+       .prev {
+               justify-content: flex-start;
+               margin-left: -2%;
+               margin-right: -22%;
+       }
+       .next {
+               justify-content: flex-end;
+               margin-left: -22%;
+               margin-right: -2%;
+       }
+}