Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-11-05 12:03:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: change ordering config

Browse Source
This commit is contained in:
MAZE 2023-12-10 15:37:37 +03:30
parent df1a21f109
commit a43c679e21
23 changed files with 174 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintrc.json
View File

@ -1,7 +1,7 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-idiomatic-order",
"stylelint-config-recess-order",
"stylelint-config-html",
"stylelint-prettier/recommended"
],

4
.vscode/settings.json vendored
View File

@ -11,8 +11,8 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
},
"[javascript][javascriptreact][typescript][typescriptreact][astro]": {
"editor.formatOnSave": false

61
package-lock.json generated
View File

@ -54,7 +54,7 @@
"standard-version": "9.5.0",
"stylelint": "15.10.3",
"stylelint-config-html": "1.1.0",
"stylelint-config-idiomatic-order": "9.0.0",
"stylelint-config-recess-order": "4.4.0",
"stylelint-config-standard": "34.0.0",
"stylelint-prettier": "4.0.2"
}
@ -12590,15 +12590,6 @@
"node": ">=4"
}
},
"node_modules/postcss-sorting": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
"integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
"dev": true,
"peerDependencies": {
"postcss": "^8.3.9"
}
},
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@ -14922,32 +14913,16 @@
"stylelint": ">=14.0.0"
}
},
"node_modules/stylelint-config-idiomatic-order": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-idiomatic-order/-/stylelint-config-idiomatic-order-9.0.0.tgz",
"integrity": "sha512-+LtfPycY1Paayf1MaERyh6BzVPnZxemX5NtzdUPqi4u8hyAR7859f/4EL02+Kr9va76iX7mbYC4HendocXKJZQ==",
"node_modules/stylelint-config-recess-order": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz",
"integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==",
"dev": true,
"dependencies": {
"stylelint-order": "^5.0.0"
},
"engines": {
"node": ">=12"
"stylelint-order": "6.x"
},
"peerDependencies": {
"stylelint": ">=11"
}
},
"node_modules/stylelint-config-idiomatic-order/node_modules/stylelint-order": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
"integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
"dev": true,
"dependencies": {
"postcss": "^8.3.11",
"postcss-sorting": "^7.0.1"
},
"peerDependencies": {
"stylelint": "^14.0.0"
"stylelint": ">=15"
}
},
"node_modules/stylelint-config-recommended": {
@ -14977,6 +14952,28 @@
"stylelint": "^15.10.0"
}
},
"node_modules/stylelint-order": {
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz",
"integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==",
"dev": true,
"dependencies": {
"postcss": "^8.4.32",
"postcss-sorting": "^8.0.2"
},
"peerDependencies": {
"stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
}
},
"node_modules/stylelint-order/node_modules/postcss-sorting": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
"integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
"dev": true,
"peerDependencies": {
"postcss": "^8.4.20"
}
},
"node_modules/stylelint-prettier": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-4.0.2.tgz",

2
package.json
View File

@ -67,7 +67,7 @@
"standard-version": "9.5.0",
"stylelint": "15.10.3",
"stylelint-config-html": "1.1.0",
"stylelint-config-idiomatic-order": "9.0.0",
"stylelint-config-recess-order": "4.4.0",
"stylelint-config-standard": "34.0.0",
"stylelint-prettier": "4.0.2"
}

6
src/components/buttons/buttons.module.css
View File

@ -1,11 +1,11 @@
.buttons {
position: sticky;
z-index: 10;
top: 30px;
z-index: 10;
display: flex;
width: max-content;
column-gap: 10px;
align-items: center;
justify-content: center;
width: max-content;
margin: 0 auto;
column-gap: 10px;
}

18
src/components/buttons/play/play.module.css
View File

