feat: restyle unauthenticated screens #1103
|
@ -106,16 +106,19 @@ useTitle(() => title.value)
|
|||
}
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
|
||||
.content {
|
||||
width: 50%;
|
||||
padding: 2rem 2rem 1.5rem;
|
||||
display: flex;
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Add class to Message component and use that. Add class to Message component and use that.
=> By using a class inside the component we would create an implicit dependency.
konrad
commented
It looks like the class here wasn't used anywhere. I've removed it. It looks like the class here wasn't used anywhere. I've removed it.
dpschen
commented
Use mobile first:
Use mobile first:
```scss
.content {
// start with common stuff
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 2rem 2rem 1.5rem;
// define stuff that applies mobile only
@media screen and (max-width: $desktop) {
width: 100%;
max-width: 450px;
margin-inline: auto;
}
// define desktop only stuff
@media screen and (min-width: $desktop) {
width: 50%;
}
}
```
konrad
commented
Done! Done!
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem 1.5rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue
Block a user
Picky: new css love: use
margin-block: 1rem;
=> transformed by postcss-preset-env. Reason: you don't want to define the inline (left, right) value, but do it here as a sideeffect.hmm it looks like this isn't transformed. But it definitely is a nice propery.
I checked this again.
I think that the browsers that we want to support according to our browserslist all support it natively so there is no need for postcss-preset-env to transform it =)
Because it does do that via postcss-logical