Initial commit
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
:root {
|
||||
--bg: #1d2021;
|
||||
--bg0: #282828;
|
||||
--bg1: #3c3836;
|
||||
--bg2: #504945;
|
||||
--fg: #ebdbb2;
|
||||
--fg2: #d5c4a1;
|
||||
--fg3: #bdae93;
|
||||
--fg4: #a89984;
|
||||
--aqua: #8ec07c;
|
||||
--line: #3c3836;
|
||||
--vk: 'Vollkorn', Georgia, serif;
|
||||
--mj: 'Manjari', sans-serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--vk);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Profile header ────────────────────────────────────────── */
|
||||
|
||||
.profile-hdr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 28px 20px 22px;
|
||||
}
|
||||
|
||||
.profile-inner {
|
||||
max-width: 935px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.avatar-ring {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg2);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg1);
|
||||
}
|
||||
|
||||
.avatar-ring img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatar-initials {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--fg3);
|
||||
font-family: var(--vk);
|
||||
}
|
||||
|
||||
.pinfo h1 {
|
||||
font-family: var(--vk);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.handle {
|
||||
font-size: 12px;
|
||||
color: var(--fg4);
|
||||
font-family: monospace;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.pcount {
|
||||
font-size: 15px;
|
||||
color: var(--fg3);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pcount strong {
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pbio {
|
||||
font-size: 15px;
|
||||
color: var(--fg2);
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.7;
|
||||
max-width: 280px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ml {
|
||||
font-family: var(--mj);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rss-a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
color: var(--aqua);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.rss-a:hover {
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* ── Photo grid ────────────────────────────────────────────── */
|
||||
|
||||
.grid-wrap {
|
||||
max-width: 935px;
|
||||
margin: 0 auto;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.pgrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.ptile {
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
background: var(--bg1);
|
||||
}
|
||||
|
||||
.ptile img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.ptile:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ── Single photo page ─────────────────────────────────────── */
|
||||
|
||||
.photo-page {
|
||||
max-width: 935px;
|
||||
margin: 0 auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
color: var(--fg3);
|
||||
text-decoration: none;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--vk);
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.dlayout {
|
||||
display: flex;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.dimg-wrap {
|
||||
flex: 1;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
background: var(--bg1);
|
||||
}
|
||||
|
||||
.dimg-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dsidebar {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
padding: 18px;
|
||||
border-left: 1px solid var(--line);
|
||||
background: var(--bg0);
|
||||
}
|
||||
|
||||
.dauthor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.mini-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--bg2);
|
||||
background: var(--bg1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg3);
|
||||
font-family: var(--vk);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dauthor-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
font-family: var(--vk);
|
||||
}
|
||||
|
||||
.dcaption {
|
||||
font-family: var(--vk);
|
||||
font-size: 17px;
|
||||
font-style: italic;
|
||||
color: var(--fg);
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ddate {
|
||||
font-size: 11px;
|
||||
color: var(--fg4);
|
||||
font-family: monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ── Responsive ────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.profile-inner { gap: 18px; }
|
||||
.avatar-ring { width: 60px; height: 60px; }
|
||||
.avatar-initials { font-size: 22px; }
|
||||
.pinfo h1 { font-size: 20px; }
|
||||
.pgrid { grid-template-columns: repeat(2, 1fr); }
|
||||
.dlayout { flex-direction: column; }
|
||||
.dsidebar { width: 100%; border-left: none; border-top: 1px solid var(--line); }
|
||||
}
|
||||
Reference in New Issue
Block a user