87 lines
1.7 KiB
CSS
87 lines
1.7 KiB
CSS
div:has(img) {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
div img {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border-radius: 1rem;
|
|
filter: contrast(1.25);
|
|
}
|
|
|
|
div:has(img)::after {
|
|
/* Colour overlay */
|
|
background-color: var(--colour-primary-80);
|
|
opacity: 0.3;
|
|
|
|
/* Same size and shape as the img */
|
|
border-radius: 1rem;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
|
|
/* Positioned on top of the img */
|
|
display: block;
|
|
position: relative;
|
|
top: -6rem;
|
|
|
|
/* A content value is needed to get the ::after to render */
|
|
content: '';
|
|
}
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
text-align: center;
|
|
border-block-end: 1px solid var(--colour-primary-fg);
|
|
}
|
|
|
|
header h1 {
|
|
grid-column: 1 / 3;
|
|
text-align: center;
|
|
}
|
|
|
|
.technical-skills h3 {
|
|
text-align: start;
|
|
}
|
|
|
|
.technical-skills ul {
|
|
color: var(--colour-primary-fg-accent);
|
|
margin-inline-start: var(--spacing-inline-md);
|
|
}
|
|
|
|
@media (min-width: 46rem) {
|
|
.technical-skills section {
|
|
display: flex;
|
|
gap: var(--spacing-inline-sm);
|
|
align-items: baseline;
|
|
}
|
|
|
|
.technical-skills section h3::after {
|
|
content: '/';
|
|
margin-inline: var(--spacing-inline-sm);
|
|
}
|
|
|
|
.technical-skills section ul {
|
|
display: flex;
|
|
gap: var(--spacing-inline-sm);
|
|
list-style: none;
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.technical-skills section ul li + li::before {
|
|
content: '•';
|
|
margin-inline-end: var(--spacing-inline-sm);
|
|
}
|
|
}
|
|
|
|
:is(.experience, .passions) :is(ol, ul) {
|
|
list-style: none;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
:is(.experience, .passions) :is(ol, ul) li {
|
|
margin-block-start: var(--spacing-block-sm);
|
|
}
|