Правки блока информации значков

OpenBSL · Sep 6, 2024 · 61ce909 · 61ce909
1 parent ba6129b
commit 61ce909
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 22 deletions.
diff --git 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/[email protected]/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/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>
diff --git 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;