tikaiz/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify styling
All checks were successful
publish.yml / publish (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
Tim Kainz
2026-04-15 23:14:43 +02:00
parent adf7f310fe
commit 22e20a04db
9 changed files with 103 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/about/about.css
View File

@@ -1,34 +1,7 @@
.page {
margin: 0 auto;
padding: 1rem 1.25rem 4rem;
}
.section {
margin-bottom: 3rem;
scroll-margin-top: 5.5rem;
}
.hero {
padding: 2.5rem;
border: 1px solid rgba(110, 118, 129, 0.28);
border-radius: 24px;
background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.16), rgba(13, 17, 23, 0.9));
}
.eyebrow {
width: fit-content;
margin: 0 0 1rem;
padding: 0.35rem 0.7rem;
line-height: 1;
border: 1px solid rgba(88, 166, 255, 0.5);
border-radius: 999px;
color: #9ecbff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
h1,
h2,
h3,
@@ -37,38 +10,12 @@ ul {
margin: 0;
}
h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.1;
}
.lede {
max-width: 65ch;
margin-top: 1rem;
color: #c9d1d9;
}
.section-title-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
margin-bottom: 1rem;
}
.section-title-row p,
.card p,
.story li {
color: #b6bec8;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
/* base .card container styles moved to src/components/card/card.css */
.card h3 {
@@ -113,13 +60,6 @@ h1 {
}
@media (max-width: 760px) {
.page {
padding-top: 0.5rem;
}
.hero {
padding: 2rem 1.2rem;
}
.timeline-item {
grid-template-columns: 1fr;

20
src/pages/about/about.html
View File

@@ -1,19 +1,19 @@
<div class="page">
<section class="hero section">
<div class="page page-shell">
<section class="hero section section-base hero-panel">
<p class="eyebrow">About</p>
<h1>Fullstack developer crafting modern web, backend, and mobile products.</h1>
<p class="lede">
<h1 class="hero-title">Fullstack developer crafting modern web, backend, and mobile products.</h1>
<p class="lede hero-lede">
I am Tim Kainz, and I enjoy building software that feels clean, fast, and reliable from
the first screen to the last API call.
</p>
</section>
<section class="section">
<div class="section-title-row">
<section class="section section-base">
<div class="section-title-row section-title-shared">
<h2>What I bring</h2>
<p>Core strengths across the stack.</p>
</div>
<div class="card-grid">
<div class="card-grid card-grid-shared">
@for (pillar of pillars; track pillar.title) {
<app-card>
<h3>{{ pillar.title }}</h3>
@@ -23,7 +23,7 @@
</div>
</section>
<section class="section story">
<section class="section section-base story">
<app-card>
<h2>How I work</h2>
<ul>
@@ -34,8 +34,8 @@
</app-card>
</section>
<section class="section" id="experience">
<div class="section-title-row">
<section class="section section-base section-anchor" id="experience">
<div class="section-title-row section-title-shared">
<h2>Experience</h2>
<p>Hands-on delivery in backend systems and product architecture.</p>
</div>

51
src/pages/contact/contact.css
View File

@@ -1,56 +1,13 @@
.page {
margin: 0 auto;
padding: 1rem 1.25rem 4rem;
}
.section {
margin-bottom: 3rem;
}
.hero {
padding: 2.5rem;
border: 1px solid rgba(110, 118, 129, 0.28);
border-radius: 24px;
background: radial-gradient(circle at top right, rgba(47, 129, 247, 0.18), rgba(13, 17, 23, 0.9));
}
.eyebrow {
width: fit-content;
margin: 0 0 1rem;
padding: 0.35rem 0.7rem;
line-height: 1;
border: 1px solid rgba(88, 166, 255, 0.5);
border-radius: 999px;
color: #9ecbff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
h1,
h2,
p {
margin: 0;
}
h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.1;
}
.lede {
max-width: 65ch;
margin-top: 1rem;
color: #c9d1d9;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
/* base .card container styles moved to src/components/card/card.css */
.contact-card .label {
@@ -124,12 +81,4 @@ h1 {
margin-left: auto;
}
@media (max-width: 760px) {
.page {
padding-top: 0.5rem;
}
.hero {
padding: 2rem 1.2rem;
}
}

14
src/pages/contact/contact.html
View File

@@ -1,15 +1,15 @@
<div class="page">
<section class="hero section">
<div class="page page-shell">
<section class="hero section section-base hero-panel">
<p class="eyebrow">Contact</p>
<h1>Let’s build something polished, useful, and fast.</h1>
<p class="lede">
<h1 class="hero-title">Let’s build something polished, useful, and fast.</h1>
<p class="lede hero-lede">
If you have a product idea, an open role, or an app that needs a reliable fullstack hand,
I’d be happy to talk.
</p>
</section>
<section class="section">
<div class="card-grid">
<section class="section section-base">
<div class="card-grid card-grid-shared">
@for (channel of channels; track channel.label) {
<app-card cardClass="contact-card">
<p class="label">{{ channel.label }}</p>
@@ -28,7 +28,7 @@
</div>
</section>
<section class="section note">
<section class="section section-base note">
<app-card>
<h2>Preferred first step</h2>
<p>

45
src/pages/projects/project-detail/project-detail.css
View File

@@ -1,33 +1,7 @@
.page-wrap {
margin: 0 auto;
padding: 1rem 1.25rem 4rem;
}
.section {
margin-bottom: 3rem;
}
.hero {
padding: 2.5rem;
border: 1px solid rgba(110, 118, 129, 0.28);
border-radius: 24px;
background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.2), rgba(13, 17, 23, 0.85));
}
.eyebrow {
width: fit-content;
margin: 0 0 1rem;
padding: 0.35rem 0.7rem;
line-height: 1;
border: 1px solid rgba(88, 166, 255, 0.5);
border-radius: 999px;
color: #9ecbff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
h1,
h2,
p,
@@ -35,17 +9,6 @@ ul {
margin: 0;
}
h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.1;
}
.lede {
max-width: 70ch;
margin-top: 1rem;
color: #c9d1d9;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
@@ -91,13 +54,5 @@ li + li {
margin-top: 0.45rem;
}
@media (max-width: 760px) {
.page-wrap {
padding-top: 0.5rem;
}
.hero {
padding: 2rem 1.2rem;
}
}

18
src/pages/projects/project-detail/project-detail.html
View File

@@ -1,15 +1,15 @@
<div class="page-wrap">
<div class="page-wrap page-shell">
@if (project; as project) {
<section class="hero section">
<section class="hero section section-base hero-panel">
<p class="eyebrow">Project</p>
<h1>{{ project.title }}</h1>
<p class="lede">{{ project.overview }}</p>
<h1 class="hero-title">{{ project.title }}</h1>
<p class="lede hero-lede">{{ project.overview }}</p>
<div class="hero-actions">
<a class="btn btn-ghost" routerLink="/projects">Back to projects</a>
</div>
</section>
<section class="section">
<section class="section section-base">
<div class="detail-grid">
<app-card>
<h2>Stack</h2>
@@ -23,7 +23,7 @@
</div>
</section>
<section class="section">
<section class="section section-base">
<app-card>
<h2>Highlights</h2>
<ul>
@@ -34,10 +34,10 @@
</app-card>
</section>
} @else {
<section class="hero section">
<section class="hero section section-base hero-panel">
<p class="eyebrow">Project</p>
<h1>Project not found</h1>
<p class="lede">The requested project does not exist. Please pick one from the projects page.</p>
<h1 class="hero-title">Project not found</h1>
<p class="lede hero-lede">The requested project does not exist. Please pick one from the projects page.</p>
<a class="btn btn-ghost" routerLink="/projects">Back to projects</a>
</section>
}

50
src/pages/projects/projects.css
View File

@@ -1,54 +1,14 @@
.page-wrap {
margin: 0 auto;
padding: 1rem 1.25rem 4rem;
}
.section {
margin-bottom: 3rem;
}
.hero {
padding: 2.5rem;
border: 1px solid rgba(110, 118, 129, 0.28);
border-radius: 24px;
background: radial-gradient(circle at top right, rgba(88, 166, 255, 0.2), rgba(13, 17, 23, 0.85));
}
.eyebrow {
width: fit-content;
margin: 0 0 1rem;
padding: 0.35rem 0.7rem;
line-height: 1;
border: 1px solid rgba(88, 166, 255, 0.5);
border-radius: 999px;
color: #9ecbff;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
h1,
h2,
p {
margin: 0;
}
h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.1;
}
.lede {
max-width: 65ch;
margin-top: 1rem;
color: #c9d1d9;
}
.card-grid {
display: grid;
.projects-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.project-link {
@@ -87,13 +47,5 @@ h1 {
font-weight: 500;
}
@media (max-width: 760px) {
.page-wrap {
padding-top: 0.5rem;
}
.hero {
padding: 2rem 1.2rem;
}
}

12
src/pages/projects/projects.html
View File

@@ -1,15 +1,15 @@
<div class="page-wrap">
<section class="hero section">
<div class="page-wrap page-shell">
<section class="hero section section-base hero-panel">
<p class="eyebrow">Projects</p>
<h1>Featured work across web, backend, and mobile.</h1>
<p class="lede">
<h1 class="hero-title">Featured work across web, backend, and mobile.</h1>
<p class="lede hero-lede">
A selection of projects that demonstrate my skills in building production-ready software
solutions across various platforms and technologies.
</p>
</section>
<section class="section">
<div class="card-grid projects-grid">
<section class="section section-base">
<div class="card-grid card-grid-shared projects-grid">
@for (project of projects; track project.slug) {
<a class="project-link" [routerLink]="['/projects', project.slug]">
<app-card cardClass="project-card">