93 lines
1.4 KiB
CSS
93 lines
1.4 KiB
CSS
div:has(img) {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
margin-inline: auto;
|
|
|
|
img {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border-radius: 1rem;
|
|
filter: contrast(1.25);
|
|
}
|
|
|
|
&::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;
|
|
|
|
h1 {
|
|
grid-column: 1 / 3;
|
|
text-align: center;
|
|
}
|
|
|
|
border-block-end: 1px solid var(--colour-primary-fg);
|
|
}
|
|
|
|
.technical-skills {
|
|
h3 {
|
|
text-align: start;
|
|
}
|
|
|
|
ul {
|
|
color: var(--colour-primary-fg-accent);
|
|
margin-inline-start: var(--spacing-inline-md);
|
|
}
|
|
|
|
@media (min-width: 46rem) {
|
|
section {
|
|
display: flex;
|
|
gap: var(--spacing-inline-sm);
|
|
align-items: baseline;
|
|
|
|
h3 {
|
|
&::after {
|
|
content: '/';
|
|
margin-inline: var(--spacing-inline-sm);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
gap: var(--spacing-inline-sm);
|
|
list-style: none;
|
|
margin-inline-start: 0;
|
|
|
|
li + li::before {
|
|
content: '•';
|
|
margin-inline-end: var(--spacing-inline-sm);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:is(.experience, .passions) {
|
|
:is(ol, ul) {
|
|
list-style: none;
|
|
|
|
li {
|
|
margin-block-start: var(--spacing-block-sm);
|
|
}
|
|
}
|
|
}
|