Add rubber duck
This commit is contained in:
parent
88401f6d9c
commit
7fa8959e05
Binary file not shown.
After Width: | Height: | Size: 275 KiB |
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue