Archived
110 lines
2.0 KiB
CSS
110 lines
2.0 KiB
CSS
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #A20A0A;
|
|
font-family: 'Sofia';
|
|
}
|
|
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 25em;
|
|
}
|
|
|
|
.title {
|
|
color: #799351;
|
|
text-align: center;
|
|
/*margin-bottom: 3em;*/
|
|
}
|
|
|
|
.titlebar {
|
|
margin-top: 2em;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 2fr;
|
|
grid-template-rows: 4em;
|
|
align-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.titlebar img {
|
|
height: 4em;
|
|
}
|
|
|
|
.caneseparator {
|
|
width: 60%;
|
|
height: 1em;
|
|
margin: 2.5em auto;
|
|
border: 0;
|
|
background-image: repeating-linear-gradient(45deg, red 0%, red 10%, white 10%, white 20%);
|
|
box-shadow: 0.2em 0.2em 0.5em;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
@keyframes bellsJingle {
|
|
0% {rotate: -10deg;}
|
|
50% {rotate: 10deg;}
|
|
100% {rotate: -10deg;}
|
|
}
|
|
|
|
|
|
footer img {
|
|
display: block;
|
|
width: 10em;
|
|
margin: 2em auto;
|
|
animation-name: bellsJingle;
|
|
animation-duration: 0.3s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
.grid-container {
|
|
padding: 2px;
|
|
height: 20em;
|
|
width: 20em;
|
|
align-content: center;
|
|
display: grid;
|
|
grid-template-columns: repeat(3,1fr);
|
|
grid-template-rows: repeat(3,1fr);
|
|
grid-gap: 1em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.item-button {
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
font-size: 1em;
|
|
justify-content: center;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-size: 0.7em;
|
|
padding: 1em;
|
|
width: 100%;
|
|
border-radius: 1rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.item-button-norm {
|
|
box-shadow: black 1px 1px 3px;
|
|
background-color: #F6EEC9;
|
|
color: 799351;
|
|
}
|
|
|
|
.item-button-pressed {
|
|
background-image: url("../img/kranssi.png");
|
|
background-size: 95%;
|
|
background-color: transparent;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
box-shadow: 0px;
|
|
border: 0;
|
|
color: transparent;
|
|
animation: bellsJingle 4s;
|
|
animation-iteration-count: infinite;
|
|
} |