From 61ce9092586056f824ac20ee7b8b823a3f897fe5 Mon Sep 17 00:00:00 2001
From: Anton Titovets <bayselonarrend@gmail.com>
Date: Fri, 6 Sep 2024 11:58:34 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=BA=D0=B0=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B7=D0=BD=D0=B0=D1=87=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/badges.html   | 48 +++++++++++++++++++++++++----------------------
 web/css/style.css | 11 +++++++++++
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/web/badges.html b/web/badges.html
index 0a16cea..2409871 100644
--- a/web/badges.html
+++ b/web/badges.html
@@ -22,7 +22,8 @@
   <meta name="msapplication-starturl" content="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
   <link rel="stylesheet" type="text/css"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
   <link rel="stylesheet" type="text/css" href="css/style.css?v1" />
@@ -65,29 +66,32 @@
 
   <div id="content" class="content-center">
 
-    <div class="container">
-      <img src="static/badges.png"/>
+    <div class="container textblock">
+      <img src="static/badges.png" />
       <h1>Значки проекта OpenYellow</h1>
-      <p>Если вы - автор репозитория, который находится в ТОП-500, то вы можете помочь проекту OpenYellow, используя наш значок (badge) в своем репозитории. 
-        Он будет всегда показывать актуальную позицию вашего проекта в рейтинге, а при нажатии - перенаправлять на страницу ТОП-500 с фокусировкой соответствующей строке таблицы</p>
-        <br/>
-      <p>Добавить такой значок себе очень просто - достаточно найти свой репозиторий в рейтинговой таблице и скопировать текст Markdown разметки в самой последней колонке. 
-        Этот текст, будучи вставленным в Readme файл репозитория, будет отображаться там как svg значок (как на картинке выше)</p>
+      <p>Если вы - автор репозитория, который находится в ТОП-500, то вы можете помочь проекту OpenYellow, используя наш
+        значок (badge) в своем репозитории.
+        Он будет всегда показывать актуальную позицию вашего проекта в рейтинге, а при нажатии - перенаправлять на
+        страницу ТОП-500 с фокусировкой соответствующей строке таблицы</p>
+      <br />
+      <p>Добавить такой значок себе очень просто - достаточно найти свой репозиторий в рейтинговой таблице и скопировать
+        текст Markdown разметки в самой последней колонке.
+        Этот текст, будучи вставленным в Readme файл репозитория, будет отображаться там как svg значок (как на картинке
+        выше)</p>
     </div>
-    
-  <script type="text/javascript">
-    window.addEventListener("pageshow", function (event) {
-      var historyTraversal = event.persisted ||
-        (typeof window.performance != "undefined" &&
-          window.performance.navigation.type === 2);
-      if (historyTraversal) {
-        // Handle page restore.
-        window.location.reload();
-      }
-    });
-  </script>
 
-</body>
+    <script type="text/javascript">
+      window.addEventListener("pageshow", function (event) {
+        var historyTraversal = event.persisted ||
+          (typeof window.performance != "undefined" &&
+            window.performance.navigation.type === 2);
+        if (historyTraversal) {
+          // Handle page restore.
+          window.location.reload();
+        }
+      });
+    </script>
 
-</html>
+</body>
 
+</html>
\ No newline at end of file
diff --git a/web/css/style.css b/web/css/style.css
index fbee02f..342c8dc 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -365,6 +365,17 @@ td {
         max-width: 100%;
     }
 
+    .textblock {
+        width: 100%;
+        max-width: 720px;
+        padding: 1vw;
+        margin: auto;
+        background-color: #212121;
+        border-top: solid 1px rgba(0, 0, 0, .3);
+        border-radius: 45px;
+        box-shadow: rgba(0, 0, 0, .40) 0px 5px 10px;
+    }
+
     .author {
         border: none;
         border-bottom: 1px solid #202020;