Update styles

source/_assets/base_style.scss

@@ -1,24 +1,19 @@
+@import 'vars';
+
 html,
 body {
-    font-size: 18px;
+    font-size: $base-font-size;
     font-family: 'PT Serif', serif;
     padding: 0;
     margin: 0;
 
-    @media (max-width: 839px) {
-        font-size: 16px;
+    @media (max-width: $preferred-width - 1px) {
+        font-size: $base-font-size - 2px;
         margin: {
             left: 0.8em;
             right: 0.8em;
         }
     }
-
-    @media (max-width: 480px) {
-        margin: {
-            left: 0.5em;
-            right: 0.5em;
-        }
-    }
 }
 
 h1,

source/_assets/layout_default/style.scss

@@ -1,15 +1,10 @@
-@import '../styles/vars';
-@import '../styles/base_style';
+@import '../vars';
+@import '../base_style';
 
 .content {
     width: $preferred-width;
     margin: 0 auto;
 
-    @media (max-width: 839px) {
-        margin: 20px 0;
-        width: auto;
-    }
-
     @media (max-width: 480px) {
         margin: 10px 0;
         width: auto;

source/_assets/layout_internal/style.scss

@@ -1,5 +1,5 @@
-@import '../styles/vars';
-@import '../styles/base_style';
+@import '../vars';
+@import '../base_style';
 
 .navigation {
     display: block;
@@ -27,14 +27,14 @@
     width: $preferred-width;
     margin: 0 auto;
 
-    @media (max-width: 839px) {
-        width: auto;
-    }
-
     @media (max-width: 480px) {
         width: auto;
     }
 }
 
-.content {
+.hr-line {
+    height: 0;
+    display: block;
+    border-bottom: 1px solid #eee;
+    margin: 2em 0;
 }

source/_assets/predictor/Demo.vue

@@ -89,7 +89,6 @@ $font-size: 20px;
     width: 400px;
     text-align: center;
     padding: 2em;
-    border: 1px solid #ccc;
     @media (max-width: 749px) {
         padding: 2em 0;
         width: auto;

source/_assets/styles/vars.scss

@@ -1 +0,0 @@
-$preferred-width: 840px;

source/_assets/vars.scss

@@ -0,0 +1,5 @@
+// Базовый размер шрифта
+$base-font-size: 20px;
+
+// Ширина страницы
+$preferred-width: 700px;

source/projects/predictor/index.html.twig

@@ -33,6 +33,8 @@ title: Гадалка
     </li>
   </ul>
 
+  <span class="hr-line"></span>
+
   <div id="app"></div>
 
 {% endblock %}