88 lines
1.4 KiB
SCSS
88 lines
1.4 KiB
SCSS
.tape-block{
|
|
max-width: 1000px;
|
|
|
|
margin: 2em auto;
|
|
|
|
&.simplified{
|
|
.tape{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tape-block__body{
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.tape {
|
|
width: 98px;
|
|
height: 98px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tape-tl {
|
|
top: -25px;
|
|
left: -25px;
|
|
background-image: url(/graphics/tape-tl.png);
|
|
}
|
|
|
|
.tape-tr {
|
|
top: -25px;
|
|
right: -25px;
|
|
background-image: url(/graphics/tape-tr.png);
|
|
}
|
|
|
|
.tape-bl {
|
|
bottom: 0;
|
|
left: -25px;
|
|
background-image: url(/graphics/tape-lb.png);
|
|
}
|
|
|
|
.tape-br {
|
|
bottom: 0;
|
|
right: -25px;
|
|
background-image: url(/graphics/tape-rb.png);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-device-width: 31.25em) {
|
|
.tape-block {
|
|
width: 90%;
|
|
margin: 1.5em auto;
|
|
}
|
|
|
|
.tape-block__body {
|
|
.tape {
|
|
width: 62px;
|
|
height: 62px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tape-tl {
|
|
top: -20px;
|
|
left: -20px;
|
|
background-image: url(/graphics/m-tape-tl.png);
|
|
background-size: 100%;
|
|
}
|
|
|
|
.tape-tr {
|
|
top: -20px;
|
|
right: -20px;
|
|
background-image: url(/graphics/m-tape-tr.png);
|
|
}
|
|
|
|
.tape-bl {
|
|
bottom: 10px;
|
|
left: -20px;
|
|
background-image: url(/graphics/m-tape-bl.png);
|
|
}
|
|
|
|
.tape-br {
|
|
bottom: 10px;
|
|
right: -20px;
|
|
background-image: url(/graphics/m-tape-br.png);
|
|
}
|
|
}
|
|
} |