Basic layout with font

This commit is contained in:
Jens Kadenbach 2019-09-12 10:56:41 +02:00
parent ccdd2c2982
commit a95d3cde9b
5 changed files with 83 additions and 6 deletions

View file

@ -1,3 +1,59 @@
h1 {
color: red;
@page {
size: A4;
font-family: 'Source Sans Pro', sans-serif;
color: #333;
font-size: 15px;
margin: 70pt 60pt 70pt;
}
@page{
@bottom-right {
content: counter(page) " / " counter(pages);
}
}
body {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
.header {
width: 100%;
color: rgb(255, 105, 15);
}
.header h1 {
text-align: center;
}
.logo {
position: absolute;
top: -24pt;
right: -15pt;
max-height: 30pt;
}
.header-date {
padding-right: 30px;
text-align: right;
}
h1, h2, h3, h4,
.h1, .h2, .h3 {
font-weight: bold;
break-after: avoid-page;
page-break-after: avoid;
}
body > div {
background-color: #fff;
padding-bottom: 15px;
}
.document {
padding-top: 10pt;
}
p {
page-break-inside: avoid;
orphans: 2;
widows: 2;
}
ul {
page-break-inside: avoid;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View file

@ -9,13 +9,13 @@
{% block content %}
<h1>{% trans "Renderer" %}</h1>
<form class="form-horizontal" method="post" action="{% url 'renderer:render' %}">
{% csrf_token %}
{{ form|crispy }}
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">{% trans "Compile" %}</button>
</div>
</div>
{% csrf_token %}
{{ form|crispy }}
</form>
{{ form.media }}
{% endblock %}

View file

@ -4,11 +4,32 @@
<meta charset="UTF-8">
<title>{{ title }}</title>
<link href="{% static 'css/render.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>
<style>
@page{
@top-right {
content: "{{ date | date:'d.m.Y' }}";
}
@top-left {
content: "{{ title }}"
}
@top-right-corner {
}
}
</style>
<body>
{{ date | date:'d.m.Y' }}
<div class="container">
<img class="logo" alt="Qabel Logo" src="{% static '/images/qabel-kl.png' %}"/>
<div class="header">
<h1>{{ title }}</h1>
</div>
<div class="document">
{{ content | safe }}
</div>
</div>
</body>
</html>