|
$fs: 5rem; |
|
$lh: 1.25; |
|
$shadow-h: 1.25em; |
|
|
|
*, :before, :after { |
|
margin: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
html { |
|
background: #ececea; |
|
font-size: 125%; |
|
counter: art; |
|
|
|
@media (max-width: 200px) { |
|
font-size: 62.5% |
|
} |
|
} |
|
|
|
article { |
|
--wide: 0; |
|
--base: calc(var(--wide)*#{$fs}); |
|
--size: #{.25*$fs}; |
|
--left: calc(.5*(1 + var(--wide))*#{$fs}); |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
position: relative; |
|
margin: 2em auto; |
|
padding-left: calc(var(--wide)*#{1.5*$fs}); |
|
width: 32em; max-width: 90%; |
|
min-height: $lh*$fs; |
|
font: 1em/ #{$lh} roboto, trebuchet ms, verdana, arial, sans-serif; |
|
counter-increment: art; |
|
filter: drop-shadow(-1px 3px 3px rgba(#000, .15)); |
|
|
|
@media (min-width: 640px) { --wide: 1 } |
|
|
|
&:before, &:after { position: absolute } |
|
|
|
&:before { |
|
left: .25em; |
|
color: #fff; |
|
font-size: var(--base); |
|
content: '0'counter(art) |
|
} |
|
|
|
&:after { |
|
--grad: linear-gradient(#fff, #e0e0e0); |
|
top: 0; right: 0; bottom: -$shadow-h; left: 0; |
|
z-index: -1; |
|
padding-left: inherit; |
|
border-bottom: solid .75*$shadow-h transparent; |
|
transform: skewx(calc(var(--wide)*-22.5deg)); |
|
background: var(--grad) 100% 50%/ calc(100% - (var(--base) + var(--left) + var(--wide)*var(--size)) + 1px) 100% no-repeat padding-box, |
|
var(--grad) calc(var(--base) + (1 + 2*var(--wide))*var(--size)) 50%/ var(--size) 100% no-repeat padding-box, |
|
radial-gradient(ellipse at 100% 50%, rgba(#000, .13), transparent 35%) 0 50%/ var(--size) 250% content-box, |
|
linear-gradient(var(--c0) 50%, var(--c1) 0) padding-box, |
|
radial-gradient(rgba(#000, .1), transparent 70%) 100% 100%/ calc(100% - (var(--base) + 2*var(--size))) $shadow-h border-box no-repeat; |
|
content: '' |
|
} |
|
} |
|
|
|
h3, p { padding-left: var(--left) } |
|
|
|
h3 { |
|
background: linear-gradient(var(--c0), var(--c1)); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
text-transform: capitalize; |
|
filter: brightness(.85) |
|
} |