Contents

.img-wrap
    display: flex
    justify-content: center
    position: relative
    object-fit: cover

    overflow: hidden
    max-width: 100%

    img
        max-width: 100vw
        @include media-query('md')
            max-width: 100%

    a > *
        max-width: 80% 



.gallery .img-wrap
    margin: 0
    width: 100%
    height: 0
    padding-top: 100%
    img, a
        position: absolute
        top: 0em
        height: 100%
        width: auto


@include media-query('md')
    .layout\:post .img-wrap
        width: 33%

    .img-wrap.float-left
        margin-right: var(--x)
        margin-bottom: var(--x)
    .img-wrap.float-right
        margin-left: var(--x)
        margin-bottom: var(--x)


.img-wrap[openable] a
    transition: transform .5s ease-in-out .2s, opacity .5s ease-in-out .2s
    color: var(--scribe-white) !important
    &:hover, &:focus
        color: var(--scribe-white) !important
        text-decoration: none
    display: flex
    width: 100%
    background-color: #000a
    opacity: 0.0
    div
        margin: auto

.img-wrap[viewer], 
.img-wrap[openable]
    transform: scale(1)
    transition: transform .2s .05s
    
    img
        transform: scale(1)
        transition: transform .5s .05s

.img-wrap[viewer]:hover:not([viewer="open"]),
.img-wrap[openable]:hover:not([viewer="open"])
    transform: scale(1.05)
    img
        transform: scale(1.1)
    a
        opacity: 1.0
        transform: scale(1.02)

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
frame9-jekyll-theme-1.1.0	_sass/block/img-wrap.sass