Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
sound
@mixin flex-center() {
display: flex;
justify-content: center;
align-items: center;
}
$col-bg: #FFC568;
$col-lttr: #763C8C;
$col-line: #FFFFFF;
$to-mobile: 520px;
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
min-height: 100vh;
@include flex-center();
background-color: $col-bg;
font-size: 62.5%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@media screen and (max-width: $to-mobile) {
/* don't know how to set default units to rem in mojs :(( */
}
}
.container {
width: 50rem;
height: 20rem;
position: relative;
}
.svg-container {
z-index: 2;
position: absolute;
}
.mo-container {
width: 100%;
height: 100%;
}
.line {
fill: none;
stroke: $col-line;
stroke-width: 8;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.lttr {
fill: $col-lttr;
}
.sound {
position: fixed;
color: $col-lttr;
font-size: 1.6rem;
bottom: 1rem;
right: 1rem;
text-decoration: underline;
cursor: default;
&--off {
text-decoration: line-through;
}
}