feat: restyle unauthenticated screens #1103
|
@ -45,14 +45,14 @@ useTitle(() => title.value)
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background-color: var(--site-background);
|
||||
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
|
||||
min-height: 100vh;
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Why overflow: hidden? Why overflow: hidden?
konrad
commented
To prevent the background from overflowing in the (rounded) corners. To prevent the background from overflowing in the (rounded) corners.
|
||||
|
||||
@media screen and (min-width: $fullhd) {
|
||||
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed;
|
||||
@media screen and (max-width: $fullhd) {
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Use mobile first:
=> no need to reset the border-radius for mobile Use mobile first:
```scss
@media screen and (min-width: $desktop) {
border-radius: $radius;
}
```
=> no need to reset the border-radius for mobile
|
||||
padding-bottom: 15rem;
|
||||
konrad marked this conversation as resolved
Outdated
dpschen
commented
Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile? Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile?
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue
Block a user
Picky:
Use
background-color
=> more specific, doesn't change other values if they are set (they are not in this case). Makes it easier to overwrite if necessary.