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

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);
}