From c37166f61e0defa42e1e313bbe6c719aa753e333 Mon Sep 17 00:00:00 2001 From: Alena Batitskaia Date: Tue, 14 Jan 2025 14:39:05 +0000 Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 35 +++-- scripts/charts.js | 43 +++--- scripts/script.js | 271 +++++++++++++++++++------------------ scripts/utils.js | 2 +- scripts/window-width.js | 24 ++++ styles/badges.css | 17 ++- styles/base.css | 26 ++++ styles/color-section.css | 17 +++ styles/footer.css | 8 ++ styles/info-section.css | 15 ++ styles/metrics-section.css | 43 +++++- styles/top-section.css | 118 +++++++++++++++- 12 files changed, 452 insertions(+), 167 deletions(-) create mode 100644 scripts/window-width.js diff --git a/index.html b/index.html index 6509962..59d2893 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ class="link-arrows">>>>
-

Цвет 2024 года

+

Цвет 2024 года

@@ -343,18 +343,27 @@

Спасибо!

- - - - - - - - - - - - + + + + + + + + + + + +
diff --git a/scripts/charts.js b/scripts/charts.js index 67c891d..32822e1 100644 --- 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, }, }, }, diff --git a/scripts/script.js b/scripts/script.js index c491cbe..7ef028a 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,158 +1,167 @@ +import { windowWidthDetection } from "./window-width.js"; + document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(ScrollTrigger, Draggable); - const scrollContainer = document.querySelector(".scroll-container"); - const scrollBlocks = scrollContainer.querySelectorAll(".scroll-block"); - - gsap.set(scrollContainer, { xPercent: 99, opacity: 1 }); - - let scrollTween = gsap.to(scrollContainer, { - xPercent: -20, - scrollTrigger: { - trigger: ".color", - start: "top top", - end: () => "+=" + scrollBlocks.length * 500, - scrub: 1, - pin: true, - }, - }); - - scrollBlocks.forEach((block, i) => { - const commonScrollTriggerConfig = { - trigger: block, - scrub: 1, - start: "left 90%", - containerAnimation: scrollTween, - }; - - const timeline = gsap.timeline({ - scrollTrigger: { - ...commonScrollTriggerConfig, - end: "left 30%", - }, - }); + let windowWidth = windowWidthDetection(); - timeline.to(block, { scale: 1.2 }); - - if (i === scrollBlocks.length - 1) { - gsap - .timeline({ - scrollTrigger: { - ...commonScrollTriggerConfig, - end: "left 60%", - }, - }) - .to(block.querySelector(".color-image"), { - scale: 1, - x: "-6rem", - y: "2.5rem", - }); - } else { - timeline.to(block, { scale: 1 }); - } - }); - - const infoContainer = document.querySelector(".info-container"); - const infoBlocks = infoContainer.querySelectorAll(".info-block"); - - gsap.to(infoBlocks, { - xPercent: -100 * (infoBlocks.length - 1), - ease: "none", - scrollTrigger: { - trigger: ".info", - pin: true, - scrub: 1, - snap: 1 / (infoBlocks.length - 1), - end: () => "+=5000", - }, - }); - - const panels = document.querySelectorAll(".panel"); - panels.forEach((panel, i) => { - ScrollTrigger.create({ - trigger: panel, - start: "top top", - end: "+=100%", - snap: { - snapTo: 1, - duration: 0.5, - ease: "power1.inOut", + if (windowWidth > 768) { + const scrollContainer = document.querySelector(".scroll-container"); + const scrollBlocks = scrollContainer.querySelectorAll(".scroll-block"); + + gsap.set(scrollContainer, { xPercent: 99, opacity: 1 }); + + let endPos = + -scrollBlocks[scrollBlocks.length - 1].clientWidth / (windowWidth / 100); + + let scrollTween = gsap.to(scrollContainer, { + xPercent: endPos, + scrollTrigger: { + trigger: ".color", + start: "top top", + end: () => "+=" + scrollBlocks.length * 500, + scrub: 1, + pin: true, }, }); - }); - const copyButtons = document.querySelectorAll(".copy-button"); - - copyButtons.forEach((copyButton) => { - copyButton.addEventListener("click", () => { - const copyIcon = copyButton.querySelector("svg"); - const copyText = copyButton.previousElementSibling; + scrollBlocks.forEach((block, i) => { + const commonScrollTriggerConfig = { + trigger: block, + scrub: 1, + start: "left 90%", + containerAnimation: scrollTween, + }; - if (copyText && copyText.classList.contains("copy-text")) { - navigator.clipboard.writeText(copyText.innerText); - copyButton.innerHTML = ``; - copyButton.style.pointerEvents = "none"; + const timeline = gsap.timeline({ + scrollTrigger: { + ...commonScrollTriggerConfig, + end: "left 30%", + }, + }); - setTimeout(() => { - copyButton.innerHTML = copyIcon.outerHTML; - copyButton.style.pointerEvents = "all"; - }, 3000); + timeline.to(block, { scale: 1.2 }); + + if (i === scrollBlocks.length - 1) { + gsap + .timeline({ + scrollTrigger: { + ...commonScrollTriggerConfig, + end: "left 60%", + }, + }) + .to(block.querySelector(".color-image"), { + scale: 1, + x: "-6rem", + y: "2.5rem", + }); + } else { + timeline.to(block, { scale: 1 }); } }); - }); - const prCubes = document.querySelectorAll(".pr-cube"); + const infoContainer = document.querySelector(".info-container"); + const infoBlocks = infoContainer.querySelectorAll(".info-block"); - prCubes.forEach((prCube, index) => { - prCube.addEventListener("mouseenter", () => { - gsap.to(prCube, { scale: 1.4 }); - if (index - 1 >= 0) { - gsap.to(prCubes[index - 1], { scale: 1.2 }); - } + gsap.to(infoBlocks, { + xPercent: -100 * (infoBlocks.length - 1), + ease: "none", + scrollTrigger: { + trigger: ".info", + pin: true, + scrub: 1, + snap: 1 / (infoBlocks.length - 1), + end: () => "+=5000", + }, + }); - if (index + 1 < prCubes.length) { - gsap.to(prCubes[index + 1], { scale: 1.2 }); - } + const panels = document.querySelectorAll(".panel"); + panels.forEach((panel, i) => { + ScrollTrigger.create({ + trigger: panel, + start: "top top", + end: "+=100%", + snap: { + snapTo: 1, + duration: 0.5, + ease: "power1.inOut", + }, + }); }); - prCube.addEventListener("mouseleave", () => { - prCubes.forEach((cube) => { - gsap.to(cube, { scale: 1 }); + const copyButtons = document.querySelectorAll(".copy-button"); + + copyButtons.forEach((copyButton) => { + copyButton.addEventListener("click", () => { + const copyIcon = copyButton.querySelector("svg"); + const copyText = copyButton.previousElementSibling; + + if (copyText && copyText.classList.contains("copy-text")) { + navigator.clipboard.writeText(copyText.innerText); + copyButton.innerHTML = ``; + copyButton.style.pointerEvents = "none"; + + setTimeout(() => { + copyButton.innerHTML = copyIcon.outerHTML; + copyButton.style.pointerEvents = "all"; + }, 3000); + } }); }); - }); - const draggableBadges = gsap.utils.toArray(".badge"); + const prCubes = document.querySelectorAll(".pr-cube"); - draggableBadges.forEach((badge) => { - badge.addEventListener("mouseenter", () => { - const mainProps = { - duration: 1, - ease: "sine.inOut", - repeat: -1, - yoyo: true, - }; - gsap.to(badge, { - rotation: 10, - ...mainProps, + prCubes.forEach((prCube, index) => { + prCube.addEventListener("mouseenter", () => { + gsap.to(prCube, { scale: 1.4 }); + if (index - 1 >= 0) { + gsap.to(prCubes[index - 1], { scale: 1.2 }); + } + + if (index + 1 < prCubes.length) { + gsap.to(prCubes[index + 1], { scale: 1.2 }); + } + }); + + prCube.addEventListener("mouseleave", () => { + prCubes.forEach((cube) => { + gsap.to(cube, { scale: 1 }); + }); }); }); - badge.addEventListener("mouseleave", () => { - gsap.killTweensOf(badge); - gsap.to(badge, { rotation: 0, duration: 0.5 }); + const draggableBadges = gsap.utils.toArray(".badge"); + + draggableBadges.forEach((badge) => { + badge.addEventListener("mouseenter", () => { + const mainProps = { + duration: 1, + ease: "sine.inOut", + repeat: -1, + yoyo: true, + }; + gsap.to(badge, { + rotation: 10, + ...mainProps, + }); + }); + + badge.addEventListener("mouseleave", () => { + gsap.killTweensOf(badge); + gsap.to(badge, { rotation: 0, duration: 0.5 }); + }); }); - }); - draggableBadges.forEach((badge) => { - Draggable.create(badge, { - bounds: badge.closest("dragg-zone"), - onDrag: function () { - badge.classList.add("dragging"); - }, - onDragEnd: function () { - badge.classList.remove("dragging"); - }, + draggableBadges.forEach((badge) => { + Draggable.create(badge, { + bounds: badge.closest("dragg-zone"), + onDrag: function () { + badge.classList.add("dragging"); + }, + onDragEnd: function () { + badge.classList.remove("dragging"); + }, + }); }); - }); + } }); diff --git a/scripts/utils.js b/scripts/utils.js index c1f092f..4268c9b 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -26,4 +26,4 @@ export function months(config) { } return values; -} +} \ No newline at end of file diff --git a/scripts/window-width.js b/scripts/window-width.js new file mode 100644 index 0000000..5cc8d3a --- /dev/null +++ b/scripts/window-width.js @@ -0,0 +1,24 @@ +export function debounce(func, wait) { + let timeout; + return function (...args) { + const later = () => { + clearTimeout(timeout); + func.apply(this, args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +export function windowWidthDetection() { + let windowWidth = window.innerWidth; + + const handleResize = debounce(() => { + windowWidth = window.innerWidth; + console.log(windowWidth); + }, 200); + + window.addEventListener("resize", handleResize); + + return windowWidth; +} diff --git a/styles/badges.css b/styles/badges.css index ea09f1a..e9d9057 100644 --- a/styles/badges.css +++ b/styles/badges.css @@ -66,9 +66,24 @@ } &.css-badge { - inset-block-start: 40%; inset-inline-start: 70%; width: clamp(6rem, 5.1637rem + 3.5681vw, 8.375rem); } +} + +@media (width < 767px) { + .badge { + &.avatar { + inset-block-start: auto; + inset-block-end: -10px; + inset-inline-start: 0; + padding: 0; + } + + &.last-bun, + &.css-badge { + display: none; + } + } } \ No newline at end of file diff --git a/styles/base.css b/styles/base.css index ac8ff3a..8d5efe4 100644 --- a/styles/base.css +++ b/styles/base.css @@ -47,6 +47,7 @@ section, footer { .wrapper { display: flex; + flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; @@ -55,6 +56,15 @@ section, footer { padding-inline: 4.375rem; } +@media (width < 767px) { + .wrapper { + flex-direction: column; + align-items: baseline; + margin-block-end: 2rem; + padding-inline: 1rem; + } +} + .top, .info { background-color: var(--dark-color); @@ -65,6 +75,13 @@ section, footer { font-size: clamp(4rem, 2.583rem + 6.296vw, 8.25rem); } +@media (width < 767px) { + .title { + font-size: 2rem; + } + +} + .header { display: flex; justify-content: space-between; @@ -74,6 +91,15 @@ section, footer { padding-inline: 4.375rem; } +@media (width < 767px) { + .header { + flex-direction: column; + gap: 2rem; + margin-block-end: 3rem; + padding-inline: 1rem; + } +} + .link-container { position: relative; z-index: 1; diff --git a/styles/color-section.css b/styles/color-section.css index 54dac35..85b1ade 100644 --- a/styles/color-section.css +++ b/styles/color-section.css @@ -9,6 +9,14 @@ inset-inline-start: clamp(2.3rem, 1.608rem + 3.074vw, 4.375rem); } +@media (width < 767px) { + .color-title.title { + position: static; + margin-inline: auto; + text-align: center; + } +} + .color-container { display: flex; align-items: start; @@ -22,6 +30,15 @@ } } +@media (width < 767px) { + .color-container { + flex-direction: column; + align-items: center; + padding-block: 5dvh; + opacity: 1; + } +} + .color-card { display: flex; flex-direction: column; diff --git a/styles/footer.css b/styles/footer.css index a49e937..381ee0a 100644 --- a/styles/footer.css +++ b/styles/footer.css @@ -22,4 +22,12 @@ position: relative; grid-area: 1/1; } +} + +@media (width < 767px) { + .footer { + & .link-container { + position: static; + } + } } \ No newline at end of file diff --git a/styles/info-section.css b/styles/info-section.css index 3590def..ffb13ed 100644 --- a/styles/info-section.css +++ b/styles/info-section.css @@ -10,6 +10,13 @@ overflow: hidden; } +@media (width < 767px) { + .info-container { + flex-direction: column; + gap: 1rem; + } +} + .info-block { display: grid; flex: 0 0 33%; @@ -17,10 +24,18 @@ align-items: center; gap: 1rem; width: 33%; + min-width: 350px; padding: 2.5rem 1.5rem; background-color: var(--bkg-color); } +@media (width < 767px) { + .info-block { + flex: 1; + width: 100%; + } +} + .info-title { font-size: clamp(1rem, 0.875rem + 0.556vw, 1.375rem); } diff --git a/styles/metrics-section.css b/styles/metrics-section.css index 01ccf9f..8ee4965 100644 --- a/styles/metrics-section.css +++ b/styles/metrics-section.css @@ -12,13 +12,44 @@ & .wrapper { position: relative; justify-content: center; - grid-area: 1/1; height: 100%; } & .metrics-content { position: relative; - grid-area: 1/1; + align-content: center; + } +} + +@media (width >= 768px) { + .metrics { + & .wrapper { + grid-area: 1/1; + } + + & .metrics-content { + grid-area: 1/1; + } + } +} + +@media (width < 767px) { + .metrics { + display: grid; + grid-template-rows: auto 1fr; + padding-block: 2rem; + + & .link-container { + position: static; + } + + & .wrapper { + height: auto; + } + + & .badge { + display: none; + } } } @@ -54,3 +85,11 @@ inset-inline-start: 20%; } } + +@media (width < 767px) { + .metrics-text { + position: static; + text-align: center; + transform: none; + } +} \ No newline at end of file diff --git a/styles/top-section.css b/styles/top-section.css index 2476cf1..d1f1472 100644 --- a/styles/top-section.css +++ b/styles/top-section.css @@ -8,12 +8,19 @@ gap: 2px; } +@media (width < 1024px) { + .top-container { + flex-direction: column; + } +} + .top-radio { display: none; } .top-radio:checked + .top-item { flex-grow: 1; + height: 100%; background-color: var(--bkg-color); } @@ -23,6 +30,13 @@ transition: width 0.3s, opacity 0.2s; } +@media (width < 1024px) { + .top-radio:checked + .top-item .top-content { + height: 100%; + transition: height 0.3s; + } +} + .top-radio:checked + .top-item .top-item-subtitle { opacity: 1; transition: opacity 0.2s 0.1s, transform 0.2s; @@ -36,12 +50,26 @@ background-color: color(from var(--bkg-color) srgb r g b / 70%); transition: flex-grow 0.3s, width 0.3s, background-color 0.3s; cursor: pointer; +} - :not(:checked) ~ &:hover { +@media (width >= 1024px) { + .top-item:not(:checked) ~ &:hover { width: 22%; } } +@media (width < 1024px) { + .top-item { + display: grid; + grid-template-rows: auto auto 1fr; + gap: 1rem; + width: 100%; + height: 20dvh; + padding: 1.5rem; + transition: height 0.2s; + } +} + .top-item-title { font-size: clamp(1rem, 0.875rem + 0.556vw, 1.375rem); text-transform: uppercase; @@ -63,6 +91,13 @@ transition: none; } +@media (width < 1024px) { + :not(:checked).top-content { + width: 100%; + height: 0; + } +} + .authors-container { position: relative; display: flex; @@ -81,6 +116,14 @@ list-style: none; } +@media (width < 1024px) { + .authors { + flex-direction: column; + align-items: center; + gap: 2rem; + } +} + .author { flex-grow: 1; flex-shrink: 1; @@ -109,9 +152,16 @@ } } +@media (width < 1024px) { + .author-image, + .first .author-image, + .second .author-image { + width: 20dvh; + } +} + .float { transition: ease 0.5s; - transform: translateY(-5%); animation: float 3s ease-in-out alternate-reverse infinite; &:hover { @@ -127,6 +177,19 @@ } } +@media (width >= 1024px) { + .float { + transform: translateY(-5%); + } +} + +@media (width < 1024px) { + .float { + transform: none; + animation: none; + } +} + .pr-item { display: flex; flex-direction: column; @@ -140,6 +203,12 @@ margin: auto; } +@media (width < 1024px) { + .pr-content { + max-width: 100%; + } +} + .pull-requests { margin-block: auto; list-style: none; @@ -155,6 +224,12 @@ text-align: center; } +@media (width < 1024px) { + .pull-request-name { + font-size: 1.5rem; + } +} + .pull-request-line { display: flex; justify-content: center; @@ -164,6 +239,18 @@ font-size: clamp(1rem, 0.875rem + 0.556vw, 1.375rem); } +@media (width < 1024px) { + .pull-request-line { + flex-direction: column; + } +} + +@media (width < 767px) { + .pull-request-line { + font-size: 2rem; + } +} + .pull-request-plus { color: var(--main-color); } @@ -173,6 +260,18 @@ gap: 0.5rem; } +@media (width < 1024px) { + .pull-request-cubes { + gap: 0; + } +} + +@media (width < 767px) { + .pull-request-cubes { + display: none; + } +} + .pr-cube { width: clamp(1rem, 0.875rem + 0.556vw, 1.375rem); aspect-ratio: 1; @@ -217,6 +316,21 @@ } } +@media (width < 767px) { + .top-content:has(.comments) { + align-content: center; + } + + .comments { + position: static; + margin: auto; + } + + .comments:not(:last-child) { + margin-block-end: 1rem; + } +} + @keyframes float { 50% {