Add print styles for payload and docs pages

Open Beginner friendly
#93 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
frontend

Research direction

Start in globals.css and identify the selectors used by the header, sidebars, navigation, article, and code blocks. Emulate print media or open print preview on the SQL injection payload page to check the current layout. Done means printing shows only the article with black text on white, visible link URLs, and code blocks kept together where possible.

Written by the indexing model from the issue text.

Description

enhancement Website

Summary

There are no print styles. Printing or saving a payload page to PDF includes the site header, the full sidebar and the contents panel, so the article loses width and wastes pages.

Steps to reproduce

  1. Open /OWASP-Hunting/payloads/sql-injection/.
  2. Emulate print media (DevTools, Rendering, Emulate CSS media type: print) or use Print preview.

Expected

Only the article is printed: no header, sidebar or contents panel, black text on white, and link URLs shown.

Actual

The layout is identical to the screen layout, with the header, sidebar and contents panel.

Page under print media emulation

Suggested fix

Add an @media print block in globals.css that hides header, sidebars and navigation, resets colours, removes the max-width, and avoids page breaks inside code blocks.

Environment

website branch, Chromium print emulation.

Dominant language
Python
Stars
22
Forks
14
Avg merge
14h 14m
Merged PRs (30d)
29

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from OWASP/OWASP-Hunting

All issues in OWASP/OWASP-Hunting

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.