From ce574f57e9b62746e96bbef3e7ce9c3557be2041 Mon Sep 17 00:00:00 2001 From: escfrpls Date: Wed, 29 Apr 2026 19:23:21 +0200 Subject: Initial import of Astro site --- style.css | 214 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100755 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100755 index 0000000..cc97ebb --- /dev/null +++ b/style.css @@ -0,0 +1,214 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: #0a0a14; + color: #ddd; + line-height: 1.6; + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 30px; +} +header h1 { + font-size: 3rem; + color: #f0d080; + letter-spacing: 2px; +} +.subtitle { + color: #888; + font-size: 1.2rem; +} + +/* Скрываем радио-кнопки */ +input[type="radio"][name="tabs"] { + display: none; +} + +/* Навигация — метки */ +nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 40px; +} +nav label { + padding: 10px 20px; + background: #131320; + border: 1px solid #2a2a40; + border-radius: 30px; + color: #aaa; + cursor: pointer; + font-size: 0.95rem; + transition: 0.3s; +} +nav label:hover { + background: #252540; + color: #fff; + border-color: #f0d080; +} + +/* Подсветка активной вкладки через комбинатор ~ */ +#tab-about:checked ~ nav label[for="tab-about"], +#tab-sun:checked ~ nav label[for="tab-sun"], +#tab-moon:checked ~ nav label[for="tab-moon"], +#tab-solar:checked ~ nav label[for="tab-solar"], +#tab-galaxy:checked ~ nav label[for="tab-galaxy"], +#tab-comet:checked ~ nav label[for="tab-comet"], +#tab-other:checked ~ nav label[for="tab-other"] { + background: #f0d080; + color: #0a0a14; + border-color: #f0d080; + font-weight: bold; +} + +/* Содержимое вкладок */ +.tab-content { + display: none; +} + +/* Показываем нужную вкладку по выбору радио */ +#tab-about:checked ~ #content #about, +#tab-sun:checked ~ #content #sun, +#tab-moon:checked ~ #content #moon, +#tab-solar:checked ~ #content #solar, +#tab-galaxy:checked ~ #content #galaxy, +#tab-comet:checked ~ #content #comet, +#tab-other:checked ~ #content #other { + display: block; +} + +/* Заголовки разделов */ +h2 { + font-size: 2rem; + margin-bottom: 20px; + color: #f0d080; + border-bottom: 1px solid #333; + padding-bottom: 0.3em; +} + +h3 { + margin-top: 20px; + color: #f0d080; +} + +/* Стиль текста «О себе» */ +.about-text p { + margin-bottom: 10px; +} +.about-text ul { + list-style: square; + padding-left: 20px; + margin: 10px 0 20px; +} +.about-text a { + color: #f0d080; +} + +/* Галерея */ +.gallery { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.card { + display: block; + text-decoration: none; + background: #0d0d1a; + border: 1px solid #222; + border-radius: 12px; + overflow: hidden; + transition: transform 0.3s, box-shadow 0.3s; + aspect-ratio: 4 / 3; + position: relative; +} +.card:hover { + transform: translateY(-6px); + box-shadow: 0 12px 24px rgba(0,0,0,0.7); + border-color: #f0d080; +} +.card img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.card span { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px; + background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); + color: #ddd; + font-size: 0.9rem; + text-align: center; +} + +/* Модальные окна */ +.modal { + display: none; + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.92); + z-index: 1000; + align-items: center; + justify-content: center; +} +.modal:target { + display: flex; +} +.modal-inner { + position: relative; + max-width: 90vw; + max-height: 90vh; + text-align: center; +} +.modal-inner img { + max-width: 100%; + max-height: 80vh; + object-fit: contain; + border-radius: 8px; +} +.modal-inner p { + margin-top: 15px; + color: #ccc; + font-size: 1rem; +} +.close { + position: absolute; + top: -10px; + right: -10px; + font-size: 40px; + color: #fff; + text-decoration: none; + opacity: 0.7; + transition: 0.2s; +} +.close:hover { + opacity: 1; +} + +/* Подвал */ +footer { + text-align: center; + margin-top: 60px; + padding: 20px 0; + color: #555; + border-top: 1px solid #222; +} +footer a { + color: #f0d080; + text-decoration: none; +} -- cgit v1.2.3