125 lines
5.2 KiB
Twig
125 lines
5.2 KiB
Twig
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<<<<<<< HEAD
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}Base page{% endblock %}</title>
|
|
{% block stylesheets %}{% endblock %}
|
|
<style>
|
|
body {
|
|
background-color: #333;
|
|
color: #ddd;
|
|
}
|
|
</style>
|
|
=======
|
|
{% block meta %}
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
{% endblock %}
|
|
<title>{% block title %}{% endblock %}</title>
|
|
{% block stylesheets %}
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Open+Sans&display=swap" rel="stylesheet">
|
|
{% endblock %}
|
|
>>>>>>> 75f0d589f1... [UI] Header completed, FAQ almost done.
|
|
</head>
|
|
<body>
|
|
{% block icons %}
|
|
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<symbol id="icon-attach" viewBox="0 0 32 32">
|
|
{{ source('@public_path'~asset('assets/icons/attach.svg')) }}
|
|
</symbol>
|
|
<symbol id="icon-heart" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/heart.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-logo" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/logo.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-drop" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/drop.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-reply" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/reply.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-menu" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/menu.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-recycle" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/recycle.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-search" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/search.svg') }}
|
|
</symbol>
|
|
<symbol id="icon-avatar" viewBox="0 0 32 32">
|
|
{{ source('@public_path/assets/icons/avatar.svg') }}
|
|
</symbol>
|
|
</defs>
|
|
</svg>
|
|
{% endblock %}
|
|
|
|
<div id='container'>
|
|
{% block header %}
|
|
<div id='header'>
|
|
<nav class='drop-down' id='menu'>
|
|
<ul>
|
|
<li>
|
|
<a href="#" class='hover-effect'>
|
|
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
|
|
</a>
|
|
<ul>
|
|
<li><a>Bookmarks</a></li>
|
|
<li><a>Messages</a></li>
|
|
<li><a>Settings</a></li>
|
|
<li><a>Logout</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<nav class='drop-down' id='instance'>
|
|
<ul>
|
|
<li>
|
|
<a href="#" class='hover-effect'>
|
|
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
|
|
<b id='instance-name'>GNU social</b>
|
|
<svg class="icon icon-drop"><use xlink:href="#icon-drop"></use></svg>
|
|
</a>
|
|
<ul>
|
|
<li><a>Main Page</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class='flex-item' id='search'>
|
|
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
|
|
</div>
|
|
|
|
<div id='profile'>
|
|
<svg class="icon icon-avatar"><use xlink:href="#icon-avatar"></use></svg>
|
|
<div id='info'>
|
|
<div id='nick'>
|
|
<b id='name'>someone</b>
|
|
</div>
|
|
<div id='tags'>
|
|
<i>coffee addict</i>
|
|
<i>lazy</i>
|
|
</div>
|
|
</div>
|
|
<div id='stats'>
|
|
<div id='followers'>
|
|
<b>1337</b> Followers
|
|
</div>
|
|
<div id='following'>
|
|
<b>42</b> Following
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block nav %}{% endblock %}
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
|
|
{% block javascripts %}{% endblock %}
|
|
</body>
|
|
</html>
|