guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: add marquee

main
guofei 2024-11-05 21:36:01 +08:00
parent 832e286aee
commit cb2bed34d2
5 changed files with 133 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -19,7 +19,8 @@
"next-intl": "^3.21.1", "next-intl": "^3.21.1",
"postcss-pxtorem": "^6.1.0", "postcss-pxtorem": "^6.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18",
"react-fast-marquee": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",

55
pnpm-lock.yaml
View File

@ -41,12 +41,9 @@ importers:
react-dom: react-dom:
specifier: ^18 specifier: ^18
version: 18.3.1(react@18.3.1) version: 18.3.1(react@18.3.1)
react-seamless-scroll: react-fast-marquee:
specifier: ^1.0.3 specifier: ^1.6.5
version: 1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
swiper:
specifier: ^11.1.14
version: 11.1.14
devDependencies: devDependencies:
'@types/node': '@types/node':
specifier: ^20 specifier: ^20
@ -1564,18 +1561,18 @@ packages:
peerDependencies: peerDependencies:
react: ^18.3.1 react: ^18.3.1
react-fast-marquee@1.6.5:
resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==}
peerDependencies:
react: '>= 16.8.0 || ^18.0.0'
react-dom: '>= 16.8.0 || ^18.0.0'
react-is@16.13.1: react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-is@18.3.1: react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
react-seamless-scroll@1.0.3:
resolution: {integrity: sha512-QSKrkhwZOphunAQd+5CZZ4StecsDILllVEOwR352TBVmzmhe03qxljMyOHXbNCNTujAJ/oDJytxE43jpxcqieQ==}
peerDependencies:
react: ^16.8.6
react-dom: ^16.8.6
react-transition-group@4.4.5: react-transition-group@4.4.5:
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
peerDependencies: peerDependencies:
@ -1769,10 +1766,6 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
swiper@11.1.14:
resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==}
engines: {node: '>= 4.7.0'}
tailwindcss@3.4.13: tailwindcss@3.4.13:
resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==} resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
@ -2822,8 +2815,8 @@ snapshots:
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
eslint: 8.57.1 eslint: 8.57.1
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
eslint-plugin-react: 7.37.1(eslint@8.57.1) eslint-plugin-react: 7.37.1(eslint@8.57.1)
eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1) eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@ -2842,37 +2835,37 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1): eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
dependencies: dependencies:
'@nolyfill/is-core-module': 1.0.39 '@nolyfill/is-core-module': 1.0.39
debug: 4.3.7 debug: 4.3.7
enhanced-resolve: 5.17.1 enhanced-resolve: 5.17.1
eslint: 8.57.1 eslint: 8.57.1
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
fast-glob: 3.3.2 fast-glob: 3.3.2
get-tsconfig: 4.8.1 get-tsconfig: 4.8.1
is-bun-module: 1.2.1 is-bun-module: 1.2.1
is-glob: 4.0.3 is-glob: 4.0.3
optionalDependencies: optionalDependencies:
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
transitivePeerDependencies: transitivePeerDependencies:
- '@typescript-eslint/parser' - '@typescript-eslint/parser'
- eslint-import-resolver-node - eslint-import-resolver-node
- eslint-import-resolver-webpack - eslint-import-resolver-webpack
- supports-color - supports-color
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
dependencies: dependencies:
debug: 3.2.7 debug: 3.2.7
optionalDependencies: optionalDependencies:
'@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3) '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
eslint: 8.57.1 eslint: 8.57.1
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1) eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
dependencies: dependencies:
'@rtsao/scc': 1.1.0 '@rtsao/scc': 1.1.0
array-includes: 3.1.8 array-includes: 3.1.8
@ -2883,7 +2876,7 @@ snapshots:
doctrine: 2.1.0 doctrine: 2.1.0
eslint: 8.57.1 eslint: 8.57.1
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
hasown: 2.0.2 hasown: 2.0.2
is-core-module: 2.15.1 is-core-module: 2.15.1
is-glob: 4.0.3 is-glob: 4.0.3
@ -3641,15 +3634,15 @@ snapshots:
react: 18.3.1 react: 18.3.1
scheduler: 0.23.2 scheduler: 0.23.2
react-is@16.13.1: {} react-fast-marquee@1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
react-is@18.3.1: {}
react-seamless-scroll@1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies: dependencies:
react: 18.3.1 react: 18.3.1
react-dom: 18.3.1(react@18.3.1) react-dom: 18.3.1(react@18.3.1)
react-is@16.13.1: {}
react-is@18.3.1: {}
react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1): react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies: dependencies:
'@babel/runtime': 7.25.7 '@babel/runtime': 7.25.7
@ -3873,8 +3866,6 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {} supports-preserve-symlinks-flag@1.0.0: {}
swiper@11.1.14: {}
tailwindcss@3.4.13: tailwindcss@3.4.13:
dependencies: dependencies:
'@alloc/quick-lru': 5.2.0 '@alloc/quick-lru': 5.2.0

