diff --git a/assets/css/components.css b/assets/css/components.css index 05e66a4..3e639f0 100644 --- a/assets/css/components.css +++ b/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); } diff --git a/assets/css/layout.css b/assets/css/layout.css index 0d9619f..65ba877 100644 --- a/assets/css/layout.css +++ b/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; } diff --git a/assets/css/media.css b/assets/css/media.css index 2d3ebbf..3c8cbda 100644 --- a/assets/css/media.css +++ b/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; + } +}