Add static styling to the friendly_cat app

4148b4f8 · coox · 79c5a14c · 4148b4f8 · 4148b4f8 · 4148b4f8
Commit 4148b4f8 authored May 11, 2020 by coox
4 changed files
--- a/Makefile
+++ b/Makefile
 .PHONY: \
+	build \
 	clean \
 	check_code_format \
 	format_code \
@@ -9,7 +10,11 @@
 	run \
 	test

+build:
+	python3 ./manage.py collectstatic
+
 clean:
+	rm -rf static \
 	# https://stackoverflow.com/a/41386937/162086
 	python3 -Bc "for p in __import__('pathlib').Path('.').rglob('*.py[co]'): p.unlink()"; \
 	python3 -Bc "for p in __import__('pathlib').Path('.').rglob('__pycache__'): p.rmdir()"

--- a/friendly_cat/static/friendly_cat/css/style.css
+++ b/friendly_cat/static/friendly_cat/css/style.css
+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;
+}
--- a/friendly_cat/templates/friendly_cat/index.html
+++ b/friendly_cat/templates/friendly_cat/index.html
-<!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>

--- a/ungleich_screening_task/settings.py
+++ b/ungleich_screening_task/settings.py
@@ -125,7 +125,9 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.0/howto/static-files/

+STATIC_ROOT = os.path.join(BASE_DIR, "static")
 STATIC_URL = "/static/"

+
 # Allow settings of the “Require IPv6” application to be set as environment variables
 REQUIRE_IPV6_DISABLE = env.bool("REQUIRE_IPV6_DISABLE", False)