.post__archive_path {
float: left; .post__archive_icon { display: inline-block; width: 40px; height: 40px; border-radius: 50%; float: left; margin-right: 10px; position: relative; .circle-progress { stroke: var(--gray); fill: none; stroke-width: 1; stroke-dasharray: 0 120; transition: all 0.45s ease-in; } .post__archive_icon { position: absolute; width: 60%; left: 20%; top: 50%; height: 1px; background-color: var(--gray); transition: all 0.25s ease-in; &:after, &:before { @include pseudo(); height: 1px; width: 50%; background-color: var(--gray); top: 0; left: 0; } &:before { transform-origin: left bottom; transform: rotate(-45deg); } &:after { transform-origin: left top; transform: rotate(45deg); } &.emit { left: -110%; } } } a { display: block; font-size: 1.2rem; line-height: 40px; text-transform: capitalize; &:hover { .circle-progress { stroke-dasharray: 120 120; } } &.emit { .post__archive_icon { left: -150%; opacity: 0; } } }
} .post__header {
margin-bottom: 1rem; .post__title { margin: 1.75rem 0 0.75rem 0; } .post__meta { color: var(--gray); }
} .post__content {
padding: 1.5rem 0; margin-bottom: 4rem;
}