gahusb
c68cee502a
LogoLoop 컴포넌트를 추가해 카테고리별(언어/프레임워크/인프라/도구) 4줄 가로 스크롤 캐러셀로 skill 로고를 표시. simpleicons CDN을 사용하며 매칭 안 되는 항목(APScheduler, KIS Open API)은 텍스트 칩으로 자동 fallback. 편집 모드에서는 기존 칩 UI를 유지해 편집·삭제 가능. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
148 lines
2.9 KiB
CSS
148 lines
2.9 KiB
CSS
.logoloop {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logoloop:not(.logoloop--vertical) {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.logoloop--vertical {
|
|
overflow-y: hidden;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.logoloop__track {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: max-content;
|
|
will-change: transform;
|
|
user-select: none;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.logoloop__track--vertical {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: max-content;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logoloop__track {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
.logoloop__list {
|
|
display: flex;
|
|
align-items: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.logoloop__list--vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logoloop__item {
|
|
flex: none;
|
|
font-size: var(--logoloop-logoHeight, 36px);
|
|
line-height: 1;
|
|
}
|
|
|
|
.logoloop__list:not(.logoloop__list--vertical) .logoloop__item {
|
|
margin-right: var(--logoloop-gap, 32px);
|
|
}
|
|
|
|
.logoloop__list--vertical .logoloop__item {
|
|
margin-bottom: var(--logoloop-gap, 32px);
|
|
}
|
|
|
|
.logoloop__item--scalable {
|
|
overflow: visible;
|
|
}
|
|
|
|
.logoloop__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: opacity 0.2s linear;
|
|
color: inherit;
|
|
}
|
|
|
|
.logoloop__link:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.logoloop__link:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.logoloop__node {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logoloop__node--scale,
|
|
.logoloop__img--scale {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.logoloop__item--scalable:hover .logoloop__node--scale,
|
|
.logoloop__item--scalable:hover .logoloop__img--scale {
|
|
transform: scale(1.18);
|
|
}
|
|
|
|
.logoloop__img {
|
|
height: var(--logoloop-logoHeight, 36px);
|
|
width: auto;
|
|
display: block;
|
|
object-fit: contain;
|
|
-webkit-user-drag: none;
|
|
pointer-events: none;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
|
|
.logoloop__fade {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logoloop__fade--left {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: clamp(24px, 8%, 120px);
|
|
background: linear-gradient(to right, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
|
|
}
|
|
|
|
.logoloop__fade--right {
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: clamp(24px, 8%, 120px);
|
|
background: linear-gradient(to left, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
|
|
}
|
|
|
|
.logoloop__fade--top {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: clamp(24px, 8%, 120px);
|
|
background: linear-gradient(to bottom, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
|
|
}
|
|
|
|
.logoloop__fade--bottom {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: clamp(24px, 8%, 120px);
|
|
background: linear-gradient(to top, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
|
|
}
|