diff --git a/.stylelintrc.json b/.stylelintrc.json index bc895ef..53aec84 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,4 +1,7 @@ { - "extends": "stylelint-config-standard-scss" + "extends": [ + "stylelint-config-standard-scss", + "stylelint-config-idiomatic-order" + ] } diff --git a/assets/css/main.scss b/assets/css/main.scss index 991c850..eda07a5 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,3 +1,3 @@ -@use './parts/_page.scss'; -@use './parts/_albums.scss'; +@use './parts/page'; +@use './parts/albums'; diff --git a/assets/css/parts/_albums.scss b/assets/css/parts/_albums.scss index fac9c5f..30e9e12 100644 --- a/assets/css/parts/_albums.scss +++ b/assets/css/parts/_albums.scss @@ -2,26 +2,26 @@ .subalbums { display: grid; + gap: 15px; grid-template-columns: 1fr; grid-template-columns: repeat(auto-fill, minmax(200px, 300px)); - gap: 15px; .subalbum { - border: 1px solid lightgray; - border-radius: 10px; - padding: 5px; display: flex; flex-direction: column; + padding: 5px; + border: 1px solid lightgray; + border-radius: 10px; .teaser { - flex: 0 0 200px; + display: flex; height: 200px; + flex: 0 0 200px; + justify-content: center; + // background-color: lightgray; border-radius: 10px; - display: flex; - justify-content: center; - img { max-width: 100%; max-height: 100%; @@ -43,16 +43,16 @@ margin: 10px 0; .download { - margin: 10px 0 20px; display: flex; flex-direction: row; justify-content: end; + margin: 10px 0 20px; .button { - background-color: #7181e3; - color: black; padding: 10px 25px; border-radius: 10px; + background-color: #7181e3; + color: black; font-weight: bold; text-decoration: none; diff --git a/assets/css/parts/_page.scss b/assets/css/parts/_page.scss index 1aa3d15..3c254c3 100644 --- a/assets/css/parts/_page.scss +++ b/assets/css/parts/_page.scss @@ -2,26 +2,25 @@ body { display: flex; - flex-direction: column; - margin: 0; - padding: 10px; - box-sizing: border-box; min-height: 100vh; + box-sizing: border-box; + flex-direction: column; + padding: 10px; + margin: 0; color: white; } .page-background { - z-index: -1; position: fixed; + z-index: -1; top: 0; left: 0; width: 100vw; height: 100vh; - background-image: url('../img/bg/bg.jpg'); + background-position: center; background-repeat: no-repeat; background-size: cover; - background-position: center; } a { @@ -38,9 +37,10 @@ a { .main { flex: 1 0 auto; + @include r.desktop { - max-width: 1280px; width: 100%; + max-width: 1280px; margin: 0 auto; } } @@ -48,12 +48,11 @@ a { .footer { display: flex; justify-content: center; - gap: 30px; - font-size: smaller; - + padding: 10px 0; border-top: 1px solid white; margin-top: 10px; - padding: 10px 0; + font-size: smaller; + gap: 30px; p { margin: 0; @@ -61,8 +60,8 @@ a { } .header { - border-bottom: 1px solid white; padding-bottom: 10px; + border-bottom: 1px solid white; margin-bottom: 10px; } diff --git a/package-lock.json b/package-lock.json index 73975db..4f1875b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ }, "devDependencies": { "stylelint": "^16.10.0", + "stylelint-config-idiomatic-order": "^10.0.0", "stylelint-config-standard": "^36.0.1", "stylelint-config-standard-scss": "^13.1.0", "vite": "^5.4.10" @@ -1688,6 +1689,15 @@ "node": ">=4" } }, + "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/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -1968,6 +1978,21 @@ "node": ">=18.12.0" } }, + "node_modules/stylelint-config-idiomatic-order": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-idiomatic-order/-/stylelint-config-idiomatic-order-10.0.0.tgz", + "integrity": "sha512-gJjT1nwhgnHS52+mRn+5Iw6keZIPRN4W+vbzct9Elb+tWOo61jC/CzXzAJHvvOYQZqUYItfs2aQ8fU5hnCvuGg==", + "dev": true, + "dependencies": { + "stylelint-order": "^6.0.2" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "stylelint": ">=11" + } + }, "node_modules/stylelint-config-recommended": { "version": "14.0.1", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", @@ -2060,6 +2085,19 @@ } } }, + "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-scss": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.8.1.tgz", diff --git a/package.json b/package.json index c0a1ad5..173f722 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ }, "devDependencies": { "stylelint": "^16.10.0", + "stylelint-config-idiomatic-order": "^10.0.0", "stylelint-config-standard": "^36.0.1", "stylelint-config-standard-scss": "^13.1.0", "vite": "^5.4.10"