MediaWiki:SkillNav.css: Difference between revisions
From Elwiki
(Created page with ".skill-nav-inner-wrap { margin-top: 0.5rem; display: grid; grid-template-columns: 20% auto; border-top: 1px solid black; border-left: 1px solid black; } .sk...") |
No edit summary |
||
Line 1: | Line 1: | ||
.skill-nav-inner-wrap { | .skill-nav-inner-wrap { | ||
margin-top: 0.5rem; | margin-top: 0.5rem; | ||
display: grid; | |||
grid-template-columns: | grid-template-columns: max-content auto; | ||
border-top: 1px solid black; | border-top: 1px solid black; | ||
border-left: 1px solid black; | border-left: 1px solid black; | ||
Line 20: | Line 20: | ||
gap: 1rem; | gap: 1rem; | ||
place-items: center; | place-items: center; | ||
transform: skew(-10deg); | |||
overflow: hidden; | overflow: hidden; | ||
outline: 1px solid black; | outline: 1px solid black; | ||
Line 26: | Line 26: | ||
.skill-nav .skill-nav-header a { | .skill-nav .skill-nav-header a { | ||
color: #fff !important; | |||
font-weight: 500; | font-weight: 500; | ||
text-shadow: 1px 1px 2px rgba(0,0,0,.5); | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | ||
display: inline-block; | display: inline-block; | ||
transform: skew(10deg); | transform: skew(10deg); | ||
font-size: 1.25rem; | font-size: 1.25rem; | ||
} | } | ||
Line 45: | Line 45: | ||
place-content: center; | place-content: center; | ||
place-items: center; | place-items: center; | ||
transition: background-color .3s; | transition: background-color 0.3s; | ||
} | } | ||
Line 54: | Line 54: | ||
.skill-nav .skill-nav-skill a:not(.image) { | .skill-nav .skill-nav-skill a:not(.image) { | ||
padding: 0.5rem; | |||
width: 100%; | width: 100%; | ||
font-weight: 500; | font-weight: 500; | ||
Line 60: | Line 60: | ||
.skill-nav .skill-nav-sub-head { | .skill-nav .skill-nav-sub-head { | ||
padding: 0.5rem; | padding: 0.5rem 2rem 0.5rem 0.5rem; | ||
font-weight: 500; | font-weight: 500; | ||
} | } |
Revision as of 19:03, 15 June 2022
.skill-nav-inner-wrap {
margin-top: 0.5rem;
display: grid;
grid-template-columns: max-content auto;
border-top: 1px solid black;
border-left: 1px solid black;
}
.skill-nav-inner-wrap > div {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.skill-nav .image-cropped {
margin-left: -10px;
}
.skill-nav .skill-nav-header {
display: flex;
gap: 1rem;
place-items: center;
transform: skew(-10deg);
overflow: hidden;
outline: 1px solid black;
}
.skill-nav .skill-nav-header a {
color: #fff !important;
font-weight: 500;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
display: inline-block;
transform: skew(10deg);
font-size: 1.25rem;
}
.skill-nav .skill-nav-skill-content {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
.skill-nav .skill-nav-skill {
display: flex;
flex-direction: row-reverse;
place-content: center;
place-items: center;
transition: background-color 0.3s;
}
.skill-nav .skill-nav-skill a {
display: block;
padding: 0.25rem;
}
.skill-nav .skill-nav-skill a:not(.image) {
padding: 0.5rem;
width: 100%;
font-weight: 500;
}
.skill-nav .skill-nav-sub-head {
padding: 0.5rem 2rem 0.5rem 0.5rem;
font-weight: 500;
}
.skill-nav .skill-nav-image {
margin-right: auto;
}