diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css index fa3cfb1..06e804c 100644 --- a/prosopopee/themes/exposure/static/css/style.css +++ b/prosopopee/themes/exposure/static/css/style.css @@ -445,23 +445,24 @@ input:checked + .slider:before { /* BEGIN polaroid-group */ a.polaroid { /*Size by calculating image size*/ - width: auto !important; + width: 60vw !important; height: auto !important; + max-height: 50vw !important;/*expermtal*/ + left: 0px !important; + top: 0px !important; + position:static !important; } - /* Size image for mobile so screen is not getting */ - a.polaroid img { - -webkit-transform: scale(0.7); /* Saf3.1+, Chrome */ - -moz-transform: scale(0.7); /* FF3.5+ */ - -ms-transform: scale(0.7); /* IE9 */ - -o-transform: scale(0.7); /* Opera 10.5+ */ - transform: scale(0.7); - /* IE6–IE9 */ - filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand'); + .leftpola { + -webkit-transform: rotate(-15deg) !important; + -moz-transform: rotate(-15deg) !important; + transform: rotate(-15deg) !important; } - a.polaroid h5 { - display: none !important; /*No image text on mobile - too small space*/ + .rightpola { + -webkit-transform: rotate(15deg) !important; + -moz-transform: rotate(15deg) !important; + transform: rotate(15deg) !important; } /* END polaroid-group */ } diff --git a/prosopopee/themes/exposure/templates/sections/polaroid-group.html b/prosopopee/themes/exposure/templates/sections/polaroid-group.html index a19ac9f..0576d78 100644 --- a/prosopopee/themes/exposure/templates/sections/polaroid-group.html +++ b/prosopopee/themes/exposure/templates/sections/polaroid-group.html @@ -47,7 +47,7 @@ data-at-800="{{ image.generate_thumbnail("x800") }}" data-at-1366="{{ image.generate_thumbnail("x1366") }}" data-at-1920="{{ image.generate_thumbnail("x1920") }}" - class="polaroid" + class="polaroid {% if (loop.index%2 == 1) %}rightpola{% else %}leftpola{% endif %}" style="{% if w %}width:{{ w }};{% endif %}{% if h %}height: {{ h }};{% endif %}{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);"> {% if caption %} {{ caption }}