Make CSS code nice
This commit is contained in:
parent
d0fe145af0
commit
9e79b08227
@ -1,4 +1,7 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard-scss"
|
||||
"extends": [
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-idiomatic-order"
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@use './parts/_page.scss';
|
||||
@use './parts/_albums.scss';
|
||||
@use './parts/page';
|
||||
@use './parts/albums';
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
.teaser {
|
||||
flex: 0 0 200px;
|
||||
height: 200px;
|
||||
// background-color: lightgray;
|
||||
padding: 5px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 10px;
|
||||
|
||||
.teaser {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
flex: 0 0 200px;
|
||||
justify-content: center;
|
||||
|
||||
// background-color: lightgray;
|
||||
border-radius: 10px;
|
||||
|
||||
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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
38
package-lock.json
generated
38
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user