Rewrite index page

source/_assets/base_style.scss

@@ -22,25 +22,9 @@ h6 {
     font-weight: normal;
 }
 
-%external-link-icon {
+.hr-line {
-    display: inline-block;
+    height: 0;
-    margin-left: 0.6em;
+    display: block;
-    color: $base-font-color;
+    border-bottom: 1px solid #eee;
-    font-size: $base-font-size - 4px;
+    margin: 2em 0;
-
-    @media (max-width: $first-media-step) {
-        font-size: $base-font-size - 2px;
-    }
-}
-
-a[href*="//github.com"]:after {
-    @extend %external-link-icon;
-    font-family: 'Font Awesome 5 Brands', serif;
-    content: '\f09b';
-}
-
-a[target="_blank"]:not([href*="//github.com"]):after {
-    @extend %external-link-icon;
-    font-family: 'Font Awesome 5 Free', serif;
-    content: '\f35d';
 }

source/_assets/components/external-link-markers.scss

@@ -0,0 +1,22 @@
+%external-link-icon {
+    display: inline-block;
+    margin-left: 0.6em;
+    color: $base-font-color;
+    font-size: $base-font-size - 4px;
+
+    @media (max-width: $first-media-step) {
+        font-size: $base-font-size - 2px;
+    }
+}
+
+a[href*="//github.com"]:after {
+    @extend %external-link-icon;
+    font-family: 'Font Awesome 5 Brands', serif;
+    content: '\f09b';
+}
+
+a[target="_blank"]:not([href*="//github.com"]):after {
+    @extend %external-link-icon;
+    font-family: 'Font Awesome 5 Free', serif;
+    content: '\f35d';
+}

source/_assets/components/social.scss

@@ -0,0 +1,17 @@
+.social {
+    list-style: none;
+    padding: 0;
+    margin: 3em 0;
+    display: block;
+    text-align: center;
+
+    &__item {
+        display: inline-block;
+        margin: 0 0.5em;
+        font-size: 180%;
+    }
+
+    &__link {
+        color: inherit;
+    }
+}

source/_assets/index/index.js

@@ -0,0 +1 @@
+import '../components/social.scss';

source/_assets/layout_internal/style.scss

@@ -13,11 +13,7 @@
             right: $mobile-margin;
         }
     }
-}
 
-.hr-line {
+    // extensions
-    height: 0;
+    @import '../components/external-link-markers';
-    display: block;
-    border-bottom: 1px solid #eee;
-    margin: 2em 0;
 }

source/_assets/vars.scss

@@ -2,7 +2,7 @@ $base-font-family: 'PT Serif', serif;
 
 // Базовый размер шрифта
 $base-font-size: 20px;
-$base-font-color: #333;
+$base-font-color: #000;
 
 // Ширина страницы
 $preferred-width: 700px;

source/index.html.twig

@@ -2,6 +2,10 @@
 layout: default
 description: Личный сайт Антона Вахрушева
 ---
+{% block css %}
+  <link rel="stylesheet" href="/static/index.css?v={{ date().timestamp }}">
+{% endblock %}
+
 {% block content %}
   <h1 class="hello">Привет,</h1>
 
@@ -16,36 +20,39 @@ description: Личный сайт Антона Вахрушева
     </li>
   </ul>
 
-  <h2 class="heading">Смотреть</h2>
-  <ul>
-    <li>
-      <a href="https://500px.com/anwinged" target="_blank">фотографии</a>
-    </li>
-  </ul>
-
   <h2 class="heading">Читать</h2>
   <ul>
     <li>
-      <a href="https://github.com/anwinged" target="_blank">код на гитхабе</a>
+      <a href="/about/me/">об авторе</a>
-    </li>
-    <li>
-      <a href="https://anwinged.blogspot.ru" target="_blank">блог</a>
-    </li>
-    <li>
-      <a href="/about/me/">обо мне</a>
     </li>
     <li>
       <a href="/wishlist/">вишлист</a>
     </li>
   </ul>
 
-  <h2 class="heading">Написать</h2>
+  <span class="hr-line"></span>
-  <ul>
+
-    <li>
+  <ul class="social">
-      <a href="https://vk.com/anwinged" target="_blank">вконтакте</a>
+    <li class="social__item">
+      <a class="social__link" href="https://github.com/anwinged" target="_blank" title="Код на Гитхабе">
+        <i class="fab fa-github"></i>
+      </a>
     </li>
-    <li>
+    <li class="social__item">
-      <a href="mailto:anwinged@yandex.ru">на почту</a>
+      <a class="social__link" href="https://500px.com/anwinged" target="_blank" title="Фотографии на 500px">
+        <i class="fab fa-500px"></i>
+      </a>
+    </li>
+    <li class="social__item">
+      <a class="social__link" href="https://vk.com/anwinged" target="_blank" title="Профиль на Вконтакте">
+        <i class="fab fa-vk"></i>
+      </a>
+    </li>
+    <li class="social__item">
+      <a class="social__link" href="https://instagram.com/anwinged" target="_blank" title="Фотографии в Инстаграме">
+        <i class="fab fa-instagram"></i>
+      </a>
     </li>
   </ul>
+
 {% endblock %}

webpack.config.js

@@ -62,6 +62,7 @@ module.exports = (env = {}) => {
         entry: {
             layout_default: './source/_assets/layout_default/style.scss',
             layout_internal: './source/_assets/layout_internal/style.scss',
+            index: './source/_assets/index/index.js',
             about_me: './source/_assets/about_me/index.js',
             predictor: './source/_assets/predictor/index.js',
         },