Collection für Content angepasst. Image Components erweitert. Verschiedene CSS Apassungen der Demo Page

This commit is contained in:
2022-05-30 13:11:51 +02:00
parent a2bd10453b
commit c67f712280
14 changed files with 42 additions and 79 deletions

View File

@@ -6,7 +6,7 @@ form {
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
strong {
color: @secondary;
color: @primary;
font-weight: 700;
}
@@ -30,13 +30,6 @@ form {
flex-shrink: 0;
border-radius: 100%;
&.contact {
background-color: @secondary-light-green;
}
&.recipe {
background-color: @secondary-light;
}
img {
width: 50%;
}
@@ -82,7 +75,7 @@ form {
}
&:focus {
border: 1px solid @secondary;
border: 1px solid @primary;
color: @primary;
}
@@ -98,10 +91,10 @@ form {
display: flex;
justify-content: center;
align-items: center;
color: @secondary;
color: @primary;
&:hover {
box-shadow: inset 0 0 10px 0 @secondary;
box-shadow: inset 0 0 10px 0 @primary;
}
}
@@ -111,8 +104,8 @@ form {
button {
width: 100%;
background: @secondary;
color: @on-secondary;
background: @primary;
color: @on-primary;
padding: @space-xs @space-md;
border-radius: 10px;
border: 1px solid transparent;
@@ -121,7 +114,7 @@ form {
cursor: pointer;
&:hover {
border-color: @on-secondary;
border-color: @on-primary;
background-color: @primary;
color: @on-primary;
}

View File

@@ -48,7 +48,7 @@ body {
.circle-email {
width: 60px;
height: 60px;
background-color: @secondary-light;
background-color: @secondary;
position: absolute;
top: -20px;
right: -39px;
@@ -57,7 +57,7 @@ body {
.circle-contact {
width: 60px;
height: 60px;
background-color: @secondary-light-green;
background-color: @secondary;
position: absolute;
top: 23px;
right: -53px;

View File

@@ -31,47 +31,13 @@ header {
.brand {
display: block;
margin: @space-md 0;
max-width: 300px;
@media (max-width: 992px) {
width: 80%;
}
}
.tel-box {
display: inline-flex;
align-items: center;
gap: @space-sm;
background: @secondary;
color: @on-secondary;
font-weight: 700;
border-radius: 50px;
height: 40px;
padding-right: @space-md;
margin: @space-md 0 0 auto;
text-decoration: none;
white-space: nowrap;
.icon {
background: @secondary-light;
width: 40px;
height: 40px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 992px) {
& {
display: none;
}
&.mobile {
display: inline-flex;
justify-content: center;
}
}
}
nav {
list-style-type: none;
margin-top: @space-md;
@@ -86,12 +52,11 @@ header {
& > * {
text-decoration: none;
color: @primary;
transition: @transition-default;
font-weight: 500;
&:hover {
color: @on-background;
color: @primary;
}
}
}

View File

@@ -2,7 +2,6 @@
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px solid @secondary;
margin: @space-xs;
.lang {

View File

@@ -19,7 +19,7 @@
width: 50px;
height: 50px;
border-radius: 100%;
background-color: @secondary-light;
background-color: @secondary;
display: flex;
justify-content: center;
align-items: center;

View File

@@ -3,20 +3,16 @@
@background: #fff;
@on-background: #575756;
@primary: #2d8e91;
@primary: #ff0000;
@on-primary: #fff;
@secondary: #72efdd;
@on-secondary: #2d8e91;
@secondary-light: #dafbf7;
@on-secondary-light: @on-secondary;
@secondary-light-green: #e2fbf0;
@on-secondary-light-green: @on-secondary;
@secondary: #1e7c9e;
@on-secondary: #ffffff;
@surface: #fff;
@on-surface: #575756;
@on-surface: #555555;
@error: #fff0e9;
@error: #eebdbd;
@on-error: #eb5757;
@font-size-default: 16px;