mirror of
https://github.com/FreeTubeApp/FreeTube.git
synced 2025-12-05 01:10:31 +00:00
3db6f437c9
* Add Stylelint plugin and rule for evaluating use of logical properties * Implement stylelint-advised use of logical properties in SCSS files * Implement stylelint-advised use of logical properties in CSS files * Implement stylelint linting before each commit to any branch of the repo * Remove other Stylelint plugins so that we can add them in later one-by-one After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts. * Add video player to .stylelintignore * Replace non-logical property usage in templates This is not enforced by the plugin at this time. * Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed * Update ft-video-player.css to disable use of logical property linter We want to avoid introducing directionality-specific properties that could muck up the video player. * Remove redundant/unnecessary scripts in package.json
65 lines
1019 B
SCSS
65 lines
1019 B
SCSS
.card {
|
|
margin-block: 0 60px;
|
|
margin-inline: auto;
|
|
inline-size: 85%;
|
|
|
|
@media only screen and (max-width: 680px) {
|
|
inline-size: 90%;
|
|
}
|
|
}
|
|
|
|
.brand {
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
max-inline-size: 100%;
|
|
inline-size: 500px;
|
|
}
|
|
|
|
.version {
|
|
text-align: center;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.about-chunks {
|
|
display: grid;
|
|
grid-gap: 16px;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin-block: 80;
|
|
margin-inline: auto;
|
|
max-inline-size: 860px;
|
|
|
|
@media only screen and (max-width: 650px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.chunk {
|
|
align-items: start;
|
|
background-color: var(--bg-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 4px -1px rgb(0 0 0 / 50%);
|
|
display: grid;
|
|
grid-gap: 6px 14px;
|
|
grid-template: 'icon title' auto 'icon content' 1fr / auto 1fr;
|
|
justify-content: start;
|
|
margin: 0;
|
|
padding: 18px;
|
|
word-break: break-word;
|
|
|
|
@each $area in icon title content {
|
|
.#{$area} {
|
|
grid-area: $area;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
}
|
|
}
|