learning-website-django1-5  Exercise 3: Look at It
================================================

Tests prove the rules; they cannot tell you the page looks right. Serve the real
content and look at it.

1. Serve the imported content (Chapter 4's database) with the development server:

     set LW_CONTENT_ROOT=<path to>\content
     python manage.py runserver 127.0.0.1:8765 --noreload

2. Fetch the stylesheet through the server, with curl and the host name set
   without touching a system file:

     curl --resolve languages.localhost:8765:127.0.0.1 http://languages.localhost:8765/static/theme/tokens.css
     expect 200 (it was 200)

3. Take a screenshot of a page from each kind of site with headless Chrome.
   --host-resolver-rules maps the site's name to your own machine inside Chrome,
   so no hosts file is needed:

     chrome --headless=new --window-size=1100,1400 ^
       --host-resolver-rules="MAP languages.localhost 127.0.0.1" ^
       --screenshot=languages.png ^
       http://languages.localhost:8765/hungary/hungarian-basic-3/hungarian_basic_conversation_3_1/

   (Repeat for programming.localhost with a Python lesson, and systems.localhost
   with the Debian setup chapter.)

What the screenshots showed (looked at, not just generated)
----------------------------------------------------------
- Languages: a site bar with a violet line under it; below it the chapter title
  as a large heading (made from the banner, since the fragment has no h1), then
  the Hungarian course name in its OWN green, the dialog cards and the purple
  speaker letters. The page's chrome and the lesson's colours coexist.
- Systems: the same layout with a salmon line, the Debian chapter in its pink,
  its green tip box, its yellow warning box and its table, all as in the live
  site.
- The languages and systems screenshots were looked at; a third (programming) was
  generated but not examined. All were taken on the development server, at a
  desktop width only. A phone width and print preview are still to be checked (Chapter 12
  of the framework course lists them).

The accent colours and their contrast (accent_table.py, from the project):

"""accent_table.py: contrast of each site's accent colour on its dark surface and on the page background."""
from config.sites_config import SITE_STYLE

SURFACES = {"language": "#1a1d27", "technical": "#161b22"}
BG = "#0f1117"


def luminance(h):
    h = h.lstrip("#")
    r, g, b = (int(h[i:i + 2], 16) / 255 for i in (0, 2, 4))
    f = lambda c: c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)


def contrast(a, b):
    hi, lo = sorted((luminance(a), luminance(b)), reverse=True)
    return (hi + 0.05) / (lo + 0.05)


print(f"{'site':<16}{'accent':<9}{'family':<11}{'on surface':>11}{'on background':>15}")
for site, s in SITE_STYLE.items():
    print(f"{site:<16}{s['accent']:<9}{s['family']:<11}{contrast(s['accent'], SURFACES[s['family']]):>11.2f}{contrast(s['accent'], BG):>15.2f}")
print("WCAG AA needs 4.5 for normal-size text")

site            accent   family      on surface  on background
languages       #a78bfa  language          6.18           6.93
webdevelopment  #38bdf8  technical         8.07           8.81
programming     #44b78b  technical         6.91           7.54
systems         #f0938a  technical         7.62           8.31
ai              #fbbf24  technical        10.36          11.30
humanities      #fb923c  language          7.43           8.34
lifeskills      #6ee7b7  language         11.03          12.38
creative        #f472b6  technical         6.53           7.12
WCAG AA needs 4.5 for normal-size text

Decisions to know about
-----------------------
- The language and technical neutral colours are the two sets measured in
  Learning Website: Framework & Architecture 4. Humanities and life skills use
  the language set because their content is prose; change that in SITE_STYLE if
  you disagree.
- Each language lesson keeps its own colour, and the Japanese red (#d64550) is
  still only 3.86 against the language surface. That colour belongs to the
  lessons' own CSS, not to the shared theme; fixing it means a lighter text
  variant in tokens.css (see the same chapter).

WHY THIS WORKS AS AN ANSWER
---------------------------
Opening the page in a real browser caught nothing the tests had missed here, but
it is the only check that can tell you the page is not ugly. It is quick,
repeatable, and needs no extra tools beyond the browser already installed.