<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{ title }} </title>

		<!-- style -->

		<link rel="icon" href="{{url_for('static', filename='favicon.ico')}}" />
		<link rel="stylesheet" href="{{url_for('static', filename='font/font.css')}}" />
		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
        
        <link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
        <link rel="stylesheet" href="{{url_for('static', filename='css/project.css')}}" />
        <link rel="stylesheet" href="{{url_for('static', filename='css/categories.css')}}" />

        <link rel="stylesheet" href="{{url_for('static', filename='css/highlight.css')}}" />
        
        
    {% if css %}
    <link
        rel="stylesheet"
        href="{{url_for('static', filename='css/' +css)}}"
    />
    {% endif %}
        
        
		<!-- script -->
    
         
        
        
    {% if script %}
    <script
        src="{{url_for('static', filename='js/' + script)}}"
    defer ></script>
    {% endif %}
        
        
    <!--     Meta     -->
        {% if description %}
        <meta name="description" content="{{ description }}">
        <meta property="og:description" content="{{description}}">
        <meta property="twitter:description" content="{{description}}">
        {% endif %}
        
        {% if cover %}
        <meta property="og:image" content="https://hub.xpub.nl{{url_for('static', filename='img/' + cover)}}">
        <meta property="twitter:image" content="https://hub.xpub.nl{{url_for('static', filename='img/' + cover)}}">
        {% endif %}
	</head>
	<body>
		<nav>
            <div class="content-wrapper">
                <a href="/soupboat/~kamo/" class="return">←</a>
                <h2 class="title"> {{title }} </h2>
                <div class="date"> {{ date}} </div>
            </div>     
		</nav>
    
    <header class="project--header">
        
        {% block cover %}
        {% if cover and cover_alt %}
        <figure class="header--cover">
            <img src="{{url_for('static', filename='img/' + cover)}}" alt="{{cover_alt}}" />
        </figure>
        {% endif %}
        {% endblock %}
        <h1 class="header--title" style="transform: translate(-50%, -50%)" data-mover="2">{{ title }}</h1>
        

         <div class="header--links">
             
                     {% if project %}
                            <a href="{{url_for('static', filename='html/' + project + '/')}}" class="goto-link"> go to the project </a>
                        {% endif %}
             
             
                        {% if url %}
                        <a href="{{url}}" target="__blank">go to project</a>
                        {% endif %}

                        {% if pad %}
                        <a href="{{pad}}" target="__blank">pad</a>
                        {% endif %}

                        {% if git %}
                        <a href="{{git}}" target="__blank">git</a>
                        {% endif %}

                        {% if links %}
                            {% for link in links %}
                                <a href="{{link.url}}" target="__blank">{{link.title}}</a>
                            {% endfor %}
                        {% endif%}
        </div>
        
        <div class="header--categories">
                {% for category in categories %}
                        <span class="tag" data-tag="{{category}}" data-mover="1"
                              style="transform: translate({{range(10,90) | random }}vw, {{range(10,90) | random }}vh)"
                              >
                            {{category}}
                        </span>
                {% endfor %}
        </div>
        
    </header>
        
    
        
        
        <main class="project--content">
        
            {{content|safe}}
        
        </main>
	</body>
</html>
