Адаптив

doka-guide · Jan 14, 2025 · c37166f · c37166f
1 parent bd67c8f
commit c37166f
Show file tree

Hide file tree

Showing 12 changed files with 452 additions and 167 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
               class="link-arrows">>>></span></a></div>
       </header>
       <div class="wrapper">
-        <h1 class="color-title title">Цвет 2024 года</h1>
+        <h1 class="color-title title">Цвет 2024&nbsp;года</h1>
       </div>
       <div class="color-container scroll-container">
         <div class="color-card scroll-block hover-block">
@@ -343,18 +343,27 @@ <h2 class="title footer-title">Спасибо!</h2>
       <div class="footer-content dragg-zone">
         <div class="badge footer-badge avatar">
           <svg xmlns="http://www.w3.org/2000/svg" width="183" height="235" fill="none">
-            <path fill="#fff" d="M96.256 70.392s15.345 3.096 24.2 7.543c5.491 4.311 8.28 7.905 8.28 7.905l2.494 47.928.696 3.538 12.258 3.383 2.475 3.364 12.276 7.289-1.952 3.905-9.048 4.795-6.574 1.759.522 3.21 4.795 9.396 12.083 15.621 8.159 12.606 8.7 19.333 2.88 11.533H4.5s1.953-16.605 6.5-28c4.156-10.413 13.74-26.472 13.74-26.472l6.922-10.112 18.464-33.196L63.62 74.839l6.43-2.737 14.875-4.533 8.16-4.098.347 1.43-.348 2.668-1.953 2.127 5.143.696h-.02Z"/>
-            <path fill="#2E9AFF" d="M36.825 170.193c-14.81 11.407-29.638 6.149-29.638 6.149s22.465-12.471 26.757-27.106c0 0-3.982 1.991-7.23 0 0 0 15.911-16.994 16.626-39.054.716-22.04-22.233-69.756-16.627-72.462 5.607-2.707 38.32 35.96 38.32 35.96l4.698-1.43s15.003 11.02 15.177 36.153c.193 25.115-18.251 31.804-25.134 38.126-9.029 8.314-8.12 12.277-22.949 23.664ZM98.803 99.355c-7.405 30.547 37.803 39.943 37.803 39.943s-5.936-16.279-2.533-42.109c3.384-25.849 24.206-56.763 16.627-56.763-7.598 0-44.493 28.382-51.897 58.929ZM153.581 142.005l-10.112-1.257s.315 5.886 6.811 8.612c6.516 2.707 6.201 5.83 6.201 5.83l3.515-2.237 2.249-4.189-.525-3.511-2.165-2.166-5.974-1.082Z"/>
-            <path stroke="#2E9AFF" stroke-linecap="round" d="M29.302 172.518C10.728 200.47 6.292 213.624 4.412 233.5M32.052 172.676c32.512 27.197 82.483 22.467 111.389-3.986"/>
-            <path stroke="#2E9AFF" stroke-linecap="round" d="M141.132 161.608c3.915 17.579 27.834 30.868 37.652 71.892"/>
-            <path fill="#2E9AFF" d="M118.383 130.265a.5.5 0 1 0-.571.821l.571-.821Zm-38.505 21.258.303-.398-.302-.23-.302.229.301.399Zm82.264-5.825.49-.1a.49.49 0 0 0-.017-.063l-.473.163Zm-88.291 7.777a.5.5 0 0 0-.004 1l.004-1Zm43.961-22.389c10.163 7.068 20.705 9.202 28.943 10.393 4.142.599 7.64.954 10.274 1.568 2.668.623 4.175 1.458 4.641 2.813l.945-.325c-.658-1.914-2.702-2.842-5.358-3.462-2.69-.627-6.287-.995-10.359-1.584-8.19-1.184-18.546-3.291-28.515-10.224l-.571.821Zm43.841 14.711c.798 3.923-1.921 7.553-7.288 10.504-5.332 2.932-13.086 5.07-21.836 6.03-17.515 1.922-38.799-.892-52.348-11.206l-.606.795c13.838 10.534 35.423 13.341 53.063 11.405 8.827-.969 16.721-3.13 22.209-6.148 5.452-2.998 8.724-6.968 7.785-11.579l-.979.199Zm-82.076 5.327c-1.252.946-2.174 1.53-3.032 1.881-.846.346-1.654.475-2.694.47l-.004 1c1.138.005 2.083-.138 3.076-.545.98-.4 1.985-1.047 3.257-2.008l-.603-.798Z"/>
-            <path stroke="#2E9AFF" stroke-linecap="round" d="M4.5 233.539h174.544"/>
-            <path stroke="#fff" stroke-linecap="round" stroke-width="3" d="M102.5 110.004c3.5-7.004 12.5-7.004 16-.008M64 110.004c3.5-7.004 12.5-7.004 16-.008"/>
-            <path fill="#fff" d="m96.477 9.767-26.755 62.48 44.182 3.173L96.477 9.767Z"/>
-            <path fill="#2E9AFF" fill-rule="evenodd" d="m98.874 18.796-2.397-9.03-3.68 8.594 6.077.436ZM85.018 36.527l3.89-9.083 12.5.897 2.533 9.545-18.923-1.359Zm-7.78 18.167 3.89-9.083 25.347 1.82 2.533 9.545-31.77-2.282Zm34.304 11.827 2.362 8.899-44.182-3.173 3.626-8.469 38.194 2.743Z" clip-rule="evenodd"/>
-            <rect width="57.667" height="19.072" x="63.146" y="71.238" fill="#fff" rx="9.536" transform="rotate(4.101 63.146 71.238)"/>
-            <circle cx="80.695" cy="12.313" r="9.686" fill="#fff" transform="rotate(-3.84 80.695 12.313)"/>
-          </svg>          
+            <path fill="#fff"
+              d="M96.256 70.392s15.345 3.096 24.2 7.543c5.491 4.311 8.28 7.905 8.28 7.905l2.494 47.928.696 3.538 12.258 3.383 2.475 3.364 12.276 7.289-1.952 3.905-9.048 4.795-6.574 1.759.522 3.21 4.795 9.396 12.083 15.621 8.159 12.606 8.7 19.333 2.88 11.533H4.5s1.953-16.605 6.5-28c4.156-10.413 13.74-26.472 13.74-26.472l6.922-10.112 18.464-33.196L63.62 74.839l6.43-2.737 14.875-4.533 8.16-4.098.347 1.43-.348 2.668-1.953 2.127 5.143.696h-.02Z" />
+            <path fill="#2E9AFF"
+              d="M36.825 170.193c-14.81 11.407-29.638 6.149-29.638 6.149s22.465-12.471 26.757-27.106c0 0-3.982 1.991-7.23 0 0 0 15.911-16.994 16.626-39.054.716-22.04-22.233-69.756-16.627-72.462 5.607-2.707 38.32 35.96 38.32 35.96l4.698-1.43s15.003 11.02 15.177 36.153c.193 25.115-18.251 31.804-25.134 38.126-9.029 8.314-8.12 12.277-22.949 23.664ZM98.803 99.355c-7.405 30.547 37.803 39.943 37.803 39.943s-5.936-16.279-2.533-42.109c3.384-25.849 24.206-56.763 16.627-56.763-7.598 0-44.493 28.382-51.897 58.929ZM153.581 142.005l-10.112-1.257s.315 5.886 6.811 8.612c6.516 2.707 6.201 5.83 6.201 5.83l3.515-2.237 2.249-4.189-.525-3.511-2.165-2.166-5.974-1.082Z" />
+            <path stroke="#2E9AFF" stroke-linecap="round"
+              d="M29.302 172.518C10.728 200.47 6.292 213.624 4.412 233.5M32.052 172.676c32.512 27.197 82.483 22.467 111.389-3.986" />
+            <path stroke="#2E9AFF" stroke-linecap="round"
+              d="M141.132 161.608c3.915 17.579 27.834 30.868 37.652 71.892" />
+            <path fill="#2E9AFF"
+              d="M118.383 130.265a.5.5 0 1 0-.571.821l.571-.821Zm-38.505 21.258.303-.398-.302-.23-.302.229.301.399Zm82.264-5.825.49-.1a.49.49 0 0 0-.017-.063l-.473.163Zm-88.291 7.777a.5.5 0 0 0-.004 1l.004-1Zm43.961-22.389c10.163 7.068 20.705 9.202 28.943 10.393 4.142.599 7.64.954 10.274 1.568 2.668.623 4.175 1.458 4.641 2.813l.945-.325c-.658-1.914-2.702-2.842-5.358-3.462-2.69-.627-6.287-.995-10.359-1.584-8.19-1.184-18.546-3.291-28.515-10.224l-.571.821Zm43.841 14.711c.798 3.923-1.921 7.553-7.288 10.504-5.332 2.932-13.086 5.07-21.836 6.03-17.515 1.922-38.799-.892-52.348-11.206l-.606.795c13.838 10.534 35.423 13.341 53.063 11.405 8.827-.969 16.721-3.13 22.209-6.148 5.452-2.998 8.724-6.968 7.785-11.579l-.979.199Zm-82.076 5.327c-1.252.946-2.174 1.53-3.032 1.881-.846.346-1.654.475-2.694.47l-.004 1c1.138.005 2.083-.138 3.076-.545.98-.4 1.985-1.047 3.257-2.008l-.603-.798Z" />
+            <path stroke="#2E9AFF" stroke-linecap="round" d="M4.5 233.539h174.544" />
+            <path stroke="#fff" stroke-linecap="round" stroke-width="3"
+              d="M102.5 110.004c3.5-7.004 12.5-7.004 16-.008M64 110.004c3.5-7.004 12.5-7.004 16-.008" />
+            <path fill="#fff" d="m96.477 9.767-26.755 62.48 44.182 3.173L96.477 9.767Z" />
+            <path fill="#2E9AFF" fill-rule="evenodd"
+              d="m98.874 18.796-2.397-9.03-3.68 8.594 6.077.436ZM85.018 36.527l3.89-9.083 12.5.897 2.533 9.545-18.923-1.359Zm-7.78 18.167 3.89-9.083 25.347 1.82 2.533 9.545-31.77-2.282Zm34.304 11.827 2.362 8.899-44.182-3.173 3.626-8.469 38.194 2.743Z"
+              clip-rule="evenodd" />
+            <rect width="57.667" height="19.072" x="63.146" y="71.238" fill="#fff" rx="9.536"
+              transform="rotate(4.101 63.146 71.238)" />
+            <circle cx="80.695" cy="12.313" r="9.686" fill="#fff" transform="rotate(-3.84 80.695 12.313)" />
+          </svg>
         </div>
         <div class="badge footer-badge last-bun">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 177 62">

