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

Add static styling to the friendly_cat app

Browse source
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: \ .PHONY: \
build \
clean \ clean \
check_code_format \ check_code_format \
format_code \ format_code \
@ -9,7 +10,11 @@
run \ run \
test test
build:
python3 ./manage.py collectstatic
clean: clean:
rm -rf static \
# https://stackoverflow.com/a/41386937/162086 # 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('*.py[co]'): p.unlink()"; \
python3 -Bc "for p in __import__('pathlib').Path('.').rglob('__pycache__'): p.rmdir()" 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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>ungleich_screening_task</title> <title>ungleich_screening_task</title>
<link
rel="stylesheet"
type="text/css"
href="{% static 'friendly_cat/css/style.css' %}"
/>
</head> </head>
<body> <body>
<main> <main class="friendly-cat-container">
{% with default_pic_width=400 default_pic_height=400 %} {% with default_pic_width=400 default_pic_height=400 %}
<figure> <figure class="friendly-cat-frame">
<img <img
class="friendly-cat-picture"
width="{{ pic_width|default:default_pic_width }}" width="{{ pic_width|default:default_pic_width }}"
height="{{ pic_height|default:default_pic_height }}" 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> </figure>
{% endwith %} {% endwith %}
</main> </main>

2
ungleich_screening_task/settings.py
View file

@ -125,7 +125,9 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images) # Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/ # https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = "/static/" STATIC_URL = "/static/"
# Allow settings of the “Require IPv6” application to be set as environment variables # Allow settings of the “Require IPv6” application to be set as environment variables
REQUIRE_IPV6_DISABLE = env.bool("REQUIRE_IPV6_DISABLE", False) REQUIRE_IPV6_DISABLE = env.bool("REQUIRE_IPV6_DISABLE", False)