105 lines
1.8 KiB
SCSS
105 lines
1.8 KiB
SCSS
@use 'sass:math';
|
|
|
|
|
|
.daily-kanji {
|
|
|
|
.info {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-bottom: 0.5em;
|
|
gap: 1em;
|
|
}
|
|
|
|
.info-key {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.info-char {
|
|
align-self: flex-start;
|
|
position: relative;
|
|
padding: 0.1em;
|
|
border: 1px dashed black;
|
|
font-family: serif;
|
|
font-size: 5rem;
|
|
line-height: 1em;
|
|
|
|
&::before {
|
|
top: -0.01em;
|
|
left: 0.6em;
|
|
width: 0;
|
|
height: 100%;
|
|
border-right: 1px dashed #000;
|
|
}
|
|
&::after {
|
|
top: 0.6em;
|
|
left: -0.01em;
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px dashed #000;
|
|
}
|
|
&::before, &::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.examples-ja {
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
$side: 5em;
|
|
$radius: math.div($side, 2);
|
|
|
|
.spinner-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: $side;
|
|
height: $side;
|
|
|
|
div {
|
|
animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
transform-origin: $radius $radius;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #000;
|
|
margin: -4px 0 0 -4px;
|
|
}
|
|
|
|
@for $i from 1 through 8 {
|
|
$angle: 15deg * $i;
|
|
|
|
&:nth-child(#{$i}) {
|
|
animation-delay: -0.036s * $i;
|
|
|
|
&::after {
|
|
top: $radius + math.sin($angle) * $radius;
|
|
left: $radius + math.cos($angle) * $radius;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|