Add "about me" page

This commit is contained in:
Anton Vakhrushev 2017-01-21 15:36:09 +03:00
parent 3217d282cc
commit b7eeee4085
4 changed files with 79 additions and 2 deletions

View File

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/styles/app.css?v={{ date().timestamp }}"> <link rel="stylesheet" type="text/css" href="/styles/app.css?v={{ date().timestamp }}">
<link rel="stylesheet" type="text/css" href="/styles/about-me.css?v={{ date().timestamp }}">
<title> <title>
{% if page.title is defined %} {% if page.title is defined %}
{{ page.title }} - {{ page.title }} {{ page.title }} - {{ site.title }}
{% else %} {% else %}
{{ site.title }} {{ site.title }}
{% endif %} {% endif %}
@ -15,7 +16,7 @@
</head> </head>
<body> <body>
<main class="content"> <main class="content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
{% include 'counters.twig' %} {% include 'counters.twig' %}
</body> </body>

45
source/about/me.html.twig Normal file
View File

@ -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 %}

View File

@ -34,6 +34,9 @@ layout: default
<li> <li>
<a href="https://anwinged.blogspot.ru" target="_blank">заброшенный блог</a> <a href="https://anwinged.blogspot.ru" target="_blank">заброшенный блог</a>
</li> </li>
<li>
<a href="/about/me">немного фактов обо мне</a>
</li>
</ul> </ul>
<h2 class="heading">Похвалить</h2> <h2 class="heading">Похвалить</h2>

View File

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