gitar

{% extends "website/base.djhtml" %}

{% load i18n %}

{% load static %}

{% block title %}{{repository_name}}/{{file_name}} | Gitar{% endblock title %}

{% block stylesheets %}

    {{ block.super }}

    <link rel="stylesheet" type="text/css" href="/static/website/syntax.css" />

    <link rel="stylesheet" type="text/css" href="/static/gitar/css/file.css" />

    <style>

    table.highlight tr {

        line-height: 15px;

    }

    /* These vendor prefixes are still necessary, yeah...*/

    .line-number {

      -moz-user-select: none;

      -webkit-user-select: none;

      -ms-user-select: none;

      user-select: none;

    }

    </style>

{% endblock stylesheets %}

{% block description %}

Content of {{ file_name }} in {{ repository_name }}

{% endblock description %}

{% block header %}

<header>

    <a href="https://maartenv.be"><label for="nav-drawer-toggle">≡</label></a>

    <h1>{{ repository_name }}</h1>  

</header>

{% endblock header %}

{% comment %}

{% block stylesheets %}

<link href="/static/website/materialize/css/google-icons.css" rel="stylesheet" />

<link href="/static/website/materialize/css/materialize.css" rel="stylesheet" media="screen, projection" />

<!--<link rel="stylesheet href="https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css">-->

<!-- TODO: Download Fira Code stylesheet and serve via the static folder!

    This is necessary BEFORE activating the Fira Code ligature font, because

    using a CDN I do not controll brings in tonnes of JS code from Google,

    Amazon, and whatnot. -->

<!--<style>

td {

	padding: 0 0 0 0;

}

pre {

	margin-top: 10px;

	margin-bottom: 10px;

}

table {

	line-height: 0px;

	padding-top: 0px;

	padding-bottom: 0px;

	border-spacing: 0 0;

	margin-top: 0px;

	margin-bottom: 0px;

}

</style>-->

{# For the syntax coloring of Gitar. TODO for later. #}

<link rel="stylesheet" type="text/css" href="/static/website/syntax.css" />

<link rel="stylesheet" type="text/css" href="/static/gitar/css/file.css" />

{% endblock stylesheets %}

{% endcomment %}

<!-- NOTE: Currently I'm using an ordered list to get numbers, but now I can't

link to the different lines. So until I figure out a way to make tables behave

correctly, this ought to be the temporary solution-->

{% block main %}

<section style="font-family: 'Fira Code', monospace;">

    <h3>{{file_name}}</h3>

	<table class="highlight">

		{% for line in content %}

		<tr>

            <td id="{{ forloop.counter }}" class="line-number" style=":hover { background-color: #00E676;}">

                <a style=":hover { background-color: #00e676;}" href="#{{ forloop.counter }}">

                <pre>{{ forloop.counter }}</pre></a></td>

			<td><pre>{{ line|safe }}</pre></td>

		</tr>

		{% endfor %}

	</table>

</section>

{% endblock main %}