Eryn Wells
122e55b1fa
Implement the rubiks-cube-scrambler custom element, including JS and template files. Put these things in the body-extras.html partial that the termlite theme added. resource-builders: Update submodule commit termlite: Update submodule commit
61 lines
1.4 KiB
HTML
61 lines
1.4 KiB
HTML
<template id="rubiks-cube-scrambler-template">
|
|
<ol class="scrambler__move-list"></ol>
|
|
<div class="scrambler__pattern-length">
|
|
<label for="pattern-length" class="scrambler__label">Length</label>
|
|
<input type="text" name="pattern-length">
|
|
</div>
|
|
<div class="scrambler__scramble">
|
|
<button name="scramble" class="scrambler__button">Scramble!</button>
|
|
</div>
|
|
<style>
|
|
.scrambler__move-list {
|
|
display: grid;
|
|
font-family: var(--font-family-monospace);
|
|
gap: var(--space-xxs);
|
|
grid-template-columns: repeat(7, 3ch);
|
|
list-style: none;
|
|
margin-block: 0;
|
|
padding-inline: 0;
|
|
|
|
.scrambler__move {
|
|
justify-self: center;
|
|
margin: 1px;
|
|
}
|
|
|
|
.scrambler__move--start {
|
|
justify-self: start;
|
|
}
|
|
|
|
.scrambler__move--end {
|
|
justify-self: end;
|
|
}
|
|
}
|
|
|
|
.scrambler__scramble,
|
|
.scrambler__pattern-length
|
|
{
|
|
font-size: var(--text-s);
|
|
margin-block-start: var(--space-s);
|
|
}
|
|
|
|
.scrambler__button {
|
|
font-size: var(--text-s);
|
|
}
|
|
|
|
.scrambler__label {
|
|
color: var(--text-color-secondary);
|
|
font-family: var(--font-family-monospace);
|
|
text-transform: uppercase;
|
|
|
|
&::after {
|
|
content: " = ";
|
|
}
|
|
}
|
|
|
|
input[name="pattern-length"] {
|
|
font-size: var(--text-s);
|
|
text-align: end;
|
|
width: 4ch;
|
|
}
|
|
</style>
|
|
</template>
|