@ -1,19 +1,19 @@
.playButton {
display: flex;
width: 150px;
height: 45px;
align-items: center;
justify-content: center;
border: none;
border-radius: 100px;
border-top: 2px solid #34d399;
border-bottom: 3px solid #059669;
background-color: #10b981;
color: #022c22;
cursor: pointer;
width: 150px;
height: 45px;
font-family: var(--font-heading);
font-size: var(--font-base);
line-height: 0;
color: #022c22;
cursor: pointer;
background-color: #10b981;
border: none;
border-top: 2px solid #34d399;
border-bottom: 3px solid #059669;
border-radius: 100px;
outline: none;
&:disabled,

26
src/components/buttons/unselect/unselect.module.css
View File

@ -1,19 +1,19 @@
.unselectButton {
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
border: none;
border-radius: 100px;
border-top: 2px solid #fb7185;
border-bottom: 3px solid #be123c;
background-color: #f43f5e;
color: var(--color-foreground);
cursor: pointer;
width: 45px;
height: 45px;
font-family: var(--font-heading);
font-size: var(--font-md);
line-height: 0;
color: var(--color-foreground);
cursor: pointer;
background-color: #f43f5e;
border: none;
border-top: 2px solid #fb7185;
border-bottom: 3px solid #be123c;
border-radius: 100px;
outline: none;
transition: 0.2s;
@ -23,17 +23,17 @@
}
&.restore {
color: var(--color-neutral-200);
background-color: var(--color-neutral-700);
border-top-color: var(--color-neutral-950);
border-bottom-color: var(--color-neutral-600);
background-color: var(--color-neutral-700);
color: var(--color-neutral-200);
}
}
.tooltip {
padding: 6px 12px;
font-size: var(--font-xsm);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
border-radius: 100px;
background-color: var(--color-neutral-100);
font-size: var(--font-xsm);
}

8
src/components/category/category.module.css
View File

@ -17,14 +17,14 @@
& .icon {
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
font-size: var(--font-md);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
background-color: var(--color-neutral-100);
font-size: var(--font-md);
}
}

6
src/components/footer.astro
View File

