From b7eeee4085868c81fdf82742938e7fccad67e1ba Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Sat, 21 Jan 2017 15:36:09 +0300 Subject: [PATCH] Add "about me" page --- source/_layouts/default.html.twig | 5 ++-- source/about/me.html.twig | 45 +++++++++++++++++++++++++++++++ source/index.html.twig | 3 +++ source/styles/about-me.css | 28 +++++++++++++++++++ 4 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 source/about/me.html.twig create mode 100644 source/styles/about-me.css diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index 2419d09..54748c7 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -5,9 +5,10 @@ + {% if page.title is defined %} - {{ page.title }} - {{ page.title }} + {{ page.title }} - {{ site.title }} {% else %} {{ site.title }} {% endif %} @@ -15,7 +16,7 @@ </head> <body> <main class="content"> - {% block content %}{% endblock %} + {% block content %}{% endblock %} </main> {% include 'counters.twig' %} </body> diff --git a/source/about/me.html.twig b/source/about/me.html.twig new file mode 100644 index 0000000..ad0dd29 --- /dev/null +++ b/source/about/me.html.twig @@ -0,0 +1,45 @@ +--- +layout: default +title: Обо мне +--- + +{% block content %} + + <section class="about-me"> + <div class="about-me__content"> + + <div class="about-me__note" id="about-me-note">Я люблю шоколад.</div> + + <ul class="about-me__links"> + <li class="about-me__link"> + <a href="">Узнать чуть лучше</a> + </li> + <li class="about-me__link"> + <a href="/">На главную</a> + </li> + </ul> + + </div> + </section> + + <script type="text/javascript"> + window.addEventListener('DOMContentLoaded', function() { + var notes = [ + 'Люблю шоколад.', + 'Сделал этот сайт.', + 'Работаю программистом.', + 'Люблю кататься на велосипеде.', + 'Проехал на велосипеде 200 километров за день.', + 'Мой любимый фильм "Три идиота".', + 'Люблю читать фантастические книги.', + 'Предпочитаю ходить в кино на 2D-сеансы.', + 'Не люблю пьяных людей.', + 'Хотел бы побывать в горах.', + 'На день рождения ко мне можно прийти без подарка.', + ]; + var note = notes[Math.floor(Math.random() * notes.length)]; + document.getElementById('about-me-note').innerHTML = note; + }); + </script> + +{% endblock %} diff --git a/source/index.html.twig b/source/index.html.twig index e18243b..235d3d0 100644 --- a/source/index.html.twig +++ b/source/index.html.twig @@ -34,6 +34,9 @@ layout: default <li> <a href="https://anwinged.blogspot.ru" target="_blank">заброшенный блог</a> </li> + <li> + <a href="/about/me">немного фактов обо мне</a> + </li> </ul> <h2 class="heading">Похвалить</h2> diff --git a/source/styles/about-me.css b/source/styles/about-me.css new file mode 100644 index 0000000..cf827ab --- /dev/null +++ b/source/styles/about-me.css @@ -0,0 +1,28 @@ +.about-me { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.about-me__note { + text-align: center; + font-size: 120%; + max-width: 400px; + min-height: 3em; +} + +.about-me__links { + padding: 0; + margin-top: 4em; + list-style: none; + text-align: center; +} + +.about-me__link { + display: inline-block; +} + +.about-me__link + .about-me__link { + margin-left: 1em; +}