Обновить static/css/custom.css

static/css/custom.css

@@ -94,3 +94,83 @@ main img {
     max-width: 150px;
     border: 2px solid #ddd;
 }
+/* ------------------------------------------------------------------ */
+/* Мобильная адаптация */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+    
+    nav {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    nav a {
+        margin-right: 0;
+        padding: 10px;
+        background: rgba(0, 51, 102, 0.05);
+        border-radius: 5px;
+    }
+    
+    main {
+        padding: 15px;
+    }
+    
+    h1 {
+        font-size: 1.5em;
+    }
+    
+    h2 {
+        font-size: 1.3em;
+    }
+}
+
+/*  Тёмная тема (переключатель) */
+/* Тёмная тема */
+body.dark-mode {
+    background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
+    color: #e2e8f0;
+}
+
+body.dark-mode::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M0 0 L50 50 M50 0 L0 50' stroke='%234a5568' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='25' cy='25' r='1.5' fill='%234a5568' opacity='0.2'/%3E%3C/svg%3E");
+}
+
+body.dark-mode header,
+body.dark-mode main {
+    background: rgba(45, 55, 72, 0.95);
+    color: #e2e8f0;
+}
+
+body.dark-mode h1,
+body.dark-mode h2,
+body.dark-mode h3 {
+    color: #63b3ed;
+}
+
+body.dark-mode a {
+    color: #90cdf4;
+}
+
+/* Кнопка переключения темы */
+.theme-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #003366;
+    color: white;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    font-size: 24px;
+    transition: transform 0.3s;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+}