Add rubber duck

This commit is contained in:
Augusto Gunsch 2022-03-30 07:28:40 -03:00
parent 88401f6d9c
commit 7fa8959e05
2 changed files with 18 additions and 11 deletions

BIN
static/duck.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

View File

@ -1,9 +1,7 @@
/* /*
* #000000 - Black * #F2F2FF - White
* #FFC857 - Yellow * #EDAF1F - Orange
* #E9724C - Orange * #17466E - Blue
* #C5283D - Red
* #255F85 - Blue
*/ */
html { html {
@ -13,8 +11,12 @@ html {
body { body {
background-color: #F2F2FF; background-color: #F2F2FF;
background-image: url("duck.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: right bottom;
display: flex; display: flex;
margin: 1em; margin: 0;
width: 100%; width: 100%;
font-family: "Noto Sans Mono", "Monaco", serif; font-family: "Noto Sans Mono", "Monaco", serif;
flex-direction: column; flex-direction: column;
@ -23,7 +25,7 @@ body {
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 1rem; padding: 2rem;
} }
header h1 { header h1 {
@ -59,11 +61,12 @@ main {
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
margin-bottom: 3rem; padding: 1rem;
padding-bottom: 5rem;
} }
main figure { main figure {
max-width: 40%; max-width: 30%;
display: block; display: block;
font-size: 1.5rem; font-size: 1.5rem;
margin: 0; margin: 0;
@ -79,12 +82,17 @@ main span {
} }
mark { mark {
background-color: #EDAF1F; background-color: #17466E;
color: #F2F2FF;
position: relative; position: relative;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
body {
background-image: none;
}
main { main {
margin-bottom: 0; margin-bottom: 0;
} }
@ -97,5 +105,4 @@ mark {
main figure { main figure {
max-width: 100%; max-width: 100%;
} }
} }