83
src/app/components/AutoplayCarousel.tsx
View File

@ -1,83 +0,0 @@
import { ReactElement, useEffect, useLayoutEffect } from "react";
import * as React from "react";
interface Props<T> {
Item: (item: T) => ReactElement;
showNum: number;
speed: number;
containerWidth: number;
data: T[];
hoverStop?: boolean;
direction?: "left" | "right";
}
const fillArray = (arr: any, length: number) => {
const result: any = [];
while (result.length < length) {
result.push(...arr);
}
return result.concat(result);
};
function AutoplayCarousel<T>({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props<T>) {
const showData = fillArray(data, showNum);
const length = showData.length;
const itemWidth = containerWidth / showNum;
useLayoutEffect(() => {
const style = document.createElement("style");
let start = "0";
let end = `-${(itemWidth * length) / 2}`;
if (direction === "right") {
start = end;
end = "0";
}
const keyframes = `
@keyframes templates-partner-moving {
0% {
transform: translateX(${start}px);
}
100% {
transform: translateX(${end}px);
}
}
`;
const hoverStyles = hoverStop
? `
.list:hover {
animation-play-state: paused !important;
}
`
: ``;
style.innerText = keyframes + hoverStyles;
document.head.appendChild(style);
return () => {
document.head.removeChild(style);
};
}, []);
return (
<div style={{ width: `${containerWidth}px` }} className="wrap">
<div
className="list"
style={{
width: `${itemWidth * length}px`,
animation: `templates-partner-moving ${(length / showNum / 2) * speed}s infinite linear`,
}}
>
{showData.map((item, index) => (
<div key={index} style={{ width: `${(itemWidth * 100) / containerWidth}%` }}>
<Item {...item} />
</div>
))}
</div>
</div>
);
}
export default AutoplayCarousel;

25
src/app/components/ChannelSwiper.tsx
View File

@ -1,10 +1,8 @@
"use client"; "use client";
import AutoplayCarousel from "./AutoplayCarousel"; import Marquee from "react-fast-marquee";
interface ItemProps {
url: string; const data = [
}
const data: ItemProps[] = [
{ url: "logo-yandex.png" }, { url: "logo-yandex.png" },
{ url: "logo-vungle.png" }, { url: "logo-vungle.png" },
{ url: "logo-unity.png" }, { url: "logo-unity.png" },
@ -23,18 +21,19 @@ const data: ItemProps[] = [
]; ];
export default function ChannelSwiper() { export default function ChannelSwiper() {
const Item = (item: ItemProps) => {
return (
<div className=" mx-1 lg:mx-8 w-[100px] h-[50px] lg:w-auto lg:h-[70px] flex items-center">
<img src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`} className="" alt="" />
</div>
);
};
return ( return (
<> <>
<div className="overflow-hidden flex items-center"> <div className="overflow-hidden flex items-center">
<AutoplayCarousel Item={Item} containerWidth={1400} showNum={8} speed={20} data={data} /> <Marquee speed={20}>
{
data.map((item, index) => {
return <div key={index} className="mx-8 max-w-[100px] w-auto h-[80px] flex items-center">
<img src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`} className="" alt="" />
</div>
})
}
</Marquee>
</div> </div>
</> </>
); );

188
src/app/globals.css
View File

