Merge pull request #10 from 3Lord3/dev

Адаптивность

css/animations.css

@@ -0,0 +1,27 @@
+@keyframes magnification {
+    0% {
+        transform: scale(0.5);
+    }
+
+    80% {
+        transform: scale(1.05);
+    }
+
+    100% {
+        transform: scale(1.0);
+    }
+}
+
+@keyframes bganimation {
+    0% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 50% 50%;
+    }
+
+    100% {
+        background-position: 0 0;
+    }
+}

css/colors.css

@@ -2,6 +2,12 @@
     --red: rgb(206, 75, 75);
     --purple: rgb(167, 59, 167);
     --blue: rgb(79, 79, 185);
+
+    --bg-pink: rgb(250, 139, 255);
+    --bg-yellow: rgb(236, 255, 127);
+    --bg-blue: rgb(139, 209, 255);
+    --bg-cyan: rgb(43, 210, 255);
+
     --mark: rgb(253, 239, 109);
 
     --black-transparent: rgba(0, 0, 0, .75);

css/end.css

@@ -0,0 +1,27 @@
+.end-wrapper {
+    animation: magnification 0.75s 0s;
+    min-width: 310px;
+    display: flex;
+    justify-content: center;
+}
+
+#reset {
+    font-size: 42px;
+    margin: 0;
+    padding: 8px;
+}
+
+#result {
+    font-size: 42px;
+    margin: 0 10px 0 0;
+}
+
+@media screen and (max-width: 680px) {
+    #result {
+        font-size: 32px;
+    }
+
+    #reset {
+        font-size: 32px;
+    }
+}

css/global.css

@@ -0,0 +1,55 @@
+* {
+    box-sizing: border-box;
+    font-family: sans-serif;
+    user-select: none;
+}
+
+body {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-y: hidden;
+    margin: 0;
+
+    background: linear-gradient(135deg, var(--bg-pink), var(--bg-blue) 30%, var(--bg-yellow), var(--bg-cyan));
+    background-size: 400%;
+    animation: bganimation 15s 0s infinite;
+}
+
+.block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    color: white;
+    border: 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: var(--black-transparent);
+    margin-bottom: 10px;
+    user-select: none;
+}
+
+.buttons-block {
+    display: flex;
+    flex-direction: column;
+    margin: 0 2px;
+}
+
+button:hover,
+button:active {
+    background: var(--black-more-transparent);
+    cursor: pointer;
+}
+
+@media screen and (max-width: 680px) {
+    .block {
+        font-size: 18px;
+        padding: 8px 8px;
+    }
+
+    .buttons-block button {
+        font-size: 13px;
+    }
+}

css/index.css

@@ -1,2 +1,6 @@
 @import url(./colors.css);
-@import url(./body.css);
+@import url(./animations.css);
+@import url(./global.css);
+@import url(./start.css);
+@import url(./wrapper.css);
+@import url(./end.css);