From 13fb30100a586130b85b3a10533622de04d9aaf6 Mon Sep 17 00:00:00 2001
From: Max <max@tilde.net.ua>
Date: Fri, 23 Jan 2026 22:27:33 +0200
Subject: [PATCH] Improve page styling

---
 index.html | 198 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 155 insertions(+), 43 deletions(-)

diff --git a/index.html b/index.html
index f3af986..95c9b8d 100644
--- a/index.html
+++ b/index.html
@@ -21,76 +21,188 @@
     <title>WEnet IRC Network</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: 'Ubuntu Mono';
-            background-color: #f4f4f4;
-            color: #333;
-            padding: 20px;
-            line-height: 1.6;
-            font-size: 1.1em;
+            font-family: 'Ubuntu Mono', monospace;
+            background-color: #f0f0f0;
+            color: #2c2c2c;
+            padding: 40px 20px;
+            line-height: 1.7;
+            font-size: 1.05em;
         }
+
+        .container {
+            max-width: 720px;
+            margin: 0 auto;
+        }
+
+        pre.ascii-art {
+            color: #007acc;
+            font-size: 0.65em;
+            line-height: 1.2;
+            margin-bottom: 24px;
+            overflow-x: auto;
+        }
+
         h1 {
-            font-size: 2em;
-            margin-bottom: 20px;
+            font-size: 1.8em;
+            margin-bottom: 16px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #007acc;
         }
+
+        .intro {
+            margin-bottom: 32px;
+            padding: 16px;
+            background: #fff;
+            border-left: 3px solid #007acc;
+            border-radius: 0 4px 4px 0;
+        }
+
         h2 {
-            font-size: 1.5em;
-            margin-top: 20px;
+            font-size: 1.3em;
+            margin-top: 32px;
+            margin-bottom: 12px;
         }