@ -3,165 +3,169 @@
@tailwind utilities; @tailwind utilities;
html::-webkit-scrollbar { html::-webkit-scrollbar {
width: 8px; width: 8px;
} }
html::-webkit-scrollbar-thumb { html::-webkit-scrollbar-thumb {
background-color: rgba(169, 169, 169, 0.729); background-color: rgba(169, 169, 169, 0.729);
border-radius: 10px; border-radius: 10px;
} }
html::-webkit-scrollbar-track { html::-webkit-scrollbar-track {
background: #fff; background: #fff;
} }
html { html {
font-size: 14.4px; font-size: 14.4px;
} }
.menu-item { .menu-item {
display: block; display: block;
} }
@media (min-width: 300px) and (max-width: 350px) { @media (min-width: 300px) and (max-width: 350px) {
html { html {
font-size: 3px; font-size: 3px;
} }
} }
@media (min-width: 350px) and (max-width: 400px) { @media (min-width: 350px) and (max-width: 400px) {
html { html {
font-size: 3.5px; font-size: 3.5px;
} }
} }
@media (min-width: 400px) and (max-width: 450px) { @media (min-width: 400px) and (max-width: 450px) {
html { html {
font-size: 4px; font-size: 4px;
} }
} }
@media (min-width: 450px) and (max-width: 500px) { @media (min-width: 450px) and (max-width: 500px) {
html { html {
font-size: 4.5px; font-size: 4.5px;
} }
} }
@media (min-width: 500px) and (max-width: 550px) { @media (min-width: 500px) and (max-width: 550px) {
html { html {
font-size: 5px; font-size: 5px;
} }
} }
@media (min-width: 550px) and (max-width: 600px) { @media (min-width: 550px) and (max-width: 600px) {
html { html {
font-size: 5.5px; font-size: 5.5px;
} }
} }
@media (min-width: 600px) and (max-width: 650px) { @media (min-width: 600px) and (max-width: 650px) {
html { html {
font-size: 6px; font-size: 6px;
} }
} }
@media (min-width: 650px) and (max-width: 700px) { @media (min-width: 650px) and (max-width: 700px) {
html { html {
font-size: 6.5px; font-size: 6.5px;
} }
} }
@media (min-width: 700px) and (max-width: 750px) { @media (min-width: 700px) and (max-width: 750px) {
html { html {
font-size: 7px; font-size: 7px;
} }
} }
@media (min-width: 750px) and (max-width: 800px) { @media (min-width: 750px) and (max-width: 800px) {
html { html {
font-size: 7.6px; font-size: 7.6px;
} }
} }
@media (min-width: 800px) and (max-width: 850px) { @media (min-width: 800px) and (max-width: 850px) {
html { html {
font-size: 8px; font-size: 8px;
} }
} }
@media (min-width: 850px) and (max-width: 900px) { @media (min-width: 850px) and (max-width: 900px) {
html { html {
font-size: 8.5px; font-size: 8.5px;
} }
} }
@media (min-width: 900px) and (max-width: 950px) { @media (min-width: 900px) and (max-width: 950px) {
html { html {
font-size: 9px; font-size: 9px;
} }
} }
@media (min-width: 1000px) and (max-width: 1050px) { @media (min-width: 1000px) and (max-width: 1050px) {
html { html {
font-size: 10px; font-size: 10px;
} }
} }
@media (min-width: 1050px) and (max-width: 1100px) { @media (min-width: 1050px) and (max-width: 1100px) {
html { html {
font-size: 10.5px; font-size: 10.5px;
} }
} }
@media (min-width: 1100px) and (max-width: 1150px) { @media (min-width: 1100px) and (max-width: 1150px) {
html { html {
font-size: 11px; font-size: 11px;
} }
} }
@media (min-width: 1150px) and (max-width: 1200px) { @media (min-width: 1150px) and (max-width: 1200px) {
html { html {
font-size: 11.5px; font-size: 11.5px;
} }
} }
@media (min-width: 1200px) and (max-width: 1250px) { @media (min-width: 1200px) and (max-width: 1250px) {
html { html {
font-size: 12px; font-size: 12px;
} }
} }
@media (min-width: 1250px) and (max-width: 1300px) { @media (min-width: 1250px) and (max-width: 1300px) {
html { html {
font-size: 12.5px; font-size: 12.5px;
} }
} }
@media (min-width: 1300px) and (max-width: 1350px) { @media (min-width: 1300px) and (max-width: 1350px) {
html { html {
font-size: 13px; font-size: 13px;
} }
} }
@media (min-width: 1350px) and (max-width: 1400px) { @media (min-width: 1350px) and (max-width: 1400px) {
html { html {
font-size: 13.5px; font-size: 13.5px;
} }
} }
@media (min-width: 1400px) and (max-width: 1450px) { @media (min-width: 1400px) and (max-width: 1450px) {
html { html {
font-size: 14px; font-size: 14px;
} }
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
html { html {
font-size: 14.4px; font-size: 14.4px;
} }
} }
@media (max-width: 1440px) { @media (max-width: 1440px) {
.menu-item { .menu-item {
display: none; display: none;
} }
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
.menu-item { .menu-item {
display: block; display: block;
} }
} }
.wrap { .wrap {
overflow: hidden; overflow: hidden;
} }
.wrap .list { .wrap .list {
position: relative; position: relative;
top: 0px; top: 0px;
left: 0px; left: 0px;
height: 100%; height: 100%;
display: flex; display: flex;
}
.wrap .list:hover {
animation-play-state: paused !important;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.wrap .list > div { .wrap .list > div {
width: 150px !important; width: 150px !important;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
} }