.preText { font-size: 1.2em; } .percentBar { position: relative; height: 1em; width: 100%; border-radius: 0.5em; border: 1px solid var(--blog_content-border); background: transparent; .front { border-radius: 0.5em; height: 100%; position: absolute; background: var(--bar-color, var(--blog_color-accent)); animation: barFill 2s ease-in-out; animation-fill-mode: forwards; } } .badgeSet { display: flex; flex-direction: row; margin-top: 10px; } .achievement { display: grid; grid-template-columns: 2em auto; column-gap: 10px; padding: 5px; & > span:first-of-type { height: 2em; } } .badge { display: grid; grid-template-columns: 1em auto; column-gap: 5px; border: 1px solid var(--blog_content-border); border-radius: 0.5em; padding: 5px; & > span { align-self: center; } & > span:first-of-type { height: 1em; } } @keyframes barFill { 0% { width: 1em; } 100% { width: var(--barPct); } } .skillCard { padding: 10px; border: 1px solid var(--blog_content-border); border-radius: 0.5em; margin-bottom: 20px; h3 { margin: 0; color: var(--ch-color) !important; } &:last-of-type { margin-bottom: 0; } &.useDarkColor { color: #222; } &.useLightColor { color: #ddd; } } .skillBar { display: grid; grid-template-columns: 2em auto; column-gap: 10px; padding: 10px; margin: 10px 0; & > div { align-self: center; } & > div:first-of-type { height: 2em; grid-row: 1/3; } & > div:nth-of-type(3) { text-align: center; margin-top: -5px; font-size: small; } &:last-of-type { margin-bottom: 0; } }