Add Example alt text, merge custom css files

static/scss/_checklist.scss

-$light-gray: #fbfbfb;
-$medium-gray: #cacaca;
-$medium-gray-wiki: #f7f7f7;
-$dark-gray: #8a8a8a;
-$black: #0a0a0a;
-$white: #fefefe;
-
-$dark-blue: #23405a;
-
-.text-color-primary {
-    color: $dark-blue;
-}
-
-.cell-background-lg {
-    background-color: $light-gray;
-}
-.cell-background-mg {
-    background-color: $medium-gray;
-}
-.cell-background-wiki-mg {
-    background-color: $medium-gray-wiki;
-}
-.cell-background-dg {
-    background-color: $dark-gray;
-}
-.cell-background-black {
-    background-color: $black;
-}
-.cell-background-white {
-    background-color: $white;
-}
-
-.vertical-space {
-    margin-top: 40px;
-}
-
-.vertical-space-small {
-    margin-top: 20px;
-}
-
-.link {
-    color: $primary-color;
-}
-
-.link:hover {
-    color: scale-color($primary-color, $lightness: -20%);
-}

static/scss/_navigation.scss → static/scss/_custom.scss

+$light-gray: #fbfbfb;
+$medium-gray: #cacaca;
+$medium-gray-wiki: #f7f7f7;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+
+$dark-blue: #23405a;
+
+.text-color-primary {
+    color: $dark-blue;
+}
+
+.cell-background-lg {
+    background-color: $light-gray;
+}
+.cell-background-mg {
+    background-color: $medium-gray;
+}
+.cell-background-wiki-mg {
+    background-color: $medium-gray-wiki;
+}
+.cell-background-dg {
+    background-color: $dark-gray;
+}
+.cell-background-black {
+    background-color: $black;
+}
+.cell-background-white {
+    background-color: $white;
+}
+
+.vertical-space {
+    margin-top: 40px;
+}
+
+.vertical-space-small {
+    margin-top: 20px;
+}
+
+.link {
+    color: $primary-color;
+}
+
+.link:hover {
+    color: scale-color($primary-color, $lightness: -20%);
+}
+
 .menu .menu-text{
 	padding: 0;
 }

static/scss/app.scss

@@ -51,5 +51,4 @@
 @include motion-ui-transitions;
 @include motion-ui-animations;
 
-@import "checklist";
-@import "navigation";
+@import "custom";

wiki/migrations/0007_wikiexample_exampleimagealt.py

+# Generated by Django 2.1.3 on 2018-11-20 15:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wiki', '0006_wikiexample_exampletext'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='wikiexample',
+            name='exampleImageAlt',
+            field=models.CharField(default='Bild', max_length=400),
+        ),
+    ]

wiki/models.py

@@ -24,6 +24,7 @@ class WikiExample(models.Model):
     exampleTitle = models.CharField(max_length=200)
     exampleText = models.TextField(default="Beispiel")
     exampleImage = models.CharField(max_length=200)
+    exampleImageAlt = models.CharField(max_length=400, default="Bild")
     examplePositive = models.BooleanField(default=True)
 
     def __str__(self):

wiki/templates/wiki/index.html

@@ -47,7 +47,7 @@
                                 <div class="cell vertical-space-small">
                                     <div class="callout success example-callout">
                                         <h3>{{example.exampleTitle}}</h3>
-                                        <img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}">
+                                        <img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}" alt="{{example.exampleImageAlt}}">
                                         <p>{{example.exampleText}}</p>
                                     </div>
                                 </div>
@@ -60,7 +60,7 @@
                                 <div class="cell vertical-space-small">
                                     <div class="callout alert example-callout">
                                         <h3>{{example.exampleTitle}}</h3>
-                                        <img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}">
+                                        <img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}" alt="{{example.exampleImageAlt}}">
                                         <p>{{example.exampleText}}</p>
                                     </div>
                                 </div>