From 24a06a7c28dadf4aa94f175a9f0593d67aa91f53 Mon Sep 17 00:00:00 2001 From: nik Date: Mon, 29 Sep 2025 22:38:53 +0300 Subject: [PATCH] theme changed --- assets/css/custom.css | 406 ++++-------------------------------------- config.yaml | 14 +- 2 files changed, 31 insertions(+), 389 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index cf9f00a..1722d83 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,394 +1,48 @@ -/* Fira Code: https://github.com/tonsky/FiraCode */ -@import url("https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap"); - +/* Черно-белая цветовая схема */ :root { - --background: #000000; - --foreground: #ffffff; - --accent: #ffffff; - --radius: 0; - --font-size: 1rem; - --line-height: 1.54em; + --accent: #000000; + --background: #ffffff; + --color: #000000; + --border-color: #000000; } -html { - box-sizing: border-box; -} - -*, -*:before, -*:after { - box-sizing: inherit; - margin: 0; - padding: 0; -} - -body { - font-family: - "Fira Code", "JetBrains Mono", Monaco, Consolas, "Ubuntu Mono", monospace; - font-size: var(--font-size); - font-weight: 400; - line-height: var(--line-height); - background-color: var(--background); - color: var(--foreground); - text-rendering: optimizeLegibility; - font-variant-ligatures: contextual; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; -} - -h1 { - font-size: calc(var(--font-size) * 1.45); - letter-spacing: 0; -} - -h2 { - font-size: calc(var(--font-size) * 1.35); - letter-spacing: 0; -} - -h3 { - font-size: calc(var(--font-size) * 1.15); - letter-spacing: 0; -} - -h4, -h5, -h6 { - font-size: calc(var(--font-size) * 1); - letter-spacing: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6, -p, -ul, -ol, -img, -figure, -video, -table { - margin: 25px 0; +/* Для dark mode */ +@media (prefers-color-scheme: dark) { + :root { + --accent: #ffffff; + --background: #000000; + --color: #ffffff; + --border-color: #ffffff; + } } +/* Убираем цветные акценты */ a { + color: var(--color); + text-decoration: underline; +} + +a:hover { color: var(--accent); } +/* Кнопки и элементы интерфейса */ +.button, button { - position: relative; - font: inherit; - font-weight: bold; - text-decoration: none; - text-align: center; - background: transparent; - color: var(--accent); - padding: 5px 18px; - border: 4px solid var(--accent); - border-radius: var(--radius); - transition: background 0.15s linear; - appearance: none; - cursor: pointer; - outline: none; -} - -button:hover { - background: color-mix(in srgb, var(--accent) 15%, transparent); -} - -button:focus-visible, -a:focus-visible { - outline: 1px solid var(--accent); - outline-offset: 2px; -} - -fieldset { - display: inline-block; - border: 2px solid var(--foreground); - border-radius: calc(var(--radius) * 1.6); - padding: 10px; -} - -fieldset *:first-child { - margin-top: 0; -} - -fieldset input, -fieldset select, -fieldset textarea, -fieldset label, -fieldset button { - margin-top: calc(var(--line-height) * 0.5); - width: 100%; -} - -label { - display: inline-block; -} - -label input { - margin-top: 0; -} - -input, -textarea, -select { - background: transparent; - color: var(--foreground); - border: 1px solid var(--foreground); - border-radius: var(--radius); - padding: 10px; - font: inherit; - appearance: none; -} - -input[type="checkbox"] { - width: auto; -} - -input:focus-visible, -input:active, -textarea:focus-visible, -textarea:active, -select:focus-visible, -select:active { - border-color: var(--accent); - outline: 1px solid var(--accent); - outline-offset: 2px; -} - -input:active, -textarea:active, -select:active { - box-shadow: none; -} - -select { - background-image: - linear-gradient(45deg, transparent 50%, var(--foreground) 50%), - linear-gradient(135deg, var(--foreground) 50%, transparent 50%); - background-position: calc(100% - 20px), calc(100% - 15px); - background-size: - 5px 5px, - 5px 5px; - background-repeat: no-repeat; - padding-right: 40px; -} - -select option { background: var(--background); + color: var(--color); + border: 1px solid var(--border-color); } -input[type="checkbox"], -input[type="radio"] { - vertical-align: middle; - padding: 10px; - box-shadow: inset 0 0 0 3px var(--background); -} - -input[type="radio"] { - display: inline-block; - width: 10px !important; - height: 10px !important; - border-radius: 20px; -} - -input[type="checkbox"]:checked, -input[type="radio"]:checked { - background: var(--accent); -} - -img { - display: block; - max-width: 100%; - border: 8px solid var(--accent); - border-radius: var(--radius); - padding: 8px; - overflow: hidden; -} - -figure img, -figure video { - margin-bottom: 0; -} - -figure figcaption { - background: var(--accent); +.button:hover, +button:hover { + background: var(--color); color: var(--background); - text-align: center; - font-size: 1em; - font-weight: normal; - margin-top: -8px; - border-radius: 0 0 var(--radius) var(--radius); -} - -ul, -ol { - margin-left: 4ch; - padding: 0; -} - -ul ul, -ul ol, -ol ul, -ol ol { - margin-top: 0; -} - -li::marker { - color: var(--accent); -} - -ul li, -ol li { - position: relative; -} - -code, -kbd { - font-family: - "Fira Code", - "JetBrains Mono", - Monaco, - Consolas, - Ubuntu Mono, - monospace !important; - font-feature-settings: normal; - background: color-mix(in srgb, var(--foreground) 5%, transparent); - color: color-mix(in srgb, var(--foreground) 5%, var(--accent)); - padding: 0 6px; - margin: 0 2px; - font-size: 0.95em; } +/* Код */ code { - border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent); -} - -kbd { - border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); - border-left: 1px solid var(--accent); - border-right: 1px solid var(--accent); - border-bottom: 4px solid var(--accent); - border-radius: 4px; -} - -code code { - background: transparent; - padding: 0; - margin: 0; -} - -pre { - tab-size: 4; - background: color-mix(in srgb, var(--foreground) 5%, transparent) !important; - color: color-mix(in srgb, var(--foreground) 5%, var(--accent)); - padding: 20px 10px; - font-size: 0.95em !important; - overflow: auto; - border-radius: var(--radius); - border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent); -} - -pre code { - background: none !important; - margin: 0; - padding: 0; - font-size: inherit; - border: none; -} - -sup { - line-height: 0; -} - -abbr { - position: relative; - text-decoration-style: wavy; - text-decoration-color: var(--accent); - cursor: help; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.25em; -} - -mark { - background: color-mix(in srgb, var(--accent) 45%, transparent); - color: var(--foreground); -} - -blockquote { - position: relative; - border-top: 1px solid var(--accent); - border-bottom: 1px solid var(--accent); - margin: 0; - padding: 25px; -} - -blockquote:before { - content: ">"; - display: block; - position: absolute; - left: 0; - color: var(--accent); -} - -blockquote p:first-child { - margin-top: 0; -} - -blockquote p:last-child { - margin-bottom: 0; -} - -table { - table-layout: auto; - border-collapse: collapse; -} - -table, -th, -td { - border: 2px solid var(--foreground); - padding: 10px; -} - -th { - border-style: solid; - color: var(--foreground); - text-align: left; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -hr { - width: 100%; - border: none; - background: var(--accent); - height: 2px; -} - -/* Bold elements */ - -h1, -h2, -h3, -h4, -h5, -h6, -b, -strong, -th, -button { - font-weight: 600; + background: var(--background); + color: var(--color); + border: 1px solid var(--border-color); } diff --git a/config.yaml b/config.yaml index 61a69fa..e3a59ba 100644 --- a/config.yaml +++ b/config.yaml @@ -5,21 +5,9 @@ theme: 'terminal' params: contentTypeName: 'posts' - themeColor: 'orange' + themeColor: 'orange' # Можно удалить эту строку showMenuItems: 2 fullWidthTheme: false centerTheme: false - # Добавь эту строку для кастомного CSS customCSS: - css/custom.css - -menu: - main: - - identifier: blog - name: Blog - url: /blog/ - weight: 1 - - identifier: about - name: About - url: /about/ - weight: 2