feat: restyle unauthenticated screens #1103
|
@ -33,12 +33,16 @@ const motd = computed(() => store.state.config.motd)
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
|
||||
background-color: var(--site-background);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
konrad marked this conversation as resolved
Outdated
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: $fullhd) {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.noauth-container {
|
||||
|
@ -50,7 +54,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
border-radius: $radius;
|
||||
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
|
||||
box-shadow: var(--shadow-md);
|
||||
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?
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
@ -65,7 +69,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
@media screen and (max-width: $desktop) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: none;
|
||||
konrad marked this conversation as resolved
dpschen
commented
Move these rules to the
Move media queries before If you change Move these rules to the `@media screen and (min-width: $tablet)` media query
=> makes it clearer that it just appies there.
```scss
width: 50%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .2);
z-index: 10;
}
> * {
z-index: 20;
}
```
Move media queries before `&::after` and `> *`
=> those are styling other elements
=> move styles together that style the same stuff
If you change `&::after` in `&::before` you can remove the z-index if you replace
`z-index: 20;` with `position: relative` (this creates a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
=> less complexity with managing z-index.
konrad
commented
Done! Done!
|
||||
}
|
||||
|
@ -82,7 +86,7 @@ const motd = computed(() => store.state.config.motd)
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
|
||||
|
||||
&.has-message {
|
||||
justify-content: space-between;
|
||||
}
|
||||
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.
|
||||
|
|
Super picky: use
place-items: center
(I think this is replaced with the same after parsed :D)Oh, that sounds like a nice property, never heard of it before.