Update design

This commit is contained in:
Kevin Kandlbinder 2021-06-23 18:04:09 +02:00
parent 7877a7f47d
commit 1d5261f058
4 changed files with 34 additions and 11 deletions

View file

@ -13,6 +13,12 @@
> div, > main { > div, > main {
flex-grow: 1; flex-grow: 1;
display: flex;
flex-direction: column;
> * {
flex-shrink: 0;
}
} }
} }

View file

@ -1,6 +1,7 @@
$fontFamily: 'Open Sans', sans-serif; $fontFamily: 'Open Sans', sans-serif;
$colorAccent: #f58428; $colorAccent: #f58428;
$colorBackground: #0c0c0c;
$layoutWidth: 1200px; $layoutWidth: 1200px;
$layoutPadding: 20px; $layoutPadding: 20px;

View file

@ -4,20 +4,34 @@
@include boxStyle; @include boxStyle;
padding: 30px; padding: 30px;
color: $colorAccent;
width: 300px; width: 300px;
margin: $layoutPadding; margin: $layoutPadding;
background-color: transparent;
box-shadow: none;
@media(prefers-color-scheme: dark) { @media(prefers-color-scheme: dark) {
background: rgba(255, 255, 255, .05); //background: rgba(5, 4, 4, 0.05);
background-color: transparent;
} }
.lbIcon { .lbIcon {
width: 60px;
height: 60px;
svg { svg {
width: 50px; width: 40px;
height: 50px; height: 40px;
margin: 10px;
} }
color: $colorAccent;
border-radius: 100%;
background-color: rgba(grey, .07);
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -28,8 +42,9 @@
} }
&.highlight { &.highlight {
background-color: $colorAccent; /*background-color: $colorAccent;*/
color: white; color: $colorAccent;
/*color: white;*/
} }
&.small { &.small {
@ -42,10 +57,11 @@
.lbIcon { .lbIcon {
height: 25px; height: 25px;
width: 25px;
svg { svg {
width: 20px; width: 15px;
height: 20px; height: 15px;
margin: 2.5px; margin: 5px;
} }
margin-bottom: 0; margin-bottom: 0;

View file

@ -7,11 +7,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: $layoutNavigationHeight; height: $layoutNavigationHeight;
background-color: #1c1c1c; background-color: $colorBackground;
z-index: 100; z-index: 100;
@supports(backdrop-filter: blur(5px)) { @supports(backdrop-filter: blur(5px)) {
background-color: #000000e0; background-color: rgba($colorBackground, .8);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }