xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: close final portfolio quality gaps

Browse Source
This commit is contained in:
LucaP
2026-09-02 17:38:11 +03:00
parent 0899b6b00f
commit b4728ceef0
24 changed files with 1822 additions and 889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/styles/components.css
View File

@@ -44,7 +44,7 @@
}
.hero-journey__action::after {
content: '→';
content: "→";
transition: transform var(--transition);
}
@@ -120,7 +120,7 @@
inset: 0 auto 0 0.23rem;
inline-size: 1px;
background: var(--line-strong);
content: '';
content: "";
}
.experience-timeline > li {
@@ -136,7 +136,7 @@
block-size: 0.5rem;
border: 1px solid var(--cyan);
background: var(--canvas);
content: '';
content: "";
transform: rotate(45deg);
}
@@ -251,7 +251,7 @@
inline-size: 0.65rem;
margin-inline-end: 0.4rem;
border-block-start: 1px dashed var(--line-strong);
content: '';
content: "";
vertical-align: middle;
}
@@ -270,7 +270,7 @@
block-size: 0.36rem;
border-block-start: 1px solid var(--cyan);
border-inline-end: 1px solid var(--cyan);
content: '';
content: "";
transform: rotate(45deg);
}
@@ -293,7 +293,63 @@
transform: rotate(135deg);
}
[data-testid='infrastructure-text-equivalent'] {
.infrastructure-legend {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.75rem;
margin: var(--space-2) 0 0;
padding: 0;
}
.infrastructure-legend > div {
display: grid;
gap: 0.25rem;
}
.infrastructure-legend dt {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
font: 600 0.68rem/1.2 var(--mono);
letter-spacing: 0.07em;
text-transform: uppercase;
}
.infrastructure-legend dd {
margin: 0;
color: var(--text-muted);
font-size: 0.74rem;
}
.infrastructure-legend__boundary,
.infrastructure-legend__flow {
position: relative;
display: inline-block;
inline-size: 1.65rem;
block-size: 0.5rem;
}
.infrastructure-legend__boundary {
border-block-start: 1px dashed var(--line-strong);
}
.infrastructure-legend__flow {
border-block-start: 1px solid var(--cyan);
}
.infrastructure-legend__flow::after {
position: absolute;
inset: -0.2rem 0 auto auto;
inline-size: 0.36rem;
block-size: 0.36rem;
border-block-start: 1px solid var(--cyan);
border-inline-end: 1px solid var(--cyan);
content: "";
transform: rotate(45deg);
}
[data-testid="infrastructure-text-equivalent"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
@@ -301,13 +357,13 @@
list-style: none;
}
[data-testid='infrastructure-text-equivalent'] li {
[data-testid="infrastructure-text-equivalent"] li {
margin: 0;
padding: var(--space-2);
border-block-start: 1px solid var(--line);
}
[data-testid='infrastructure-text-equivalent'] strong {
[data-testid="infrastructure-text-equivalent"] strong {
color: var(--text);
}
@@ -327,12 +383,12 @@
box-shadow: var(--panel-shadow);
}
.project-case-study[data-project-id='footy-tracker'],
.project-case-study[data-project-id='public-build-two'] {
.project-case-study[data-project-id="footy-tracker"],
.project-case-study[data-project-id="public-build-two"] {
margin-inline-start: 54%;
}
.project-case-study[data-project-priority='supporting'] {
.project-case-study[data-project-priority="supporting"] {
inline-size: min(38rem, 62%);
margin-inline: auto;
background: var(--surface-soft);
@@ -349,7 +405,9 @@
font-size: var(--step-2);
}
.project-case-study[data-project-priority='supporting'] .project-case-study__header h3 {
.project-case-study[data-project-priority="supporting"]
.project-case-study__header
h3 {
font-size: var(--step-1);
}
@@ -395,12 +453,12 @@
border-block-start: 1px solid var(--line);
}
.project-card[data-maturity='prototype'],
.project-card[data-maturity='active'] {
.project-card[data-maturity="prototype"],
.project-card[data-maturity="active"] {
margin-inline-end: 8%;
}
.project-card[data-maturity='learning'] {
.project-card[data-maturity="learning"] {
margin-inline-start: 12%;
}
@@ -576,8 +634,8 @@
inline-size: 62%;
}
.project-case-study[data-project-id='footy-tracker'],
.project-case-study[data-project-id='public-build-two'] {
.project-case-study[data-project-id="footy-tracker"],
.project-case-study[data-project-id="public-build-two"] {
margin-inline-start: 38%;
}
@@ -633,7 +691,7 @@
.profile-facts,
.project-evidence > div,
[data-testid='infrastructure-text-equivalent'],
[data-testid="infrastructure-text-equivalent"],
.toolkit-grid {
grid-template-columns: 1fr;
}

58
src/styles/layout.css
View File

@@ -49,7 +49,10 @@
font: 520 0.78rem/1 var(--mono);
letter-spacing: 0.06em;
text-decoration: none;
transition: color var(--transition), background-color var(--transition), border-color var(--transition);
transition:
color var(--transition),
background-color var(--transition),
border-color var(--transition);
}
.site-navigation a:hover,
@@ -58,7 +61,7 @@
color: var(--text);
}
.site-navigation a[aria-current='page'] {
.site-navigation a[aria-current="page"] {
border-block-end-color: var(--cyan);
color: var(--cyan);
}
@@ -97,29 +100,31 @@
min-width: 0;
margin-block: clamp(6rem, 16vh, 11rem);
padding: clamp(1.5rem, 2.6vw, 2.7rem);
scroll-margin-block-start: calc(var(--site-navigation-block-size) + var(--space-3));
scroll-margin-block-start: calc(
var(--site-navigation-block-size) + var(--space-3)
);
border: var(--panel-border);
border-radius: var(--radius-surface);
background: var(--surface);
box-shadow: var(--panel-shadow);
}
.portfolio-section[data-layout='right-rail'] {
.portfolio-section[data-layout="right-rail"] {
inline-size: 42%;
margin-inline: 54% 4%;
}
.portfolio-section[data-layout='left-timeline'] {
.portfolio-section[data-layout="left-timeline"] {
inline-size: 46%;
margin-inline: 4% 50%;
}
.portfolio-section[data-layout='full-diagram'] {
.portfolio-section[data-layout="full-diagram"] {
inline-size: 78%;
margin-inline: 11%;
}
.portfolio-section[data-layout='project-stage'] {
.portfolio-section[data-layout="project-stage"] {
inline-size: 92%;
margin-inline: 4%;
padding: 0;
@@ -128,25 +133,25 @@
box-shadow: none;
}
.portfolio-section[data-layout='project-stage'] > h2,
.portfolio-section[data-layout='project-stage'] > .section-eyebrow {
.portfolio-section[data-layout="project-stage"] > h2,
.portfolio-section[data-layout="project-stage"] > .section-eyebrow {
inline-size: fit-content;
padding: 0.55rem 0.8rem;
border-inline-start: 2px solid var(--cyan);
background: var(--surface-strong);
}
.portfolio-section[data-layout='compact-rail'] {
.portfolio-section[data-layout="compact-rail"] {
inline-size: 42%;
margin-inline: 54% 4%;
}
.portfolio-section[data-layout='toolkit-field'] {
.portfolio-section[data-layout="toolkit-field"] {
inline-size: 78%;
margin-inline: 11%;
}
.portfolio-section[data-layout='destination'] {
.portfolio-section[data-layout="destination"] {
inline-size: min(54rem, 62%);
margin-inline: auto;
}
@@ -164,33 +169,33 @@
inline-size: min(34rem, 62vw);
}
.portfolio-section[data-layout='right-rail'] {
.portfolio-section[data-layout="right-rail"] {
inline-size: 60%;
margin-inline: 36% 4%;
}
.portfolio-section[data-layout='left-timeline'] {
.portfolio-section[data-layout="left-timeline"] {
inline-size: 60%;
margin-inline: 4% 36%;
}
.portfolio-section[data-layout='full-diagram'],
.portfolio-section[data-layout='toolkit-field'] {
.portfolio-section[data-layout="full-diagram"],
.portfolio-section[data-layout="toolkit-field"] {
inline-size: 84%;
margin-inline: 8%;
}
.portfolio-section[data-layout='project-stage'] {
.portfolio-section[data-layout="project-stage"] {
inline-size: 92%;
margin-inline: 4%;
}
.portfolio-section[data-layout='compact-rail'] {
.portfolio-section[data-layout="compact-rail"] {
inline-size: 62%;
margin-inline: 34% 4%;
}
.portfolio-section[data-layout='destination'] {
.portfolio-section[data-layout="destination"] {
inline-size: 70%;
}
}
@@ -219,18 +224,23 @@
.site-navigation summary::after {
color: var(--cyan);
content: '+';
content: "+";
font-size: 1.1rem;
}
.site-navigation details[open] summary::after {
content: '−';
content: "−";
}
.site-navigation summary::-webkit-details-marker {
display: none;
}
.site-navigation summary:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--focus);
}
.site-navigation ul {
position: absolute;
inset: 100% 0 auto;
@@ -271,14 +281,14 @@
background: var(--surface-strong);
}
.portfolio-section[data-layout='project-stage'] {
.portfolio-section[data-layout="project-stage"] {
padding: 0;
border: 0;
background: transparent;
}
.portfolio-section[data-layout='project-stage'] > h2,
.portfolio-section[data-layout='project-stage'] > .section-eyebrow {
.portfolio-section[data-layout="project-stage"] > h2,
.portfolio-section[data-layout="project-stage"] > .section-eyebrow {
margin-inline-start: 0;
background: var(--surface-strong);
}