Add "about me" page
This commit is contained in:
parent
3217d282cc
commit
b7eeee4085
@ -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
45
source/about/me.html.twig
Normal 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 %}
|
@ -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>
|
||||||
|
28
source/styles/about-me.css
Normal file
28
source/styles/about-me.css
Normal 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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user