@ -16,17 +16,17 @@ import { Container } from '@/components/container';
<style>
.footer {
display: flex;
height: 100px;
align-items: center;
height: 100px;
& p {
color: var(--color-foreground-subtle);
font-size: var(--font-sm);
color: var(--color-foreground-subtle);
text-align: center;
& a {
color: var(--color-foreground);
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
& span {

16
src/components/hero.astro
View File

@ -44,12 +44,12 @@ const count = soundCount();
& .title {
display: flex;
align-items: center;
column-gap: 15px;
align-items: center;
& div {
height: 1px;
flex-grow: 1;
height: 1px;
&.left {
background: linear-gradient(
@ -77,22 +77,22 @@ const count = soundCount();
& .desc {
margin-top: 5px;
color: var(--color-foreground-subtle);
line-height: 1.6;
color: var(--color-foreground-subtle);
}
& .sounds {
position: relative;
display: flex;
width: max-content;
align-items: center;
justify-content: center;
width: max-content;
padding: 6px 16px;
margin: 20px auto 0;
font-size: var(--font-xsm);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
border-radius: 100px;
margin: 20px auto 0;
background-color: var(--color-neutral-100);
font-size: var(--font-xsm);
&::before {
position: absolute;
@ -100,13 +100,13 @@ const count = soundCount();
left: 50%;
width: 70%;
height: 1px;
content: '';
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-400),
transparent
);
content: '';
transform: translateX(-50%);
}
}

14
src/components/scroll-to-top/scroll-to-top.module.css
View File

@ -1,17 +1,17 @@
.button {
position: fixed;
z-index: 99;
bottom: 20px;
left: 20px;
z-index: 99;
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
background-color: var(--color-neutral-100);
width: 45px;
height: 45px;
font-size: var(--font-md);
color: var(--color-foreground);
cursor: pointer;
font-size: var(--font-md);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
}

6
src/components/sections/about.astro
View File

@ -28,8 +28,8 @@ const count = soundCount();
& .titleWrapper {
display: flex;
align-items: center;
column-gap: 12px;
align-items: center;
& .title {
margin-bottom: 12px;
@ -39,8 +39,8 @@ const count = soundCount();
}
& .line {
height: 1px;
flex-grow: 1;
height: 1px;
background: linear-gradient(
90deg,
var(--color-neutral-300),
@ -51,8 +51,8 @@ const count = soundCount();
}
& .desc {
color: var(--color-foreground-subtle);
line-height: 1.7;
color: var(--color-foreground-subtle);
& span {
color: var(--color-foreground);

34
src/components/sections/ready.astro
View File

@ -36,8 +36,8 @@ import { Container } from '@/components/container';
& .wrapper {
position: relative;
padding: 0 20px 40px;
border-radius: 0 0 20px 20px;
background: linear-gradient(transparent, var(--color-neutral-100));
border-radius: 0 0 20px 20px;
&::after {
position: absolute;
@ -45,13 +45,13 @@ import { Container } from '@/components/container';
left: 50%;
width: 70%;
height: 1px;
content: '';
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-300),
transparent
);
content: '';
transform: translateX(-50%);
}
}
@ -70,15 +70,15 @@ import { Container } from '@/components/container';
& .icon {
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
font-size: var(--font-md);
color: #fbbf24;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
background-color: var(--color-neutral-100);
color: #fbbf24;
font-size: var(--font-md);
}
}
@ -97,23 +97,23 @@ import { Container } from '@/components/container';
& .button {
display: flex;
width: 120px;
height: 40px;
align-items: center;
justify-content: center;
border: none;
border-radius: 100px;
border-top: 2px solid var(--color-neutral-950);
border-bottom: 3px solid var(--color-neutral-600);
width: 120px;
height: 40px;
margin: 24px auto 0;
background-color: var(--color-neutral-700);
color: var(--color-neutral-200);
cursor: pointer;
font-family: var(--font-heading);
font-size: var(--font-sm);
line-height: 0;
outline: none;
color: var(--color-neutral-200);
text-decoration: none;
cursor: pointer;
background-color: var(--color-neutral-700);
border: none;
border-top: 2px solid var(--color-neutral-950);
border-bottom: 3px solid var(--color-neutral-600);
border-radius: 100px;
outline: none;
}
}
</style>

24
src/components/sections/why.astro
View File

@ -90,8 +90,8 @@ const reasons = [
& .titleWrapper {
display: flex;
align-items: center;
column-gap: 12px;
align-items: center;
& .title {
margin-bottom: 12px;
@ -101,8 +101,8 @@ const reasons = [
}
& .line {
height: 1px;
flex-grow: 1;
height: 1px;
background: linear-gradient(
90deg,
var(--color-neutral-300),
@ -114,23 +114,23 @@ const reasons = [
& .reasons {
display: grid;
margin-top: 24px;
column-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
row-gap: 28px;
column-gap: 20px;
margin-top: 24px;
& .icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 12px;
font-size: var(--font-md);
color: #34d399;
background: linear-gradient(var(--color-neutral-100), transparent);
border: 1px solid var(--color-neutral-200);
border-radius: 12px;
margin-bottom: 12px;
background: linear-gradient(var(--color-neutral-100), transparent);
color: #34d399;
font-size: var(--font-md);
}
& .label {
@ -140,16 +140,16 @@ const reasons = [
}
& .body {
color: var(--color-foreground-subtle);
line-height: 1.6;
color: var(--color-foreground-subtle);
}
& .link {
display: block;
margin-top: 8px;
color: var(--color-foreground);
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-foreground);
text-decoration: none;
}
}

14
src/components/shuffle/shuffle.module.css
View File

@ -1,17 +1,17 @@
.button {
position: fixed;
z-index: 99;
right: 20px;
bottom: 20px;
z-index: 99;
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
background-color: var(--color-neutral-100);
width: 45px;
height: 45px;
font-size: var(--font-md);
color: var(--color-foreground);
cursor: pointer;
font-size: var(--font-md);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
}

8
src/components/snackbar/snackbar.module.css
View File

@ -1,8 +1,8 @@
.wrapper {
position: fixed;
z-index: 100;
bottom: 20px;
left: 0;
z-index: 100;
width: 100%;
pointer-events: none;
@ -10,11 +10,11 @@
width: max-content;
max-width: 90%;
padding: 12px 16px;
border: 1px solid var(--color-neutral-300);
border-radius: 4px;
margin: 0 auto;
background-color: var(--color-neutral-200);
font-size: var(--font-sm);
pointer-events: fill;
background-color: var(--color-neutral-200);
border: 1px solid var(--color-neutral-300);
border-radius: 4px;
}
}

14
src/components/sound/favorite/favorite.module.css
View File

@ -3,17 +3,17 @@
top: 10px;
right: 10px;
display: flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-neutral-200);
border-radius: 50%;
background-color: black;
background-color: var(--color-neutral-100);
width: 30px;
height: 30px;
line-height: 0;
color: var(--color-foreground-subtle);
cursor: pointer;
line-height: 0;
background-color: black;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
border-radius: 50%;
outline: none;
&.isFavorite {

16
src/components/sound/range/range.module.css
View File

@ -7,8 +7,8 @@
/* Range Reset */
appearance: none;
background: transparent;
cursor: pointer;
background: transparent;
/* Removes default focus */
&:focus {
@ -16,27 +16,27 @@
}
&:disabled {
pointer-events: none;
cursor: default;
opacity: 0.5;
pointer-events: none;
}
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
&::-webkit-slider-runnable-track {
height: 0.5rem;
border-radius: 0.5rem;
background-color: #27272a;
border-radius: 0.5rem;
}
&::-webkit-slider-thumb {
width: 14px;
height: 14px;
border: 1px solid #52525b;
border-radius: 50%;
margin-top: -3px;
appearance: none;
background-color: #3f3f46;
border: 1px solid #52525b;
border-radius: 50%;
}
&:not(:disabled):focus::-webkit-slider-thumb {
@ -49,19 +49,19 @@
&::-moz-range-track {
height: 0.5rem;
border-radius: 0.5rem;
background-color: #27272a;
border-radius: 0.5rem;
}
&::-moz-range-thumb {
width: 14px;
height: 14px;
margin-top: -3px;
background-color: #3f3f46;
border: none;
border: 1px solid #52525b;
border-radius: 0;
border-radius: 50%;
margin-top: -3px;
background-color: #3f3f46;
}
&:not(:disabled):focus::-moz-range-thumb {

32
src/components/sound/sound.module.css
View File

@ -5,10 +5,10 @@
align-items: center;
justify-content: center;
padding: 25px 20px;
text-align: center;
background: linear-gradient(var(--color-neutral-100), transparent);
border: 1px solid var(--color-neutral-200);
border-radius: 8px;
background: linear-gradient(var(--color-neutral-100), transparent);
text-align: center;
transition: 0.2s;
&.hidden {
@ -21,59 +21,59 @@
left: 0;
width: 100%;
height: 1px;
content: '';
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-400),
transparent
);
content: '';
}
& .icon {
position: relative;
z-index: 2;
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: var(--font-base);
transition: 0.2s;
&::after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--color-neutral-50);
content: '';
background-color: var(--color-neutral-50);
border-radius: 50%;
}
&::before {
position: absolute;
z-index: -2;
top: -1px;
left: -1px;
z-index: -2;
width: calc(100% + 2px);
height: calc(100% + 2px);
border-radius: 50%;
content: '';
background: linear-gradient(
var(--color-neutral-300),
var(--color-neutral-100)
);
content: '';
border-radius: 50%;
}
& .spinner {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: spinner;
animation-timing-function: linear;
line-height: 0;
animation-name: spinner;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
@ -90,11 +90,11 @@
& h3 {
margin-top: 8px;
cursor: default;
font-family: var(--font-heading);
font-size: var(--font-sm);
font-weight: 600;
line-height: 1.6;
cursor: default;
}
}

22
src/components/sounds/sounds.module.css
View File

@ -1,25 +1,25 @@
.sounds {
display: grid;
margin-top: 20px;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin-top: 20px;
}
.button {
position: relative;
display: flex;
width: max-content;
height: 35px;
align-items: center;
justify-content: center;
width: max-content;
height: 35px;
padding: 0 15px;
border: 1px solid var(--color-neutral-200);
border-radius: 50px;
margin: 25px auto 0;
background-color: var(--color-neutral-50);
font-size: var(--font-xsm);
color: var(--color-neutral-subtle);
cursor: pointer;
font-size: var(--font-xsm);
background-color: var(--color-neutral-50);
border: 1px solid var(--color-neutral-200);
border-radius: 50px;
&::before {
position: absolute;
@ -27,13 +27,13 @@
left: 50%;
width: 70%;
height: 1px;
content: '';
background: linear-gradient(
90deg,
transparent,
var(--color-neutral-300),
transparent
);
content: '';
transform: translateX(-50%);
}
@ -43,8 +43,8 @@
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #34d399;
content: '';
background-color: #34d399;
border-radius: 50%;
}
}

4
src/components/tooltip/tooltip.module.css
View File

@ -1,8 +1,8 @@
.tooltip {
width: max-content;
padding: 6px 12px;
font-size: var(--font-xsm);
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
border-radius: 100px;
background-color: var(--color-neutral-100);
font-size: var(--font-xsm);
}

6
src/styles/base/base.css
View File

@ -12,13 +12,13 @@ html {
}
body {
background-color: var(--color-neutral-50);
color: var(--color-foreground);
font-family: var(--font-body);
font-size: var(--font-base);
color: var(--color-foreground);
background-color: var(--color-neutral-50);
}
::selection {
background-color: var(--color-neutral-300);
color: var(--color-foreground);
background-color: var(--color-neutral-300);
}

8
src/styles/fonts.css
View File

@ -1,35 +1,35 @@
/* fraunces-600 - latin */
@font-face {
font-display: swap;
font-family: Fraunces;
font-style: normal;
font-weight: 600;
src: url('/fonts/fraunces-v31-latin-600.woff2') format('woff2');
font-display: swap;
}
/* inter-regular - latin */
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 400;
src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
font-display: swap;
}
/* inter-500 - latin */
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 500;
src: url('../fonts/inter-v13-latin-500.woff2') format('woff2');
font-display: swap;
}
/* inter-tight-600 - latin */
@font-face {
font-display: swap;
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
font-display: swap;
}