coox
/
ungleich_hack_3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add static styling to the friendly_cat app

This commit is contained in:
coox 2020-05-11 19:57:17 +02:00
parent 79c5a14c70
commit 4148b4f8cd
4 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@ -1,4 +1,5 @@
.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()"

45
friendly_cat/static/friendly_cat/css/style.css Normal file
View File

@ -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;
}

20
friendly_cat/templates/friendly_cat/index.html
View File

@ -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>

2
ungleich_screening_task/settings.py
View File

@ -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)