FILE / ScuroNeko/scuroneko.dev
styles/main.css
Исходный файл и его история в репозитории.
143 lines
2.2 KiB
CSS
143 lines
2.2 KiB
CSS
:root {
|
|
--bg: #1f1f28;
|
|
--surface: #2a2a37;
|
|
--border: #4a4a61;
|
|
|
|
--text: #dcd7ba;
|
|
--text-soft: #c8c093;
|
|
--text-muted: #938056;
|
|
|
|
--primary: #7e9cd8;
|
|
--accent: #7aa89f;
|
|
--warm: #e6c384;
|
|
--danger: #c34043;
|
|
--glow-blue: rgba(126, 156, 216, 0.2);
|
|
--glow-gold: rgba(230, 195, 132, 0.2);
|
|
--glow-mint: rgba(122, 168, 159, 0.2);
|
|
--glow-purple: rgba(184, 118, 211, 0.26);
|
|
--glow-red: rgba(195, 64, 67, 0.2);
|
|
--glow-cyan: rgba(127, 180, 202, 0.2);
|
|
--glow-green: rgba(152, 187, 108, 0.18);
|
|
--glow-pink: rgba(210, 126, 153, 0.18);
|
|
--glow-teal: rgba(107, 196, 180, 0.18);
|
|
--glow-lime: rgba(184, 204, 100, 0.18);
|
|
--glow-rose: rgba(224, 112, 128, 0.2);
|
|
|
|
--block-size: 980px;
|
|
|
|
--fonts-monospace: "Fantasque Sans Mono", "JetBrains Mono", monospace;
|
|
|
|
font-size: 16px;
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
--card-accent: var(--accent);
|
|
--card-glow: var(--glow-mint);
|
|
font-family: "Barlow", sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
min-height: 100%;
|
|
padding: 48px 12px;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(3.5rem, 7vw, 5rem);
|
|
line-height: 0.95;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(1.85rem, 3vw, 2.25rem);
|
|
line-height: 1;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Barlow Condensed", sans-serif;
|
|
}
|
|
|
|
.block {
|
|
width: calc(100% - 24px);
|
|
max-width: var(--block-size);
|
|
padding: 18px 0;
|
|
margin: 12px 24px;
|
|
border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
}
|
|
|
|
.section-index {
|
|
color: var(--text-soft);
|
|
font-family: monospace;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.block-subtitle {
|
|
color: var(--text-soft);
|
|
margin-top: 4px;
|
|
max-width: 560px;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
body {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.block {
|
|
width: 100%;
|
|
margin-inline: 0;
|
|
}
|
|
}
|