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

feat: compose the portfolio journey layer

Browse Source
This commit is contained in:
LucaP
2026-09-02 16:21:13 +03:00
parent 7e48aad6a8
commit 8c17af22a0
26 changed files with 962 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
src/styles/layout.css
View File

@@ -1,5 +1,5 @@
:root {
--site-navigation-block-size: 45px;
--site-navigation-block-size: 53px;
}
.portfolio-shell {
@@ -7,40 +7,31 @@
}
.site-header {
display: grid;
gap: var(--space-2);
min-width: 0;
padding: calc(var(--space-4) + var(--site-navigation-block-size)) 4vw
var(--space-3);
border-block-end: var(--panel-border);
background: #0b111b;
}
.site-header h1 {
font-size: var(--step-3);
}
.site-header > p:not(.route-label) {
color: var(--text-muted);
font-size: var(--step-1);
min-block-size: 0;
}
.site-navigation {
position: fixed;
z-index: 3;
z-index: var(--z-navigation);
inset: 0 0 auto;
block-size: var(--site-navigation-block-size);
border-block-end: var(--panel-border);
background: rgb(7 13 23 / 94%);
backdrop-filter: blur(10px);
min-block-size: var(--site-navigation-block-size);
border-block-end: 1px solid var(--line);
background: var(--surface-strong);
}
.site-navigation__disclosure {
max-inline-size: 96rem;
margin-inline: auto;
}
.site-navigation summary {
display: none;
}
.site-navigation ul {
display: grid;
display: grid !important;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-auto-rows: 44px;
gap: 0.25rem;
max-inline-size: 90rem;
grid-auto-rows: 52px;
margin: 0;
padding: 0;
list-style: none;
@@ -49,135 +40,265 @@
.site-navigation a {
display: inline-flex;
inline-size: 100%;
align-items: center;
min-block-size: 44px;
align-items: center;
justify-content: center;
padding-inline: 0.4rem;
padding-inline: 0.45rem;
border-block-end: 2px solid transparent;
color: var(--text-muted);
font-family: var(--mono);
font-size: var(--step--1);
letter-spacing: 0.04em;
font: 520 0.78rem/1 var(--mono);
letter-spacing: 0.06em;
text-decoration: none;
transition:
color var(--transition),
background-color var(--transition);
transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.site-navigation a:hover,
.site-navigation a:focus-visible {
background: var(--cyan-deep);
background: rgb(120 216 229 / 8%);
color: var(--text);
}
.site-navigation a[aria-current='page'] {
border-block-end-color: var(--cyan);
color: var(--cyan);
}
.site-navigation a:focus-visible {
outline-offset: -3px;
}
.portfolio-main {
min-width: 0;
padding-block: var(--space-4) var(--space-5);
padding-block: var(--site-navigation-block-size) 18vh;
}
.hero-journey {
display: grid;
min-block-size: calc(100svh - var(--site-navigation-block-size));
align-items: start;
padding: clamp(3.5rem, 12vh, 8rem) 4vw 16vh;
scroll-margin-block-start: var(--site-navigation-block-size);
}
.hero-journey__content {
display: grid;
inline-size: min(39rem, 46vw);
gap: 1.1rem;
padding: clamp(1.5rem, 2.5vw, 2.5rem);
border: 1px solid var(--line);
border-inline-start: 3px solid var(--cyan);
border-radius: var(--radius-surface);
background: var(--surface);
box-shadow: var(--panel-shadow);
}
.portfolio-section {
width: calc(100% - 2rem);
position: relative;
min-width: 0;
margin: 0 1rem var(--space-4);
padding: var(--space-3);
scroll-margin-block-start: calc(
var(--site-navigation-block-size) + var(--space-3)
);
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));
border: var(--panel-border);
border-radius: 2px;
border-radius: var(--radius-surface);
background: var(--surface);
box-shadow: var(--panel-shadow);
transition:
border-color var(--transition),
background-color var(--transition);
}
.portfolio-section:hover {
border-color: var(--line-strong);
.portfolio-section[data-layout='right-rail'] {
inline-size: 42%;
margin-inline: 54% 4%;
}
.portfolio-section[data-layout='left-timeline'] {
inline-size: 46%;
margin-inline: 4% 50%;
}
.portfolio-section[data-layout='full-diagram'] {
inline-size: 78%;
margin-inline: 11%;
}
.portfolio-section[data-layout='project-stage'] {
inline-size: 92%;
margin-inline: 4%;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.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'] {
inline-size: 42%;
margin-inline: 54% 4%;
}
.portfolio-section[data-layout='toolkit-field'] {
inline-size: 78%;
margin-inline: 11%;
}
.portfolio-section[data-layout='destination'] {
inline-size: min(54rem, 62%);
margin-inline: auto;
}
.site-footer,
.portfolio-section footer {
display: grid;
gap: var(--space-2);
min-width: 0;
}
.site-footer {
padding: var(--space-4) 4vw;
border-block-start: var(--panel-border);
background: #0b111b;
@media (min-width: 768px) and (max-width: 1279px) {
.hero-journey {
padding-inline: 4vw;
}
.hero-journey__content {
inline-size: min(34rem, 62vw);
}
.portfolio-section[data-layout='right-rail'] {
inline-size: 60%;
margin-inline: 36% 4%;
}
.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'] {
inline-size: 84%;
margin-inline: 8%;
}
.portfolio-section[data-layout='project-stage'] {
inline-size: 92%;
margin-inline: 4%;
}
.portfolio-section[data-layout='compact-rail'] {
inline-size: 62%;
margin-inline: 34% 4%;
}
.portfolio-section[data-layout='destination'] {
inline-size: 70%;
}
}
@media (max-width: 767px) {
:root {
--site-navigation-block-size: 93px;
--site-navigation-block-size: 53px;
}
.site-header {
padding-block-start: calc(
var(--space-4) + var(--site-navigation-block-size)
);
.site-navigation__disclosure {
position: relative;
}
.site-navigation summary {
display: flex;
min-block-size: 52px;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
color: var(--text);
cursor: pointer;
font: 560 0.76rem/1 var(--mono);
letter-spacing: 0.08em;
list-style: none;
}
.site-navigation summary::after {
color: var(--cyan);
content: '+';
font-size: 1.1rem;
}
.site-navigation details[open] summary::after {
content: '−';
}
.site-navigation summary::-webkit-details-marker {
display: none;
}
.site-navigation ul {
grid-template-columns: repeat(4, minmax(0, 1fr));
position: absolute;
inset: 100% 0 auto;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 48px;
border-block: 1px solid var(--line);
background: var(--surface-strong);
box-shadow: var(--panel-shadow);
}
.portfolio-section {
scroll-margin-block-start: calc(
var(--site-navigation-block-size) + var(--space-3)
);
.site-navigation details:not([open]) ul {
display: none !important;
}
.portfolio-main {
padding-block-end: 8rem;
}
.hero-journey {
min-block-size: calc(100svh - var(--site-navigation-block-size));
align-items: start;
padding: clamp(2rem, 9vh, 4.5rem) 1rem 8rem;
}
.hero-journey__content {
inline-size: 100%;
gap: 0.9rem;
padding: 1.4rem;
background: var(--surface-strong);
}
.portfolio-section,
.portfolio-section[data-layout] {
inline-size: calc(100% - 2rem);
margin: 6rem 1rem;
padding: 1.4rem;
background: var(--surface-strong);
}
.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 {
margin-inline-start: 0;
background: var(--surface-strong);
}
.project-link,
.contact-link,
.contact-social-link {
display: inline-flex;
align-items: center;
min-inline-size: 44px;
min-block-size: 44px;
padding-inline: 0.55rem;
}
}
@media (min-width: 768px) {
.site-header {
padding-inline: 5vw;
@media (max-height: 420px) {
.hero-journey {
min-block-size: auto;
padding-block: 4rem 3rem;
}
.portfolio-section {
width: calc(50% - 3rem);
margin-inline: 2rem 0;
}
.portfolio-section:nth-child(even) {
margin-inline-start: calc(50% + 1rem);
}
.site-footer {
padding-inline: 5vw;
}
}
@media (min-width: 1280px) {
.site-header {
padding-inline: 4vw;
}
.portfolio-section {
width: 42%;
margin-inline: 4% 0;
}
.portfolio-section:nth-child(even) {
margin-inline-start: 54%;
}
.site-footer {
padding-inline: 4vw;
.portfolio-section,
.portfolio-section[data-layout] {
margin-block: 4rem;
}
}