Select Git revision
-
jan.bednarik authoredjan.bednarik authored
avatar_public.css 1.68 KiB
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
box-shadow: 0 10px 24px 3px rgba(0, 0, 0, 0.43)
}
header h1 {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 30px 15px 30px 15px;
margin: 0;
font-family: "Bebas Neue", sans-serif;
text-transform: uppercase;
color: #fff;
background: #000;
font-size: 55px;
}
main {
padding: 40px 10px 10px 10px;
}
main, footer {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
#description {
max-width: 800px;
padding: 15px;
margin-left: auto;
margin-right: auto;
}
#avatar-canvas, .controls {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#avatar-canvas {
width: 100%;
box-shadow: 0px 0px 5px 1px #000000;
object-fit: contain;
display: block;
}
.controls {
display: flex;
justify-content: space-between;
padding-top: 17px;
}
#image-controls {
display: none;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 10px;
justify-content: center;
align-items: flex-start;
}
#image-controls > div {
display: flex;
align-items: center;
gap: 3px;
}
#position-controls-wrapper {
text-align: right;
}
#zoom-image-input {
max-width: 100px;
}
button {
border: 0;
border-radius: 5px;
background: #000;
color: #fff;
padding: 12px;
font-family: "Open Sans", sans-serif;
font-size: medium;
cursor: pointer;
transition: .15s;
}
button:hover, button:focus {
background: #1f1f1f;
}
.button-small {
padding: 7px;
}
footer {
padding-top: 20px;
text-align: center;
}
footer > small > span {
display: inline-block;
}
#upload-image {
display: none;
}
/* Responsive layout */
@media screen and (max-width: 900px) {
header h1 {
font-size: 30px;
}
}