Изменен вид главной страницы

source/_assets/index/social.scss

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

source/_assets/index/style.scss

@@ -14,27 +14,24 @@
     }
 
     @import 'social';
-}
 
-.hello {
+    .name {
-    margin-top: 1em;
+        margin-top: 0.6em;
-    font-size: 3.4em;
+        font-size: 2.4em;
-    margin-bottom: 0.3em;
+        margin-bottom: 0.3em;
-    font-weight: normal;
+        font-weight: bold;
 
-    @media (max-width: $first-media-step) {
+        @media (max-width: $first-media-step) {
-        margin-top: $mobile-margin;
+            margin-top: $mobile-margin;
+        }
+    }
+
+    .info {
+        margin-top: 0;
+        margin-bottom: 0.8em;
+    }
+
+    .year-title {
+        font-weight: bold;
     }
 }
-
-.heading {
-    margin-top: 2.3em;
-    margin-bottom: 0.4em;
-    font-size: 1.2em;
-    font-weight: normal;
-}
-
-.text {
-    margin-top: 0;
-    margin-bottom: 0.8em;
-}

source/_includes/article_list.twig

@@ -0,0 +1,20 @@
+{% for year in 2010..2030 %}
+
+  {% set items = [] %}
+
+  {% for article in data.articles %}
+    {% if article.date|date('Y') == year %}
+      {% set items = items|merge([article]) %}
+    {% endif %}
+  {% endfor %}
+
+  {% if items %}
+    <h2 class="year-title">{{ year }}</h2>
+    {% for article in items %}
+      <h3 class="article-title">
+        <a href="{{ article.url }}">{{ article.title }}</a>
+      </h3>
+    {% endfor %}
+  {% endif %}
+
+{% endfor %}

source/articles.html.twig

@@ -6,35 +6,6 @@ use: [articles]
 ---
 {% block content %}
 
-  <h1>{{ page.title }}</h1>
+  {% include 'article_list.twig' %}
-
-  {% for year in 2010..2030 %}
-
-    {% set items = [] %}
-
-    {% for article in data.articles %}
-      {% if article.date|date('Y') == year %}
-        {% set items = items|merge([article]) %}
-      {% endif %}
-    {% endfor %}
-
-    {% if items %}
-      <h2>{{ year }}</h2>
-      <ul>
-        {% for article in items %}
-          <li>
-            <p>
-              <a href="{{ article.url }}">{{ article.title }}</a>
-              {% if article.description %}
-                <br>
-                {{ article.description }}
-              {% endif %}
-            </p>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-
-  {% endfor %}
 
 {% endblock %}

source/index.html.twig

@@ -18,31 +18,17 @@ use: [articles]
 
   <main class="content">
 
-    <h1 class="hello">Привет,</h1>
+    <h1 class="name">Антов Вахрушев</h1>
 
-    <p class="text">
+    <p class="info">
-      меня зовут Антон Вахрушев, и&nbsp;это моя домашняя страница.
+      Я веб-программист в <a href="https://elama.ru/">eLama</a>. Пишу на PHP.
+      Предпочитаю разработку back-end, экспериментирую с front-end, интересуюсь функциональным программированием.
+      Иногда <a href="/albums">фотографирую</a>.
     </p>
 
-    <h2 class="heading"><a href="/articles/">Заметки</a></h2>
+    <span class="hr-line"></span>
-    <ul>
-      {% for article in data.articles %}
-        <li>
-          <a href="{{ article.url }}">{{ article.title }}</a>
-          <p>{{ article.description }}</p>
-        </li>
-      {% endfor %}
-    </ul>
 
-    <h2 class="heading">Читать</h2>
+    {% include 'article_list.twig' %}
-    <ul>
-      <li>
-        <a href="/about/">об авторе</a>
-      </li>
-      <li>
-        <a href="/wishlist/">вишлист</a>
-      </li>
-    </ul>
 
     <span class="hr-line"></span>