ilia/levkin.ca
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add levkin.ca design concepts (Spec, Slab, Relay, Vault).

Browse Source 
Four static landing-page options with Vite build, cal booking, and links to sibling sites.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ilia
2026-05-20 22:34:48 -04:00
co-authored by Cursor
commit b9a601894d
17 changed files with 2807 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slab/index.html
+73
View File
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Levkin</title>
<meta name="description" content="Levkin — software development." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./slab.css" />
</head>
<body>
<a href="/" class="back">←</a>
<main>
<header class="mast">
<span class="year">EST · CA</span>
<h1>LEV<br />KIN</h1>
<p class="role">SOFTWARE DEVELOPMENT</p>
</header>
<section class="strip strip-red">
<p>WE BUILD WHAT RUNS.</p>
</section>
<section class="blocks">
<div class="block">
<span class="num">01</span>
<h2>CUSTOM</h2>
<p>Apps · APIs · tools</p>
</div>
<div class="block block-inv">
<span class="num">02</span>
<h2>AUTO</h2>
<p><a href="https://auto.levkin.ca">auto.levkin.ca</a></p>
</div>
<div class="block">
<span class="num">03</span>
<h2>CASE</h2>
<p><a href="https://caseware.levkin.ca">caseware.levkin.ca</a></p>
</div>
<div class="block block-inv">
<span class="num">04</span>
<h2>OPS</h2>
<p><a href="https://jobs.levkin.ca">jobs.levkin.ca</a></p>
</div>
<div class="block block-wide">
<span class="num">05</span>
<h2>QE</h2>
<p><a href="https://iliadobkin.com">iliadobkin.com</a></p>
</div>
</section>
<section class="strip">
<ul class="rules">
<li>PRODUCTION READY</li>
<li>DOCUMENTED</li>
<li>TESTED FIRST</li>
<li>NO SCOPE CREEP</li>
</ul>
</section>
<section class="cta-block">
<a href="https://cal.levkin.ca/ilia/consult" class="cta cta-primary">BOOK 15 MIN →</a>
<a href="mailto:hello@levkine.ca?subject=Project%20enquiry" class="cta">HELLO@LEVGINE.CA →</a>
</section>
</main>
<footer>LEVKIN.CA · <a href="https://git.levkin.ca">GIT</a></footer>
</body>
</html>
slab/slab.css
+191
View File
@@ -0,0 +1,191 @@
:root {
--white: #f5f5f0;
--black: #0a0a0a;
--red: #e63946;
--font-display: 'Archivo Black', system-ui, sans-serif;
--font: 'Archivo', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--white);
color: var(--black);
min-height: 100vh;
}
.back {
position: fixed;
top: 1.25rem;
left: 1.25rem;
z-index: 10;
font-size: 1.25rem;
color: var(--black);
text-decoration: none;
font-weight: 500;
}
main { max-width: 100%; }
.mast {
padding: 4rem 1.5rem 3rem;
border-bottom: 6px solid var(--black);
}
.year {
font-size: 0.7rem;
letter-spacing: 0.25em;
font-weight: 500;
display: block;
margin-bottom: 2rem;
}
.mast h1 {
font-family: var(--font-display);
font-size: clamp(4rem, 18vw, 11rem);
line-height: 0.85;
letter-spacing: -0.04em;
font-weight: 400;
}
.role {
margin-top: 1.5rem;
font-size: 0.8rem;
letter-spacing: 0.35em;
font-weight: 500;
}
.strip {
padding: 1.25rem 1.5rem;
border-bottom: 4px solid var(--black);
}
.strip-red {
background: var(--red);
color: var(--white);
}
.strip-red p {
font-family: var(--font-display);
font-size: clamp(1.25rem, 4vw, 2rem);
letter-spacing: 0.02em;
}
.blocks {
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 500px) {
.blocks { grid-template-columns: 1fr; }
}
.block {
padding: 2rem 1.5rem;
border-bottom: 4px solid var(--black);
border-right: 4px solid var(--black);
min-height: 160px;
}
.block:nth-child(2n) { border-right: none; }
.block-wide {
grid-column: 1 / -1;
border-right: none;
}
.block-inv {
background: var(--black);
color: var(--white);
}
.num {
font-size: 0.65rem;
letter-spacing: 0.2em;
opacity: 0.5;
display: block;
margin-bottom: 0.75rem;
}
.block h2 {
font-family: var(--font-display);
font-size: 2rem;
letter-spacing: -0.02em;
margin-bottom: 0.35rem;
}
.block p {
font-size: 0.85rem;
letter-spacing: 0.05em;
}
.block a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.rules {
list-style: none;
display: grid;
gap: 0.5rem;
}
.rules li {
font-family: var(--font-display);
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
letter-spacing: 0.08em;
}
.cta-block {
padding: 3rem 1.5rem;
border-bottom: 6px solid var(--black);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.cta {
font-family: var(--font-display);
font-size: clamp(1rem, 3vw, 1.5rem);
color: var(--black);
text-decoration: none;
letter-spacing: 0.04em;
border-bottom: 4px solid var(--red);
padding-bottom: 0.25rem;
transition: color 0.15s, border-color 0.15s;
}
.cta:hover {
color: var(--red);
border-color: var(--black);
}
.cta-primary {
background: var(--black);
color: var(--white);
padding: 0.5rem 0;
border-bottom-color: var(--black);
}
.cta-primary:hover {
color: var(--red);
background: var(--black);
}
footer {
padding: 1.25rem 1.5rem;
font-size: 0.7rem;
letter-spacing: 0.2em;
font-weight: 500;
}
footer a {
color: var(--black);
text-decoration: none;
}
footer a:hover { text-decoration: underline; }