feat: restyle unauthenticated screens #1103
|
@ -84,24 +84,24 @@ useTitle(() => title.value)
|
|||
@media screen and (min-width: $tablet) {
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.has-message {
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.has-message {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
&::before {
|
||||
dpschen marked this conversation as resolved
Outdated
dpschen
commented
If If `.image` is either 40% or 60% why is this 50% wide? Also use mobile first for the width value.
konrad
commented
Change it so everything is always 50%. That seems to work great.
I'm not quite sure why but it does not work when I only use Change it so everything is always 50%. That seems to work great.
> Also use mobile first for the width value.
I'm not quite sure why but it does not work when I only use `min-width: $desktop`.
dpschen
commented
The default width of a flex child is auto as far as i know. The default width of a flex child is auto as far as i know.
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
> * {
|
||||
position: relative;
|
||||
dpschen marked this conversation as resolved
Outdated
dpschen
commented
On desktop: On desktop:
Maybe the logo should be not centered but left aligned with the content below.
=> Might make the Title easier to read because there is more room between those two headlines
konrad
commented
You mean aligned in the middle like this? You mean aligned in the middle like this?
konrad
commented
dpschen
commented
I'm also not really happy with this. Let's keep it for now how it is. I'm also not really happy with this. Let's keep it for now how it is.
|
||||
}
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Color seems to be applied twice (from inside the component aswell). Color seems to be applied twice (from inside the component aswell).
|
||||
}
|
||||
}
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Picky: new css love: use 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.
konrad
commented
hmm it looks like this isn't transformed. But it definitely is a nice propery. hmm it looks like this isn't transformed. But it definitely is a nice propery.
dpschen
commented
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 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](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical)
|
||||
|
||||
|
|
Since the image is defined via CSS:
Not sure why the overlay is needed at all:
If the image uses flex itself you could position the title and message directly as a child.
Title could have:
margin-top: auto
orjustify-self: flex-end
. I think both should work.EDIT:
I just saw that the overlay is used for the background-overlay. But the same could be archieved without DOM impact / new element by styling a
::after
.I got a warning for
end
so I guess it's still better to useflex-end
.=> Maybe support is better, and it seems that postcss-preset-env / autoprefixer doesn't change this automatically.
Picky: same for background as above.
Moved this to an after pseudo class.