diff --git a/scripts/charts.js b/scripts/charts.js
@@ -1,7 +1,10 @@
 import { months } from "./utils.js";
+import { windowWidthDetection } from "./window-width.js";
 
 const chatMembers = document.getElementById("chatMembers");
 
+const windowWidth = windowWidthDetection();
+
 new Chart(chatMembers, {
   type: "line",
   responsive: true,
@@ -12,7 +15,7 @@ new Chart(chatMembers, {
       {
         label: "Кол-во участников в чате",
         data: [12, 19, 3, 5, 2, 3],
-        borderWidth: 2,
+        borderWidth: 4,
         borderColor: "#2E9AFF",
       },
     ],
@@ -58,7 +61,7 @@ new Chart(streamWatch, {
       {
         label: "Просмотры стримов",
         data: [12, 19, 3, 5, 2, 3],
-        borderWidth: 2,
+        borderWidth: 4,
         borderColor: "#F498AD",
       },
     ],
@@ -82,13 +85,13 @@ new Chart(maintainers, {
       {
         label: "Контрибьюторы",
         data: [12, 19, 3, 5, 2, 3],
-        borderWidth: 2,
+        borderWidth: 4,
         borderColor: "#F498AD",
       },
       {
         label: "Редакция",
         data: [3, 5, 2, 3, 12, 19],
-        borderWidth: 2,
+        borderWidth: 4,
         borderColor: "#2E9AFF",
       },
     ],
@@ -112,12 +115,12 @@ new Chart(newMaterials, {
       {
         data: [5, 10, 15, 20, 25, 30],
         backgroundColor: [
-          "#FF8630",
-          "#2E9AFF",
-          "#FFD829",
-          "#10F3AF",
-          "#41E847",
-          "#C56FFF",
+          "#663613",
+          "#123E66",
+          "#665610",
+          "#024B35",
+          "#1A5D1C",
+          "#5F377D",
         ],
       },
     ],
@@ -133,6 +136,12 @@ new Chart(newMaterials, {
 
 const newOldContributors = document.getElementById("newOldContributors");
 
+let labelPosition = "left";
+
+if (windowWidth <= 1024) {
+  labelPosition = "bottom";
+}
+
 new Chart(newOldContributors, {
   type: "pie",
   data: {
@@ -141,12 +150,12 @@ new Chart(newOldContributors, {
       {
         data: [5, 10, 15, 20, 25, 30],
         backgroundColor: [
-          "#FF8630",
-          "#2E9AFF",
-          "#FFD829",
-          "#10F3AF",
-          "#41E847",
-          "#C56FFF",
+          "#663613",
+          "#123E66",
+          "#665610",
+          "#024B35",
+          "#1A5D1C",
+          "#5F377D",
         ],
       },
     ],
@@ -159,7 +168,7 @@ new Chart(newOldContributors, {
     },
     plugins: {
       legend: {
-        position: "left",
+        position: labelPosition,
       },
     },
   },