suroh/alex.portfolio
1
0
Fork 0
Code Actions

Update template and styles

Browse Source
This commit is contained in:
suroh 2025-03-19 18:00:17 +01:00
parent cb8039ecec
commit ca591b5a76
2 changed files with 133 additions and 43 deletions
src
assets/styles
main.css
layouts
cv.webc

101
src/assets/styles/main.css

@ -115,7 +115,7 @@ body.light {
color-scheme: light;
}
main {
body > main {
display: grid;
grid-row: 1 / -1;
grid-template-rows: subgrid;
@ -124,6 +124,12 @@ main {
view-transition-name: --main;
overflow-x: hidden;
.meta span:has(+ span)::after {
content: '•';
display: inline-block;
padding-inline: 1ch;
}
> article {
grid-row: 2;
width: 70ch;
@ -132,12 +138,6 @@ main {
.meta {
font-size: var(--fs-500);
margin-block: 0.75em 0.5em;
span:has(+ span)::after {
content: '•';
display: inline-block;
padding-inline: 1ch;
}
}
}
@ -201,6 +201,93 @@ body:has(input[name="gallery"]:checked) {
}
}
/* CV */
.cv {
display: grid;
gap: 1em;
padding: 1em;
max-width: var(--max-char-width);
p {
margin: 0;
}
.sub {
display: grid;
gap: 0.25em;
grid-template-columns: 1fr .4fr;
.contact > * {
display: block;
width: fit-content;
}
}
h3 {
font-size: 1.5em;
font-style: italic;
color: light-dark(var(--tonal-900), var(--tonal-100));
}
.experience-item {
padding-block-end: 1em;
&:not(:where(:last-child, :has(+ h3))) {
border-block-end: thin dotted light-dark(var(--tonal-100), var(--tonal-900));
}
h4 {
margin: 0;
font-size: 1.25em;
}
.skills {
list-style: none;
margin: 1em 0;
li {
display: inline-block;
padding: 0;
}
li:before {
padding: .25em;
}
}
header {
padding-block-end: 1em;
}
aside {
grid-area: a;
display: flex;
flex-direction: column;
.position {
/* font-weight: 900; */
font-style: italic;
}
.meta {
opacity: .5;
}
.meta {
margin-block-start: auto;
}
.meta:last-child, .location {
margin-block-end: 1em;
}
}
main {
grid-area: m;
}
}
}
/* PRINT */
.printOnly {
display: none;

75
src/layouts/cv.webc

@ -2,45 +2,48 @@
layout: base.webc
---
<section class="cv">
<header class="printOnly">
<h2 class="printOnly" @text="cv.header.name"></h2>
<main>
<div class="sub">
<div class="links">
<a :href="cv.header.website" @text="cv.header.website"></a>
<section class="cv">
<header class="printOnly">
<h2 class="printOnly" @text="cv.header.name"></h2>
<div class="sub">
<div class="links">
<a :href="cv.header.website" @text="cv.header.website"></a>
</div>
<div class="contact">
<a :href="'mailto:' + cv.header.email" @text="cv.header.email"></a>
</div>
</div>
<div class="contact">
<a :href="'mailto:' + cv.header.email" @text="cv.header.email"></a>
</div>
</div>
<template webc:type="11ty" 11ty:type="webc,md">
<p @raw="cv.header.summary[lang]"></p>
</template>
<template webc:type="11ty" 11ty:type="webc,md">
<p @raw="cv.header.summary[lang]"></p>
</header>
<template webc:for="x of cv.experience" webc:nokeep>
<h3 @text="x.title[lang]" :id="x.slug[lang]"></h3>
<section webc:for="i of x.items" class="experience-item">
<header id="i.title[lang]">
<h4 @text="i.title[lang]"></h4>
<div class="meta">
<span class="location" webc:if="i.location[lang]" @text="i.location[lang]"></span>
<span @text="i.dates[0]"></span>
<span webc:if="i.dates[1]" @text="' - ' + i.dates[1]"></span>
</div>
</header>
<main>
<template webc:type="11ty" 11ty:type="webc,md">
<p webc:type="11ty" 11ty:type="webc,md" @raw="i.summary[lang]"></p>
</template>
</main>
</section>
</template>
</header>
<template webc:for="x of cv.experience" webc:nokeep>
<h3 @text="x.title[lang]" :id="x.slug[lang]"></h3>
<section webc:for="i of x.items" class="experience-item">
<header id="i.title[lang]">
<h4 @text="i.title[lang]"></h4>
<div class="dates">
<span @text="i.dates[0]"></span>
<span webc:if="i.dates[1]" @text="' - ' + i.dates[1]"></span>
</div>
<div class="location" webc:if="i.location[lang]" @text="i.location[lang]"></div>
</header>
<main>
<template webc:type="11ty" 11ty:type="webc,md">
<p webc:type="11ty" 11ty:type="webc,md" @raw="i.summary[lang]"></p>
</template>
</main>
</section>
</template>
</section>
</section>
</main>