diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss index b0fae78..14f3783 100644 --- a/assets/css/_partial/_image.scss +++ b/assets/css/_partial/_image.scss @@ -1,104 +1,3 @@ -.image_container { - position: fixed; - top: 0; - left: 0; - opacity: 1; - display: flex; - align-items: center; - - img { - max-height: 50vmin; - max-width: 100vw; - height: auto; - width: auto; - object-fit: contain; - } - - &[data-status='t0'] { - transition: all 0.5s ease-in-out 0.6s; - max-height: calc(100vh - var(--footer-height)); - - img { - transition: all 0.5s ease-in-out 1.1s; - max-height: calc(100vh - var(--footer-height)); - } - } - - &[data-status='t1'] { - transition: all 0.2s ease-out 0.4s; - opacity: 0; - margin-top: 30px; - } - - &[data-status='t2'] { - transition: all 0.2s ease-out 0.3s; - opacity: 0; - margin-top: 30px; - } - - &[data-status='t3'] { - transition: all 0.2s ease-out 0.2s; - opacity: 0; - margin-top: 30px; - } - - &[data-status='t4'] { - transition: all 0.2s ease-out 0.1s; - opacity: 0; - margin-top: 30px; - } - - &[data-status='r0'] { - transition: all 0.5s ease-in-out 0.8s; - opacity: 1; - - img { - transition: all 0.8s ease-in-out 0s; - max-height: 50vmin; - } - } - - &[data-status='r1'] { - transition: all 0.2s ease-out 1.3s; - opacity: 1; - } - - &[data-status='r2'] { - transition: all 0.2s ease-out 1.4s; - opacity: 1; - } - - &[data-status='r3'] { - transition: all 0.2s ease-out 1.5s; - opacity: 1; - } - - &[data-status='r4'] { - transition: all 0.2s ease-out 1.6s; - opacity: 1; - } - - &#layer5 { - z-index: 1; - } - - &#layer4 { - z-index: 2; - } - - &#layer3 { - z-index: 3; - } - - &#layer2 { - z-index: 4; - } - - &#layer1 { - z-index: 5; - } -} - .images { img {