Add static styling to the friendly_cat app

friendly_cat/static/friendly_cat/css/style.css

@@ -0,0 +1,45 @@
+html,
+body {
+  background: #d0d0d0;
+  height: 100%;
+}
+
+.friendly-cat-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.friendly-cat-frame {
+  line-height: 0;
+}
+
+.friendly-cat-picture {
+  border: 1rem solid;
+  border-image-slice: 1;
+  border-width: 1rem;
+  border-image-source: linear-gradient(
+    to right,
+    red,
+    orange,
+    yellow,
+    green,
+    cyan,
+    blue,
+    violet
+  );
+}
+
+.friendly-cat-caption {
+  background-color: #404040;
+  color: #f0f0f0;
+  /* https://markdotto.com/2018/02/07/github-system-fonts/#the-stack */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  line-height: 1rem;
+  padding: 0.5rem;
+  text-align: center;
+}

friendly_cat/templates/friendly_cat/index.html

@@ -1,21 +1,31 @@
-<!DOCTYPE html>
+{% load static %}<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>ungleich_screening_task</title>
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{% static 'friendly_cat/css/style.css' %}"
+    />
   </head>
   <body>
-    <main>
+    <main class="friendly-cat-container">
       {% with default_pic_width=400 default_pic_height=400 %}
-      <figure>
+      <figure class="friendly-cat-frame">
         <img
+          class="friendly-cat-picture"
           width="{{ pic_width|default:default_pic_width }}"
           height="{{ pic_height|default:default_pic_height }}"
-          src="https://placekitten.com/{{ pic_width|default:default_pic_width }}/{{ pic_height|default:default_pic_height }}" alt="A friendly cat picture"
+          src="https://placekitten.com/{{ pic_width|default:default_pic_width }}/{{ pic_height|default:default_pic_height }}"
+          alt="A friendly cat picture"
         />
-        <figcaption>A friendly cat picture</figcaption>
+        <figcaption class="friendly-cat-caption">
+          A friendly cat picture
+        </figcaption>
       </figure>
       {% endwith %}
     </main>