Style reorganization

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;
-        }
     }
 }
 

source/_assets/layout_default/style.scss

@@ -5,9 +5,12 @@
     width: $preferred-width;
     margin: 0 auto;
 
-    @media (max-width: 480px) {
+    @media (max-width: $first-media-step) {
-        margin: 10px 0;
         width: auto;
+        margin: {
+            left: $mobile-margin;
+            right: $mobile-margin;
+        }
     }
 }
 
@@ -17,8 +20,8 @@
     margin-bottom: 0.3em;
     font-weight: normal;
 
-    @media (max-width: 839px) {
+    @media (max-width: $first-media-step) {
-        margin-top: 0.8em;
+        margin-top: $mobile-margin;
     }
 }
 

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 {
+    }
+}

source/_assets/layout_internal/style.scss

@@ -1,34 +1,17 @@
 @import '../vars';
 @import '../base_style';
-
+@import 'navigation';
-.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 {
-}
 
 .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;
+        }
     }
 }
 

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) {
+    text-align: center;
-        padding: 2em 0;
+    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 {

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;