From 870cbe01479215f1070cfe3b7b129288e8d2fe23 Mon Sep 17 00:00:00 2001
From: Anton Vakhrushev <anwinged@ya.ru>
Date: Sun, 17 Jun 2018 16:41:13 +0300
Subject: [PATCH] Style reorganization

---
 source/_assets/base_style.scss                |  8 ++---
 source/_assets/layout_default/style.scss      | 11 ++++---
 .../_assets/layout_internal/navigation.scss   | 21 ++++++++++++++
 source/_assets/layout_internal/style.scss     | 29 ++++---------------
 source/_assets/predictor/demo.vue             | 22 ++++++++++----
 source/_assets/vars.scss                      |  6 ++++
 6 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 source/_assets/layout_internal/navigation.scss

diff --git a/source/_assets/base_style.scss b/source/_assets/base_style.scss
index 8da758e..4287257 100644
--- a/source/_assets/base_style.scss
+++ b/source/_assets/base_style.scss
@@ -3,16 +3,12 @@
 html,
 body {
     font-size: $base-font-size;
-    font-family: 'PT Serif', serif;
+    font-family: $base-font-family;
     padding: 0;
     margin: 0;
 
-    @media (max-width: $preferred-width - 1px) {
+    @media (max-width: $first-media-step) {
         font-size: $base-font-size - 2px;
-        margin: {
-            left: 0.8em;
-            right: 0.8em;
-        }
     }
 }
 
diff --git a/source/_assets/layout_default/style.scss b/source/_assets/layout_default/style.scss
index 1b46fef..170783f 100644
--- a/source/_assets/layout_default/style.scss
+++ b/source/_assets/layout_default/style.scss
@@ -5,9 +5,12 @@
     width: $preferred-width;
     margin: 0 auto;
 
-    @media (max-width: 480px) {
-        margin: 10px 0;
+    @media (max-width: $first-media-step) {
         width: auto;
+        margin: {
+            left: $mobile-margin;
+            right: $mobile-margin;
+        }
     }
 }
 
@@ -17,8 +20,8 @@
     margin-bottom: 0.3em;
     font-weight: normal;
 
-    @media (max-width: 839px) {
-        margin-top: 0.8em;
+    @media (max-width: $first-media-step) {
+        margin-top: $mobile-margin;
     }
 }
 
diff --git a/source/_assets/layout_internal/navigation.scss b/source/_assets/layout_internal/navigation.scss
new file mode 100644
index 0000000..635266b
--- /dev/null
+++ b/source/_assets/layout_internal/navigation.scss
@@ -0,0 +1,21 @@
+.navigation {
+    display: block;
+    border-bottom: 1px solid #eee;
+
+    &__actions {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &__action {
+        display: inline-block;
+        margin: {
+            top: 1em;
+            bottom: 1em;
+        }
+    }
+
+    &__link {
+    }
+}
diff --git a/source/_assets/layout_internal/style.scss b/source/_assets/layout_internal/style.scss
index 81cf46a..f934e91 100644
--- a/source/_assets/layout_internal/style.scss
+++ b/source/_assets/layout_internal/style.scss
@@ -1,34 +1,17 @@
 @import '../vars';
 @import '../base_style';
-
-.navigation {
-    display: block;
-    border-bottom: 1px solid #eee;
-}
-
-.navigation__actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.navigation__action {
-    display: inline-block;
-    margin: {
-        top: 1em;
-        bottom: 1em;
-    }
-}
-
-.navigation__link {
-}
+@import 'navigation';
 
 .page {
     width: $preferred-width;
     margin: 0 auto;
 
-    @media (max-width: 480px) {
+    @media (max-width: $first-media-step) {
         width: auto;
+        margin: {
+            left: $mobile-margin;
+            right: $mobile-margin;
+        }
     }
 }
 
diff --git a/source/_assets/predictor/demo.vue b/source/_assets/predictor/demo.vue
index 37d7ed6..21d69c2 100644
--- a/source/_assets/predictor/demo.vue
+++ b/source/_assets/predictor/demo.vue
@@ -80,19 +80,28 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../vars.scss';
+
 $button-radius: 0.5em;
-$font-size: 20px;
 
 .app {
     display: block;
     margin: 2em auto;
-    width: 400px;
-    text-align: center;
     padding: 2em;
-    @media (max-width: 749px) {
-        padding: 2em 0;
+    text-align: center;
+    border: 1px solid transparent;
+
+    @media (max-width: $first-media-step) {
+        padding: {
+            right: 0;
+            left: 0;
+        }
         width: auto;
     }
+
+    &:hover {
+        border-color: #ccc;
+    }
 }
 
 .score {
@@ -112,7 +121,8 @@ $font-size: 20px;
     background-color: #405480;
     padding: 0.6em;
     border: none;
-    font-size: $font-size;
+    font-size: 100%;
+    font-family: inherit;
 }
 
 .restart-button {
diff --git a/source/_assets/vars.scss b/source/_assets/vars.scss
index 486be9c..49c5fab 100644
--- a/source/_assets/vars.scss
+++ b/source/_assets/vars.scss
@@ -1,5 +1,11 @@
+$base-font-family: 'PT Serif', serif;
+
 // Базовый размер шрифта
 $base-font-size: 20px;
 
 // Ширина страницы
 $preferred-width: 700px;
+
+$first-media-step: $preferred-width - 1px;
+
+$mobile-margin: 0.8em;