diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 250 |
1 files changed, 159 insertions, 91 deletions
@@ -1,91 +1,159 @@ - /* ── Reset & base ── */ - *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } - - :root { - --bg: #ffffff; - --fg: #111111; - --muted: #666666; - --accent: #0057ff; - --max-w: 640px; - --gap: 1.5rem; - } - - body { - background: var(--bg); - color: var(--fg); - font-family: Georgia, 'Times New Roman', serif; - font-size: 1.05rem; - line-height: 1.7; - padding: 3rem 1.25rem; - } - - /* ── Layout ── */ - #app { - max-width: var(--max-w); - margin: 0 auto; - } - - /* ── Nav ── */ - nav { - margin-bottom: 3rem; - display: flex; - gap: 1.25rem; - } - - nav a { - color: var(--muted); - text-decoration: none; - font-family: system-ui, sans-serif; - font-size: 0.9rem; - letter-spacing: 0.03em; - transition: color 0.15s; - } - - nav a:hover, - nav a.active { color: var(--fg); } - - /* ── Page sections ── */ - .page { display: none; } - .page.active { display: block; } - - h1 { - font-size: 1.6rem; - font-weight: normal; - margin-bottom: 1rem; - } - - p { margin-bottom: var(--gap); } - - a { color: var(--accent); } - - /* ── Blog list ── */ - .post-list { list-style: none; } - - .post-list li { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: 1rem; - padding: 0.6rem 0; - border-bottom: 1px solid #eee; - } - - .post-list a { - text-decoration: none; - color: var(--fg); - } - - .post-list a:hover { text-decoration: underline; } - - .post-date { - color: var(--muted); - font-family: system-ui, sans-serif; - font-size: 0.85rem; - white-space: nowrap; - } - - /* ── Mobile ── */ - @media (max-width: 480px) { - body { padding: 2rem 1rem; } - .post-list li { flex-direction: column; gap: 0.15rem; } - } +/* Reset & base */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #f0f0eb; + --fg: #111111; + --muted: #666666; + --accent: #0057ff; +} + +body { + background: var(--bg); + color: var(--fg); + font-family: Georgia, 'Times New Roman', serif; + font-size: 1.05rem; + line-height: 1.7; + padding: 3rem 1.25rem; +} + +#app { + max-width: 640px; + margin: 0 auto; +} + +/* Nav */ +nav { + margin-bottom: 3rem; + display: flex; + gap: 1.25rem; + font-weight: bold; +} + +nav a { + color: var(--muted); + text-decoration: none; + font-family: system-ui, sans-serif; + font-size: 1.0rem; + letter-spacing: 0.03em; + transition: color 0.15s; +} + +nav a:hover, +nav a.active { color: var(--fg); } + + +/* Footer */ +footer { + margin-top: 4rem; + padding-top: 1rem; + color: var(--muted); + font-family: system-ui, sans-serif; + font-size: 0.85rem; + text-align: center; + /* border-top: 1px solid #eee; */ +} + + + +/* Banner */ +.banner { + width: 100%; + height: 200px; + background: linear-gradient(135deg, #a8c5a0, #c8dfc4); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + border-radius: 4px; +} + +.banner span { + color: white; + font-size: 2.5rem; + font-family: system-ui, sans-serif; + font-weight: bold; + letter-spacing: 0.1em; + text-transform: uppercase; + border: 3px solid white; + padding: 0.4rem 1.2rem; +} + + + + +/* Base elemets */ +h1 { + font-size: 2rem; + font-weight: normal; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.4rem; + font-weight: normal; + margin: 2rem 0 0.5rem; +} + +p { margin-bottom: 1.5rem; } + +a { color: var(--accent); } + + + +/* About page */ + +.contact-list { + display: flex; + gap: 1rem; + align-items: center; +} + +.contactImg { + width: 4rem; + height: auto; +} + + +/* Blog list */ +.post-list { list-style: none; } + +.post-list li { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 1rem; + padding: 0.6rem 0; + border-bottom: 1px solid #eee; +} + +.post-list a { + text-decoration: none; + color: var(--fg); +} + +.post-list a:hover { text-decoration: underline; } + +.post-date, +.post-meta { + color: var(--muted); + font-family: system-ui, sans-serif; + font-size: 0.85rem; + white-space: nowrap; + margin-bottom: 2rem; +} + +/*Code*/ +pre { + background: #f5f5f5; + padding: 1rem; + overflow-x: auto; + font-size: 0.9rem; + margin-bottom: 1.5rem; +} + +/* Mobile─*/ +@media (max-width: 480px) { + body { padding: 2rem 1rem; } + .post-list li { flex-direction: column; gap: 0.15rem; } +} |