-        p {
-            margin-bottom: 10px;
-        }
-        ul {
-            margin-top: 10px;
+
+        section {
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 20px 24px;
             margin-bottom: 20px;
         }
+
+        section h2 {
+            margin-top: 0;
+        }
+
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        ul li {
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        ul li:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+
+        ul li:first-child {
+            padding-top: 0;
+        }
+
         a {
             color: #007acc;
             text-decoration: none;
+            border-bottom: 1px dotted #007acc;
+            transition: border-bottom-color 0.2s;
         }
+
         a:hover {
-            text-decoration: underline;
+            border-bottom-color: transparent;
         }
-        /* Dark mode styles */
+
         @media (prefers-color-scheme: dark) {
             body {
-                background-color: #1a1a1a;
-                color: #f4f4f4;
+                background-color: #121212;
+                color: #e0e0e0;
             }
+
+            pre.ascii-art {
+                color: #4ea4ff;
+            }
+
+            h1 {
+                border-bottom-color: #4ea4ff;
+            }
+
+            .intro {
+                background: #1e1e1e;
+                border-left-color: #4ea4ff;
+            }
+
+            section {
+                background: #1e1e1e;
+                border-color: #333;
+            }
+
+            ul li {
+                border-bottom-color: #333;
+            }
+
             a {
                 color: #4ea4ff;
+                border-bottom-color: #4ea4ff;
+            }
+        }
+
+        @media (max-width: 600px) {
+            body {
+                padding: 20px 12px;
+            }
+
+            pre.ascii-art {
+                font-size: 0.45em;
+            }
+
+            section {
+                padding: 14px 16px;
             }
         }
     </style>
 </head>
 <body>
-    <pre>
+<div class="container">
+    <pre class="ascii-art">
+            .---.    ,---,.                          ___
+           /. ./|  ,'  .' |                        ,--.'|_
+       .--'.  ' ;,---.'   |      ,---,             |  | :,'
+      /__./ \ : ||   |   .'  ,-+-. /  |            :  : ' :
+  .--'.  '   \' .:   :  |-, ,--.'|'   |   ,---.  .;__,'  /
+ /___/ \ |    ' ':   |  ;/||   |  ,"' |  /     \ |  |   |
+ ;   \  \;      :|   :   .'|   | /  | | /    /  |:__,'| :
+  \   ;  `      ||   |  |-,|   | |  | |.    ' / |  '  : |__
+   .   \    .\  ;'   :  ;/||   | |  |/ '   ;   /|  |  | '.'|
+    \   \   ' \ ||   |    \|   | |--'  '   |  / |  ;  :    ;
+     :   '  |--" |   :   .'|   |/      |   :    |  |  ,   /
+      \   \ ;    |   | ,'  '---'        \   \  /    ---`-'
+       '---"     `----'                  `----'             ua
     </pre>
+    <h1>WEnet IRC Network</h1>
 
-    <h1>🇺🇦 WEnet IRC Network</h1>
+    <p class="intro">IRC (Internet Relay Chat) — це класичний протокол для текстового обміну повідомленнями, створений у 1988 році. Він дозволяє користувачам спілкуватися в реальному часі у відкритих каналах або приватних чатах. Хоча IRC був популярним у 90-х та на початку 2000-х, він і досі залишається актуальним завдяки своїй простоті, низьким вимогам до ресурсів та широкій підтримці різними операційними системами. Користувачі можуть створювати власні канали, обговорювати будь-які теми, ділитися файлами та навіть налаштовувати боти для автоматизації завдань. Завдяки децентралізованій природі, IRC надає незалежність від комерційних платформ та зберігає високу приватність комунікацій.</p>
 
-    <p>💬 IRC (Internet Relay Chat) — це класичний протокол для текстового обміну повідомленнями, створений у 1988 році. Він дозволяє користувачам спілкуватися в реальному часі у відкритих каналах або приватних чатах. Хоча IRC був популярним у 90-х та на початку 2000-х, він і досі залишається актуальним завдяки своїй простоті, низьким вимогам до ресурсів та широкій підтримці різними операційними системами. Користувачі можуть створювати власні канали, обговорювати будь-які теми, ділитися файлами та навіть налаштовувати боти для автоматизації завдань. Завдяки децентралізованій природі, IRC надає незалежність від комерційних платформ та зберігає високу приватність комунікацій.</p>
+    <section>
+        <h2>Дані для підключення</h2>
+        <ul>
+            <li><strong>Сервер:</strong> irc.we.net.ua</li>
+            <li><strong>Порт:</strong> 6697 (SSL) або 6667-6669 (незашифроване)</li>
+            <li><strong>Канали:</strong> <a href="irc://irc.we.net.ua/we" target="_blank">#we</a>, <a href="irc://irc.we.net.ua/help" target="_blank">#help</a></li>
+        </ul>
+    </section>
 
-    <h2>🔧 Дані для підключення</h2>
-    <p>Для підключення до WEnet IRC використовуйте наступні параметри:</p>
-    <ul>
-        <li><strong>🌍 Сервер:</strong> irc.we.net.ua</li>
-        <li><strong>🔒 Порт:</strong> 6697 (SSL) або 6667-6669 (для незашифрованого з'єднання)</li>
-        <li><strong>📢 Канали:</strong> <a href="irc://irc.we.net.ua/we" target="_blank">#we</a>, <a href="irc://irc.we.net.ua/help" target="_blank">#help</a></li>
-    </ul>
-
-    <h2>🛠 Рекомендовані IRC клієнти</h2>
-    <ul>
-        <li><strong>Windows:</strong> <a href="https://www.mirc.com/" target="_blank">mIRC</a></li>
-        <li><strong>macOS:</strong> <a href="https://textualapp.com/" target="_blank">Textual</a></li>
-        <li><strong>Linux:</strong> <a href="https://hexchat.github.io/" target="_blank">HexChat</a></li>
-        <li><strong>Android:</strong> <a href="https://f-droid.org/uk/packages/io.mrarm.irc/" target="_blank">Revolution IRC</a></li>
-        <li>
-            <strong>iOS:</strong> 
-            <a href="https://palaverapp.com/" target="_blank">Palaver</a>,
-            <a href="https://apps.apple.com/ua/app/colloquy/id302000478" target="_blank">Colloquy</a>
-        </li>
-        <li><strong>Web:</strong> <a href="https://kiwiirc.com/" target="_blank">KiwiIRC</a></li>
-    </ul>
+    <section>
+        <h2>Рекомендовані IRC клієнти</h2>
+        <ul>
+            <li><strong>Windows:</strong> <a href="https://www.mirc.com/" target="_blank">mIRC</a></li>
+            <li><strong>macOS:</strong> <a href="https://textualapp.com/" target="_blank">Textual</a></li>
+            <li><strong>Linux:</strong> <a href="https://hexchat.github.io/" target="_blank">HexChat</a></li>
+            <li><strong>Android:</strong> <a href="https://f-droid.org/uk/packages/io.mrarm.irc/" target="_blank">Revolution IRC</a></li>
+            <li><strong>iOS:</strong> <a href="https://palaverapp.com/" target="_blank">Palaver</a>, <a href="https://apps.apple.com/ua/app/colloquy/id302000478" target="_blank">Colloquy</a></li>
+            <li><strong>Web:</strong> <a href="https://kiwiirc.com/" target="_blank">KiwiIRC</a></li>
+        </ul>
+    </section>
+</div>
 </body>
 </html>