Merge pull request 'feature/contact-ui' (#28) from feature/contact-ui into main
Reviewed-on: 0x2620/aab21#28
This commit is contained in:
commit
95137983c8
5 changed files with 68 additions and 19 deletions
|
|
@ -78,7 +78,7 @@
|
|||
.annotation-icon-wrapper {
|
||||
border: 3px solid rgba(#fff, 0.8);
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
|
||||
background: var(--gradient-body);
|
||||
background-size: 300% 100%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
|
|
|||
40
app/static/css/partials/_contact.scss
Normal file → Executable file
40
app/static/css/partials/_contact.scss
Normal file → Executable file
|
|
@ -1,27 +1,53 @@
|
|||
main > .contact {
|
||||
.contact {
|
||||
max-width: var(--container-lg-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2);
|
||||
padding: var(--spacing) 0;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
margin: 0 0 var(--spacing) 0;
|
||||
font-weight: 700;
|
||||
margin: 0 0 var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
padding: 0 0 calc(var(--spacing) / 2) 0;
|
||||
}
|
||||
|
||||
input[type=email], textarea {
|
||||
border: 0;
|
||||
background: blue;
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
input[type=email], input[type=email], textarea {
|
||||
border: 0;
|
||||
line-height: 1.3;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
border: 0;
|
||||
background: green;
|
||||
color: #fff;
|
||||
background: var(--gradient-body);
|
||||
font-size: 18px;
|
||||
font-family: "noto_sans", sans-serif;
|
||||
font-weight: 700;
|
||||
padding: var(--spacing) var(--spacing-2);
|
||||
display: block;
|
||||
background-size: 400% 100%;
|
||||
animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
--bg-color-3: #ffff00;
|
||||
--bg-color-4: #ff3399;
|
||||
|
||||
--gradient-body: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
|
||||
|
||||
--color-link: #ee0;
|
||||
|
||||
--spacing: 8px;
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
}
|
||||
|
||||
body.animated {
|
||||
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
|
||||
background: var(--gradient-body);
|
||||
animation: background_animation 60s ease-in-out infinite;
|
||||
background-size: 400% 100%;
|
||||
color: #ddd;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue