FILE / ScuroNeko/scuroneko.dev
styles/main.css
Исходный файл и его история в репозитории.
173 lines
2.5 KiB
CSS
173 lines
2.5 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);
|
|
|
|
--block-size: 980px;
|
|
|
|
font-size: 16px;
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
padding: 48px 12px;
|
|
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%;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.tone-blue {
|
|
--card-accent: var(--primary);
|
|
--card-glow: var(--glow-blue);
|
|
}
|
|
|
|
.tone-gold {
|
|
--card-accent: var(--warm);
|
|
--card-glow: var(--glow-gold);
|
|
}
|
|
|
|
.tone-mint {
|
|
--card-accent: var(--accent);
|
|
--card-glow: var(--glow-mint);
|
|
}
|
|
|
|
.tone-purple {
|
|
--card-accent: #b876d3;
|
|
--card-glow: var(--glow-purple);
|
|
}
|
|
|
|
.tone-red {
|
|
--card-accent: var(--danger);
|
|
--card-glow: var(--glow-red);
|
|
}
|
|
|
|
.tone-cyan {
|
|
--card-accent: #7fb4ca;
|
|
--card-glow: var(--glow-cyan);
|
|
}
|
|
|
|
.tone-green {
|
|
--card-accent: #98bb6c;
|
|
--card-glow: var(--glow-green);
|
|
}
|
|
|
|
.tone-pink {
|
|
--card-accent: #d27e99;
|
|
--card-glow: var(--glow-pink);
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
body {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.block {
|
|
width: 100%;
|
|
margin-inline: 0;
|
|
}
|
|
}
|