8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
# File 'lib/jekyll/before_after_generator.rb', line 8
def generate(site)
css_content = %q{<style>
.before-after{position:relative;overflow:hidden;cursor:col-resize;user-select:none;touch-action:none;border-radius:var(--ba-radius, 4px);background:var(--ba-bg, #000);margin-bottom:2rem}
.before-after[data-orientation="vertical"]{cursor:row-resize}
.before-after--dragging{cursor:grabbing}
.before-after__after{position:relative;display:block}
.before-after__after img,.before-after__after picture img{display:block;width:100%;height:auto;pointer-events:none}
.before-after__before{position:absolute;inset:0;z-index:1;clip-path:inset(0 50% 0 0)}
.before-after__before img,.before-after__before picture img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.before-after__label{position:absolute;bottom:.75rem;z-index:2;padding:.25rem .6rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--ba-label-bg, rgba(0, 0, 0, 0.55));color:var(--ba-label-color, #fff);border-radius:var(--ba-label-radius, 3px);pointer-events:none}
.before-after__label--before{left:.75rem}
.before-after__label--after{right:.75rem}
.before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:10;display:flex;align-items:center;justify-content:center;outline:0}
.before-after__handle:focus-visible .before-after__handle-knob{box-shadow:0 0 0 3px var(--ba-focus-ring, rgba(255, 255, 255, 0.8))}
.before-after__handle-line{position:absolute;background:var(--ba-handle-color, #fff);opacity:.85}
.before-after:not([data-orientation="vertical"]) .before-after__handle-line{width:var(--ba-line-width, 2px);top:-200%;bottom:-200%;left:50%;transform:translateX(-50%)}
[data-orientation="vertical"] .before-after__handle-line{height:var(--ba-line-width, 2px);left:-200%;right:-200%;top:50%;transform:translateY(-50%)}
.before-after__handle-knob{position:relative;z-index:1;width:var(--ba-knob-size, 2.75rem);height:var(--ba-knob-size, 2.75rem);border-radius:50%;background:var(--ba-handle-color, #fff);color:var(--ba-knob-icon-color, #333);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0, 0, 0, 0.35);transition:transform .15s ease, box-shadow .15s ease;cursor:grab}
.before-after__handle-knob svg{width:1.1rem;height:1.1rem}
.before-after--dragging .before-after__handle-knob{cursor:grabbing;transform:scale(1.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.45)}
[data-orientation="vertical"] .before-after__handle-knob svg{transform:rotate(90deg)}
</style>}
site.data['before_after_css'] = css_content
end
|