gnu-social/templates/base.html.twig

116 lines
5.2 KiB
Twig

<!DOCTYPE html>
<html>
<head>
{% 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">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}" media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_mid.css') }}" media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base_small.css') }}" media="screen and (max-width: 600px)">
{% endblock %}
</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>