Add static styling to the friendly_cat app
This commit is contained in:
parent
79c5a14c70
commit
4148b4f8cd
4 changed files with 67 additions and 5 deletions
5
Makefile
5
Makefile
|
@ -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
45
friendly_cat/static/friendly_cat/css/style.css
Normal 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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue