CentreForDigitalHumanities · mhkuu · Sep 30, 2021 · Oct 1, 2021 · Oct 4, 2021 · Oct 4, 2021
diff --git a/README.md b/README.md
@@ -57,6 +57,18 @@ During debugging, we additionally use the [Django Debug Toolbar](https://django-
 
 And then uncomment the lines referring to the toolbar in `timealign/settings.py`.
 
+## Localization
+To add site localizations use the following command:
+
+    # Go to the timealign folder
+    cd timealign
+    # To add a .po file that collects all the different message variables in templates
+    django-admin makemessages -l <language iso> -i <virtual environment folder name to ignore>
+    # or add them all directly
+    django-admin makemessages --all
+    # To compile the translated texts
+    django-admin compilemessages
+
 ## Documentation
 
 You can find ERD diagrams of the applications in [`doc/models`](doc/models/README.md).

diff --git a/core/static/core/images/MDS-crop.png b/core/static/core/images/MDS-crop.png
diff --git a/core/static/core/images/MDS.png b/core/static/core/images/MDS.png
diff --git a/core/static/core/landing-nav.css b/core/static/core/landing-nav.css
@@ -0,0 +1,106 @@
+/* https://work.smarchal.com/twbscolor/3.3.7/css/000000000000ffffffffcd000 */
+
+.navbar {
+    border: 0;
+}
+
+.navbar-inverse {
+    background-color: var(--color-main);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: .1rem;
+}
+
+.navbar-inverse .navbar-brand {
+    color: var(--color-text-dark);
+}
+
+.navbar-inverse .navbar-text {
+    color: var(--color-text-dark);
+}
+
+.navbar-inverse .navbar-nav > li > a {
+    color: var(--color-text-dark);
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+.navbar-inverse .navbar-nav > li > a.active {
+    color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-nav > li > a.active:hover,
+.navbar-inverse .navbar-nav > li > a.active:focus {
+    background-color: transparent;
+    cursor: auto;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
+    background-color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-nav > li > a:active {
+    background-color: var(--color-accent);
+}
+
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+    background-color: #080808;
+}
+
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+    background-color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-toggle {
+    background-color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+    background-color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-toggle .icon-bar {
+    color: var(--color-text-light);
+}
+
+.navbar-inverse .navbar-link {
+    color: var(--color-text-dark);
+}
+
+.navbar-inverse .navbar-link:hover {
+    color: var(--color-text-light);
+}
+
+@media (max-width: 767px) {
+    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+        color: var(--color-text-dark);
+    }
+
+    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
+    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
+        background-color: var(--color-primary);
+    }
+}
+
+.navbar .dropdown-menu {
+    background-color: var(--color-main);
+}
+
+.navbar .dropdown-menu .dropdown-item {
+    display: block;
+    color: var(--color-text-dark);
+    text-decoration: none;
+    padding: 1rem;
+    line-height: 1;
+}
+
+.navbar .dropdown-menu .dropdown-item:hover,
+.navbar .dropdown-menu .dropdown-item:focus {
+    background-color: var(--color-primary);
+    color: var(--color-text-light);
+}
diff --git a/core/static/core/landing-style.css b/core/static/core/landing-style.css
@@ -0,0 +1,130 @@
+:root {
+    --color-main: #ffcd00;
+    --color-primary: #24a793;
+    --color-accent: #ffe6ab;
+    --color-text-dark: #000000;
+    --color-text-light: #ffffff;
+}
+
+body {
+    background-color: var(--color-text-light);
+    font-size: 1.8rem;
+    line-height: 1.8;
+    font-family: Open Sans,sans-serif;
+}
+
+footer {
+    border-top: 2px solid var(--color-main);
+    margin-top: 20px;
+    padding-top: 20px;
+}
+
+footer img {
+    margin: auto;
+    display: block;
+}
+
+footer p {
+    text-align: center;
+}
+
+hr {
+    border-top: 2px solid var(--color-text-light);
+}
+
+header.masthead {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    background-color:  var(--color-main);
+}
+
+header.masthead .masthead-heading {
+    font-size: 6rem;
+}
+
+header.masthead .masthead-subheading {
+    font-size: 2rem;
+}
+
+@media (min-width: 767px) {
+    header.masthead {
+        padding-top: calc(10rem + 55px);
+        padding-bottom: 10rem;
+    }
+}
+
+a.main {
+    background-color:  var(--color-primary);
+    color:  var(--color-text-light);
+}
+
+a.main:hover,
+a.main:focus {
+    background-color:  var(--color-accent);
+    color:  var(--color-text-dark);
+    border: 1px solid var(--color-text-light);
+}
+
+section {
+    padding: 4rem 0 6rem;
+}
+
+section.secondary-section {
+    background-color:  var(--color-accent);
+}
+
+.mt-2 {
+    margin-top: 2rem;
+}
+
+.mt-4 {
+    margin-top: 4rem;
+}
+
+.mb-2 {
+    margin-bottom: 2rem;
+}
+
+.mb-4 {
+    margin-bottom: 4rem;
+}
+
+.m-2 {
+    margin: 2rem;
+}
+
+.m-4 {
+    margin: 4rem;
+}
+
+hr.primary {
+    border-color:  var(--color-main);
+}
+
+div.card {
+    background-color:  var(--color-main);
+    padding: 0.5rem 1rem 3rem;
+    border-radius: 4px;
+    border: 2px solid #eeeeee;
+}
+
+div.news {
+    margin: 0.5rem 1rem 3rem;
+    border-radius: 4px;
+    border: 2px solid var(--color-main);
+}
+
+div.news-heading {
+    background-color: var(--color-main);
+    padding: 1rem;
+    min-height: 55px;
+}
+
+div.news-body {
+    padding: 1rem;
+    background-color: transparent;
+}
+
+div.news-body a {
+    font-weight: bold;
+}
diff --git a/core/templates/landing/_menu.html b/core/templates/landing/_menu.html
diff --git a/core/templates/landing/base.html b/core/templates/landing/base.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+{% load static %}
+{% load i18n %}
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="{% static 'core/images/favicon.ico' %}">
+
+    <title>Translation Mining</title>
+
+    {# Load the tag library #}
+    {% load bootstrap3 %}
+
+    {# Load CSS and JavaScript #}
+    {% bootstrap_css %}
+    {% bootstrap_javascript jquery=1 %}
+
+    {# Load the SmartMenus library #}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.css">
+
+    {# Load the qTip library #}
+    <script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">
+
+    {# Load the Select2 library #}
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
+
+    {# Custom CSS #}
+    <link rel="stylesheet" type="text/css" href="{% static 'core/landing-style.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'core/landing-nav.css' %}"/>
+
+    {# Allow for extra scripts and stylesheets #}
+    {% block head %}{% endblock %}
+</head>
+
+<body>
+
+<nav class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+        <a class="navbar-brand" href="{% url 'core:home'%}">Parallel Corpora and Linguistic Analysis</a>
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
+                    aria-controls="navbar">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Events <span class="caret"></span>
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="#">Conferences</a>
+                        <a class="dropdown-item" href="#">Workshops</a>
+                        <a class="dropdown-item" href="#">Courses</a>
+                    </div>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Publications <span class="caret"></span>
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="#">Publication type</a>
+                        <a class="dropdown-item" href="#">Empirical topic</a>
+                        <a class="dropdown-item" href="#">Languages</a>
+                    </div>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link">Knowledge Utilization</a>
+                </li>
+                {% block menulist %}{% endblock %}
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                {% get_current_language as LANGUAGE_CODE %}
+                {% get_available_languages as languages %}
+                {% for lang_code, lang_name in languages %}
+                    {% if LANGUAGE_CODE == lang_code %}
+                        <li><a href="#" class="active">{{ lang_code }}</a></li>
+                    {% else %}
+                        <li><a href="{% url 'core:activate_language' lang_code %}">{{ lang_code }}</a></li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div>{% bootstrap_messages %}</div>
+
+{% block content %}{% endblock %}
+
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3">
+                <img class="img-responsive" alt="Logo Utrecht University" src="{% static 'core/images/uu-logo.svg' %}">
+            </div>
+            <div class="col-sm-6">
+                <p>
+                    &copy; 2021 <a href="https://www.uu.nl/en/research/utrecht-institute-of-linguistics-ots" target="_blank">UiL OTS</a>, Utrecht
+                    University.
+                    <br/>
+                    Research funded by <a href="https://www.nwo.nl/en" target="_blank">NWO</a> under grant 360-80-070.
+                    <br/>
+                    Powered by the <a href="http://dig.hum.uu.nl/" target="_blank">Digital Humanities Lab</a>, Utrecht University.
+                </p>
+            </div>
+            <div class="col-sm-3">
+                <img class="img-responsive" alt="Logo NWO" src="{% static 'core/images/nwo-logo.jpg' %}" style="height: 80px; margin-bottom: 20px;">
+            </div>
+        </div>
+    </div>
+</footer>
+</body>
+</html>