wip

assets/css/components.css

@@ -23,10 +23,12 @@
 }
 
 .preview {
+  display: flex;
   position: absolute;
-  top: calc(50% - 2rem);
+  left: calc(50% - 3.25rem);
   background: var(--color-white);
   box-shadow: var(--shadow-outset);
+  transform: rotate(-90deg);
   cursor: pointer;
 }
 
@@ -35,13 +37,13 @@
 }
 
 .preview--prev {
-  left: 0;
+  bottom: 0;
   padding: 1.25rem 1rem 1.25rem 1.5rem;
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
 }
 
 .preview--next {
-  right: 0;
+  top: 0;
   padding: 1.25rem 1.5rem 1.25rem 1rem;
   border-radius: var(--border-radius) 0 0 var(--border-radius);
 }

assets/css/layout.css

@@ -222,32 +222,6 @@
   z-index: 10;
 }
 
-/* .section--preview.horizontal .close--preview {
-  left: 0.25rem;
-  right: unset;
-}
-
-.section--preview.horizontal img {
-  width: 90vh;
-  height: 90vw;
-  transform: rotate(-90deg);
-}
-
-.section--preview.horizontal .preview {
-  left: calc(50% - 3.25rem);
-  transform: rotate(-90deg);
-}
-
-.section--preview.horizontal .preview--prev {
-  top: unset;
-  bottom: 0;
-}
-
-.section--preview.horizontal .preview--next {
-  top: 0;
-  right: unset;
-} */
-
 .section--preview.is-open {
   display: flex;
 }
@@ -262,14 +236,6 @@
   transform: rotate(-90deg);
 }
 
-@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
-  .section--preview img {
-    width: 90vw;
-    height: 90vh;
-    transform: rotate(0deg);
-  }
-}
-
 .section--switch .section__intro{
   flex-direction: column;
 }

assets/css/media.css

@@ -167,3 +167,23 @@
     bottom: 20%;
   }
 }
+
+@media screen and (min-width: 20rem) and (max-width: 47.9375rem) and (orientation: landscape) {
+  .section--preview img {
+    width: 90vw;
+    height: 90vh;
+    transform: rotate(0deg);
+  }
+
+  .section--preview .preview {
+    top: calc(50% - 3.25rem);
+    left: 0;
+    transform: rotate(180deg);
+  }
+  
+  .section--preview .preview--prev {
+    left: unset;
+    right: 0;
+    bottom: unset;
+  }
+}