72 lines
1.7 KiB
CSS
72 lines
1.7 KiB
CSS
/* Basic Layout for Skills List */
|
|
#skills-content {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
#skills-content .category {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
#skills-content .category h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: regular;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Skills container for single-line display */
|
|
#skills-content .skills-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex; /* Use flexbox for single-line display */
|
|
flex-wrap: wrap; /* Allow skills to wrap if needed */
|
|
gap: 1rem; /* Spacing between skills */
|
|
}
|
|
|
|
/* Skill List Item */
|
|
#skills-content .skills-list .skill {
|
|
display: inline-flex; /* Ensures each skill is aligned inline */
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer; /* Show pointer cursor on hover */
|
|
text-decoration: none; /* Remove underline from links */
|
|
color: inherit; /* Inherit color from parent */
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
|
|
/* Skill Name */
|
|
#skills-content .skills-list .skill span {
|
|
display: inline-block;
|
|
font-size: 1.2rem;
|
|
margin-left: 0.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Skill Icon */
|
|
#skills-content .skills-list .skill .skill-icon {
|
|
margin-right: 0.5rem;
|
|
color: var(--accent-color);
|
|
font-size: 1.4rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Hover Effects for Skills */
|
|
#skills-content .skills-list .skill:hover::before {
|
|
background: var(--accent-color-dark);
|
|
}
|
|
|
|
#skills-content .skills-list .skill:hover {
|
|
background-color: var(--accent-color-alpha);
|
|
color: var(--fg-color); /* Change text color on hover */
|
|
}
|
|
|
|
/* Skill Category Hover Effect */
|
|
#skills-content .skills-list .skill:hover span {
|
|
color: var(--fg-color);
|
|
}
|
|
|
|
/* Optional: Customize Icon Color on Hover */
|
|
#skills-content .skills-list .skill:hover .skill-icon {
|
|
color: var(--fg-color);
|
|
}
|