Archiving the original Paska Joululeffa

2024-11-15 16:38:48 +02:00
commit 48e4fb39e1
8 changed files with 239 additions and 0 deletions
@@ -0,0 +1,110 @@
+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;
+}