Commit 35779a76 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg

Add styleguide page

parent 899d3401
This diff was suppressed by a .gitattributes entry.
......@@ -7,8 +7,8 @@ msgid ""
msgstr ""
"Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2016-10-01 17:44+0200\n"
"PO-Revision-Date: 2016-10-01 17:47+0200\n"
"POT-Creation-Date: 2016-10-23 00:26+0200\n"
"PO-Revision-Date: 2016-10-23 00:28+0200\n"
"Last-Translator: Sébastiaan Versteeg <se_bastiaan@outlook.com>\n"
"Language-Team: \n"
"Language: nl\n"
......@@ -16,7 +16,7 @@ msgstr ""
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
"X-Generator: Poedit 1.8.8\n"
"X-Generator: Poedit 1.8.10\n"
#: admin.py:5
msgid "Thalia administration"
......@@ -50,7 +50,7 @@ msgstr "Leden"
msgid "Documents"
msgstr "Documenten"
#: menus.py:10
#: menus.py:10 templates/singlepages/styleguide.html:192
msgid "Merchandise"
msgstr "Merchandise"
......@@ -79,58 +79,62 @@ msgid "Statistics"
msgstr "Statistieken"
#: menus.py:19
msgid "Styleguide"
msgstr "Huisstijlbijbel"
#: menus.py:20
msgid "Become Active"
msgstr "Actief Worden"
#: menus.py:20
#: menus.py:21
msgid "Wiki"
msgstr "Wiki"
#: menus.py:22
#: menus.py:23
msgid "Calendar"
msgstr "Agenda"
#: menus.py:23
#: menus.py:24
msgid "Career"
msgstr "Carrière"
#: menus.py:24
#: menus.py:25
msgid "Partners"
msgstr "Sponsoren"
#: menus.py:25
#: menus.py:26
msgid "Vacancies"
msgstr "Vacatures"
#: menus.py:27
#: menus.py:28
msgid "Education"
msgstr "Onderwijs"
#: menus.py:28
#: menus.py:29
msgid "Book Sale"
msgstr "Boekverkoop"
#: menus.py:29
#: menus.py:30
msgid "Course Overview"
msgstr "Vakkenoverzicht"
#: menus.py:30
#: menus.py:32
msgid "Submit Exam"
msgstr "Tentamen Insturen"
#: menus.py:31
#: menus.py:33
msgid "Submit Summary"
msgstr "Samenvatting Insturen"
#: menus.py:33 templates/singlepages/contact.html:5
#: menus.py:37 templates/singlepages/contact.html:5
msgid "Contact"
msgstr "Contact"
#: settings/settings.py:155
#: settings/settings.py:159
msgid "English"
msgstr "Engels"
#: settings/settings.py:156
#: settings/settings.py:160
msgid "Dutch"
msgstr "Nederlands"
......@@ -404,6 +408,7 @@ msgid "VAT number:"
msgstr "BTW-nummer:"
#: templates/singlepages/for_members.html:5
#: templates/singlepages/styleguide.html:4
msgid "for members"
msgstr "voor leden"
......@@ -483,12 +488,388 @@ msgstr "Universiteit van Amsterdam"
msgid "VU University Amsterdam"
msgstr "Vrije Universiteit Amsterdam"
#: templates/singlepages/styleguide.html:4
#: templates/singlepages/styleguide.html:7
msgid "styleguide"
msgstr "huisstijlbijbel"
#: templates/singlepages/styleguide.html:10
msgid ""
"Welcome to the Thalia styleguide. This document describes how Thalia "
"represents itself, online and offline. This styleguide is meant to be "
"followed as much as possible. Creativity is not forbidden, as long as you "
"use this styleguide as basis."
msgstr ""
"Welkom. Voor je neus staat de Thalia huisstijlbijbel. Het boekwerk dat "
"beschrijft hoe Thalia door het leven gaat, online én offline. Het is de "
"bedoeling dat deze bijbel zoveel mogelijk gevolgd wordt. Een beetje "
"creativiteit om nieuwe dingen te maken bedenken niet verboden, als je de "
"voorgedefinieerde elementen maar als basis gebruikt."
#: templates/singlepages/styleguide.html:17
msgid "Colours"
msgstr "Kleuren"
#: templates/singlepages/styleguide.html:20
msgid ""
"Thalia uses a palette of three colours. Each colour can be used as "
"background, foreground and accent colour. We've established guidelines on "
"how to use which colour in which situation."
msgstr ""
"De huisstijl van Thalia heeft een kleurenpalet van drie kleuren. Elke kleur "
"kan gebruikt worden als achtergrond-, voorgrond- en accentkleur. Er zijn "
"richtlijnen opgesteld wanneer welke kleur gebruikt dient te worden."
#: templates/singlepages/styleguide.html:25
#: templates/singlepages/styleguide.html:55
#: templates/singlepages/styleguide.html:62
#: templates/singlepages/styleguide.html:72
msgid "black"
msgstr "zwart"
#: templates/singlepages/styleguide.html:28
#: templates/singlepages/styleguide.html:36
#: templates/singlepages/styleguide.html:44
msgid "Hexadecimal"
msgstr "Hexadecimaal"
#: templates/singlepages/styleguide.html:29
#: templates/singlepages/styleguide.html:37
#: templates/singlepages/styleguide.html:45
msgid "RGB"
msgstr "RGB"
#: templates/singlepages/styleguide.html:30
#: templates/singlepages/styleguide.html:38
#: templates/singlepages/styleguide.html:46
msgid "CMYK"
msgstr "CMYK"
#: templates/singlepages/styleguide.html:33
#: templates/singlepages/styleguide.html:54
#: templates/singlepages/styleguide.html:63
#: templates/singlepages/styleguide.html:71
msgid "white"
msgstr "wit"
#: templates/singlepages/styleguide.html:41
#: templates/singlepages/styleguide.html:56
#: templates/singlepages/styleguide.html:64
#: templates/singlepages/styleguide.html:70
msgid "magenta"
msgstr "magenta"
#: templates/singlepages/styleguide.html:49
msgid "Guidelines"
msgstr "Richtlijnen"
#: templates/singlepages/styleguide.html:51
#: templates/singlepages/styleguide.html:59
#: templates/singlepages/styleguide.html:67
msgid "Option"
msgstr "Optie"
#: templates/singlepages/styleguide.html:54
#: templates/singlepages/styleguide.html:62
#: templates/singlepages/styleguide.html:70
msgid "Background"
msgstr "Achtergrond"
#: templates/singlepages/styleguide.html:55
#: templates/singlepages/styleguide.html:63
#: templates/singlepages/styleguide.html:71
msgid "Foreground"
msgstr "Voorgrond"
#: templates/singlepages/styleguide.html:56
#: templates/singlepages/styleguide.html:64
#: templates/singlepages/styleguide.html:72
msgid "Accent"
msgstr "Accent"
#: templates/singlepages/styleguide.html:75
msgid "Logo"
msgstr "Logo"
#: templates/singlepages/styleguide.html:80
#, python-format
msgid ""
"Thalia's logo consists of a 'T' formed by the pieces of a <a href=\"https://"
"en.wikipedia.org/wiki/Tangram\" target=\"_blank\">tangram</a> and the text "
"'Study Association Thalia'. The font that was used for this text is '<a href="
"\"%(MEDIA_URL)sstyleguide/font.zip\">Gill Sans MT Condensed</a>'."
msgstr ""
"Het logo van Thalia bestaat uit een 'T' gevormd uit de stukken van een <a "
"href=\"https://en.wikipedia.org/wiki/Tangram\" target=\"_blank\">tangram</a> "
"en de tekst 'Studievereniging Thalia'. Voor deze tekst is het lettertype '<a "
"href=\"%(MEDIA_URL)sstyleguide/font.zip\">Gill Sans MT Condensed</a>' "
"gebruikt."
#: templates/singlepages/styleguide.html:86
msgid ""
"There are three versions of the logo, each one has a different background "
"colour. The combinations of the colours follow the guidelines in the section "
"<a href=\"#colour\">colour</a>. In the situation that the background is not "
"white, black or magenta please follow these rules:<br />"
msgstr ""
"Er zijn drie versies van het logo, elk voor op een andere achtergrondkleur. "
"De kleurencombinaties voldoen aan de richtlijnen die in het onderdeel <a "
"href=\"#colour\">kleur</a> te vinden zijn. Daarnaast dient het volgende "
"aangehouden te worden als de achtergrond een andere kleur is:<br />"
#: templates/singlepages/styleguide.html:91
msgid "In case of a light background, use the logo for the white background."
msgstr ""
"Bij een lichte achtergrond wordt het logo voor op de witte achtergrond "
"gebruikt."
#: templates/singlepages/styleguide.html:92
msgid "In case of a dark background, use the logo for the black background."
msgstr ""
"Bij een donkere achtergrond wordt het logo voor op de zwarte achtergrond "
"gebruikt."
#: templates/singlepages/styleguide.html:93
msgid ""
"In case of a coloured background, use the logo for the magenta background."
msgstr ""
"Bij een felle gekleurde achtergrond wordt het logo voor op de magenta "
"achtergrond gebruikt."
#: templates/singlepages/styleguide.html:102
#, python-format
msgid ""
"You can download the archive with all versions of the logo in PNG, SVG and "
"Illustrator <a href=\"%(MEDIA_URL)sstyleguide/logo.zip\">here</a>."
msgstr ""
"Het zip-archief met alle versies in PNG en SVG formaat en een Illustrator "
"bronbestand is <a href=\"%(MEDIA_URL)sstyleguide/logo.zip\">hier</a> te "
"downloaden."
#: templates/singlepages/styleguide.html:107
msgid "Variations"
msgstr "Variaties"
#: templates/singlepages/styleguide.html:110
msgid ""
"Thalia's logo was designed with flexibility in mind. It's possible to create "
"a different variants for each committee, or a special version for an event "
"(for example the symposium). These variants have to use the same colour "
"combinations as the normal logo and must follow these rules:"
msgstr ""
"Het logo van Thalia is flexibel in te zetten. Zo is het mogelijk om voor "
"elke commissie een variant te maken, of een versie voor een evenement zoals "
"een symposium. Hiervoor moeten dezelfde kleurencombinaties worden "
"aangehouden als bij het normale logo. Bij een variant van het logo moet het "
"volgende worden aangehouden:"
#: templates/singlepages/styleguide.html:115
msgid "The top title is <strong>always</strong> 'THALIA'."
msgstr "De titel boven is <strong>altijd</strong> THALIA."
#: templates/singlepages/styleguide.html:116
msgid "Always use 2 or 3 lines. No more, no less."
msgstr "Er zijn maximaal 3 regels, minimaal 2."
#: templates/singlepages/styleguide.html:117
msgid "The text is vertically centered relative to the T"
msgstr "De tekst is verticaal gecentreerd ten opzichte van de T."
#: templates/singlepages/styleguide.html:118
msgid ""
"The horizontal distance between the text lines and the T is always the same."
msgstr "De tekst staat altijd op dezelfde afstand van de T."
#: templates/singlepages/styleguide.html:127
#, python-format
msgid ""
"You can download the archive with the Illustrator and EPS files to create a "
"variant <a href=\"%(MEDIA_URL)sstyleguide/variant-logo.zip\">here</a>."
msgstr ""
"Het zip-archief met Illustrator bestanden om een variatie op het logo te "
"maken kun je <a href=\"%(MEDIA_URL)sstyleguide/variant-logo.zip\">hier</a> "
"vinden."
#: templates/singlepages/styleguide.html:132
msgid "Documents & Presentations"
msgstr "Documenten & Presentaties"
#: templates/singlepages/styleguide.html:135
msgid "We've got Word-templates for:"
msgstr "Er bestaan Word-templates voor:"
#: templates/singlepages/styleguide.html:139
msgid "Contracts"
msgstr "Contracten"
#: templates/singlepages/styleguide.html:140
msgid "Invoices"
msgstr "Facturen"
#: templates/singlepages/styleguide.html:141
msgid "Letters"
msgstr "Brieven"
#: templates/singlepages/styleguide.html:142
msgid "Minutes"
msgstr "Notulen"
#: templates/singlepages/styleguide.html:143
msgid "Authorisation forms"
msgstr "Machtigingen"
#: templates/singlepages/styleguide.html:144
msgid "Registration forms"
msgstr "Inschrijvingen"
#: templates/singlepages/styleguide.html:145
msgid "Declarations"
msgstr "Declaraties"
#: templates/singlepages/styleguide.html:147
#, python-format
msgid ""
"You can download these template as <a href=\"%(MEDIA_URL)sstyleguide/"
"documents.zip\">here</a> as archive. We've also included PDF examples. In "
"case you prefer LateX then you can download the <a href="
"\"%(MEDIA_URL)sstyleguide/latex.zip\">template</a>."
msgstr ""
"Deze templates kun je <a href=\"%(MEDIA_URL)sstyleguide/documents.zip"
"\">hier</a> gezipt downloaden. Inclusief voorbeelden in PDF. Daarnaast is er "
"een <a href=\"%(MEDIA_URL)sstyleguide/latex.zip\">LateX template</a> die te "
"gebruiken is voor van alles en nog wat."
#: templates/singlepages/styleguide.html:154
#, python-format
msgid ""
"Templates for PowerPoint, Keynote and LibreOffice are available <a href="
"\"%(MEDIA_URL)sstyleguide/presentations.zip\">here</a>."
msgstr ""
"Templates voor presentaties vind je <a href=\"%(MEDIA_URL)sstyleguide/"
"presentations.zip\">hier</a> voor PowerPoint, Keynote en LibreOffice."
#: templates/singlepages/styleguide.html:159
msgid "Posters & Banners"
msgstr "Posters & Banners"
#: templates/singlepages/styleguide.html:162
msgid "The posters and banners are available in various sizes:"
msgstr "Er zijn verschillende formaten template voor de posters & banners."
#: templates/singlepages/styleguide.html:166
msgid "A3 Paper"
msgstr "Groot: voor op papier (A3)"
#: templates/singlepages/styleguide.html:167
msgid "1920x1080 for the televisions"
msgstr "1920x1080: voor op de kabelkrant"
#: templates/singlepages/styleguide.html:168
msgid "400 × 280 for the login screens"
msgstr "400x280: voor op de inlogschermen"
#: templates/singlepages/styleguide.html:169
msgid "1594 × 590 for Facebook"
msgstr "1594 × 590: voor Facebook"
#: templates/singlepages/styleguide.html:171
msgid ""
"For every size there is a dark and light version. The posters are in black, "
"white and magenta colour variants."
msgstr ""
"Er is een lichte en donkere variant voor elke versie. De posters zijn in "
"varianten van zwart, wit en magenta."
#: templates/singlepages/styleguide.html:177
#, python-format
msgid ""
"The templates are available for download <a href=\"%(MEDIA_URL)sstyleguide/"
"posters-banners.zip\">here</a>. Although, it's the task of the media "
"committee to create the posters and banners. So you're always welcome to "
"send an email to media@thalia.nu to get yourself a sleek poster for your "
"event."
msgstr ""
"Je kunt de templates <a href=\"%(MEDIA_URL)sstyleguide/posters-banners.zip"
"\">hier</a> vinden. Het is echter in principe de taak van de Mediacommissie "
"om deze posters & banners te maken. Je kunt dus altijd een mailtje sturen "
"naar media@thalia.nu voor een strakke afbeelding bij je evenement."
#: templates/singlepages/styleguide.html:185
msgid ""
"Still looking for something different? No problem! Let yourself go. Just "
"make sure you follow the 'rules'. And in case you get lost in the land of "
"Photoshop and Illustrator, just send an email to media@thalia.nu. They're "
"always ready to help you."
msgstr ""
"Wil je iets anders dan deze template? Dan kan dat ook, leef je uit. Maar "
"zorg dat je in dezelfde stijl blijft. Mocht je het allemaal niet meer weten "
"dan kun je altijd mailen naar media@thalia.nu voor een custom poster, want "
"daar bestaat die commissie tenslotte voor."
#: templates/singlepages/styleguide.html:195
msgid ""
"We make an exception for the colour palette of the merchandise if it's not "
"possible to print in full colour. The preference is to print magenta on "
"black."
msgstr ""
"De merchandise is een uitzondering van het kleurenpalet wat het logo "
"betreft. Als het enkel mogelijk is om in één kleur te drukken dan is er de "
"voorkeur om magenta op zwart te gebruiken."
#: templates/singlepages/styleguide.html:201
#: templates/singlepages/styleguide.html:220
msgid "Introshirts"
msgstr "Introshirts"
#: templates/singlepages/styleguide.html:204
#, python-format
msgid ""
"The introshirts too are an exception. These shirts are in different colours "
"every year. The templates for the shirts can be found <a href="
"\"%(MEDIA_URL)sstyleguide/introshirt.zip\">here</a>. The sponsorlogos and "
"texts can be changed to those you prefer."
msgstr ""
"Ook de introshirts zijn een uitzondering op het kleurenpalet. Het is "
"toegestaan om elke kleur te gebruiken die je maar wilt, zolang het maar niet "
"vloekt. De basisdesigns voor de introshirts zijn <a href="
"\"%(MEDIA_URL)sstyleguide/introshirt.zip\">hier</a> te vinden. Logo's van "
"sponsoren en teksten zijn naar voorkeur te vervangen."
#: templates/singlepages/styleguide.html:210
msgid "Downloads"
msgstr "Downloads"
#: templates/singlepages/styleguide.html:213
msgid "Font"
msgstr "Lettertype"
#: templates/singlepages/styleguide.html:214
msgid "Logos"
msgstr "Logo’s"
#: templates/singlepages/styleguide.html:215
msgid "Logo variant template"
msgstr "Templates logo varianten"
#: templates/singlepages/styleguide.html:216
msgid "Word documents"
msgstr "Word-documenten"
#: templates/singlepages/styleguide.html:217
msgid "LateX template"
msgstr "LateX-template"
#: templates/singlepages/styleguide.html:218
msgid "Presentation templates"
msgstr "Presentatie-templates"
#: templates/singlepages/styleguide.html:219
msgid "Poster templates"
msgstr "Posters & Banners"
#~ msgid "Profile Picture"
#~ msgstr "Profielafbeelding"
#~ msgid "Logout"
#~ msgstr "Uitloggen"
#~ msgid "You've been logged out successfully."
#~ msgstr "Je bent succesvol uitgelogd."
......
......@@ -16,6 +16,7 @@ main = [
'submenu': [
{'title': _('Photos'), 'name': 'photos:index'},
{'title': _('Statistics'), 'name': 'statistics'},
{'title': _('Styleguide'), 'name': 'styleguide'},
{'title': _('Become Active'), 'name': 'become-active'},
{'title': _('Wiki'), 'url': '/wiki/'},
]},
......
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
{% extends "base.html" %}
{% load i18n static %}
{% block title %}{% trans "styleguide"|capfirst %} — {% trans "for members"|capfirst %} — {{ block.super }}{% endblock %}
{% block body %}
<h1>{% trans "styleguide"|capfirst %}</h1>
<p>
{% blocktrans trimmed %}
Welcome to the Thalia styleguide. This document describes how Thalia represents itself, online and offline.
This styleguide is meant to be followed as much as possible. Creativity is not forbidden, as long as you use this styleguide as basis.
{% endblocktrans %}
</p>
<h1 id="colour">{% trans "Colours" %}</h1>
<p>
{% blocktrans trimmed %}
Thalia uses a palette of three colours. Each colour can be used as background, foreground and accent colour. We've established guidelines on how to use which colour in which situation.
{% endblocktrans %}
</p>
<h3>{% trans "black"|capfirst %}</h3>
<p>
{% trans "Hexadecimal" %}: #000000<br />
{% trans "RGB" %}: 0 / 0 / 0<br />
{% trans "CMYK" %}: 91 / 79 / 62 / 92
</p>
<h3>{% trans "white"|capfirst %}</h3>
<p>
{% trans "Hexadecimal" %}: #FFFFFF<br />
{% trans "RGB" %}: 255 / 255 / 255<br />
{% trans "CMYK" %}: 0 / 0 / 0 / 0
</p>
<h3>{% trans "magenta"|capfirst %}</h3>
<p>
{% trans "Hexadecimal" %}: #E62272<br />
{% trans "RGB" %}: 230 / 34 / 114<br />
{% trans "CMYK" %}: 0 / 94 / 21 / 0
</p>
<h2>{% trans "Guidelines" %}</h2>
<h3>{% trans "Option" %} 1</h3>
<p>
{% trans "Background" %}: {% trans "white" %}<br />
{% trans "Foreground" %}: {% trans "black" %}<br />
{% trans "Accent" %}: {% trans "magenta" %}
</p>
<h3>{% trans "Option" %} 3</h3>
<p>
{% trans "Background" %}: {% trans "black" %}<br />
{% trans "Foreground" %}: {% trans "white" %}<br />
{% trans "Accent" %}: {% trans "magenta" %}
</p>
<h3>{% trans "Option" %} 3</h3>
<p>
{% trans "Background" %}: {% trans "magenta" %}<br />
{% trans "Foreground" %}: {% trans "white" %}<br />
{% trans "Accent" %}: {% trans "black" %}
</p>
<h1>{% trans "Logo" %}</h1>
<h2>Basis</h2>
<p>
{% blocktrans trimmed %}
Thalia's logo consists of a 'T' formed by the pieces of a <a href="https://en.wikipedia.org/wiki/Tangram" target="_blank">tangram</a> and the text 'Study Association Thalia'. The font that was used for this text is '<a href="{{ MEDIA_URL }}styleguide/font.zip">Gill Sans MT Condensed</a>'.
{% endblocktrans %}
</p>
<p>
{% blocktrans trimmed %}
There are three versions of the logo, each one has a different background colour. The combinations of the colours follow the guidelines in the section <a href="#colour">colour</a>.
In the situation that the background is not white, black or magenta please follow these rules:<br />
{% endblocktrans %}
<ul>
<li>{% trans "In case of a light background, use the logo for the white background." %}</li>
<li>{% trans "In case of a dark background, use the logo for the black background." %}</li>
<li>{% trans "In case of a coloured background, use the logo for the magenta background." %}</li>
</ul>
</p>
<p>
<img src="{% static 'styleguide/images/logo-versions-example.png' %}" />
</p>
<p>
{% blocktrans trimmed %}
You can download the archive with all versions of the logo in PNG, SVG and Illustrator <a href="{{ MEDIA_URL }}styleguide/logo.zip">here</a>.
{% endblocktrans %}
</p>
<h2>{% trans "Variations" %}</h2>
<p>
{% blocktrans trimmed %}
Thalia's logo was designed with flexibility in mind. It's possible to create a different variants for each committee, or a special version for an event (for example the symposium).
These variants have to use the same colour combinations as the normal logo and must follow these rules:
{% endblocktrans %}
<ul>
<li>{% trans "The top title is <strong>always</strong> 'THALIA'." %}</li>
<li>{% trans "Always use 2 or 3 lines. No more, no less." %}</li>
<li>{% trans "The text is vertically centered relative to the T" %}</li>
<li>{% trans "The horizontal distance between the text lines and the T is always the same." %}</li>
</ul>
</p>
<p>
<img src="{% static 'styleguide/images/logo-variants-example.png' %}" />
</p>
<p>
{% blocktrans trimmed %}
You can download the archive with the Illustrator and EPS files to create a variant <a href="{{ MEDIA_URL }}styleguide/variant-logo.zip">here</a>.
{% endblocktrans %}
</p>
<h1>{% trans "Documents & Presentations" %}</h1>
<p>
{% blocktrans trimmed %}