diff options
| -rw-r--r-- | pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md | 26 | ||||
| -rw-r--r-- | pydis_site/static/css/content/page.css | 20 |
2 files changed, 46 insertions, 0 deletions
diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md index 303a2c0f..67666428 100644 --- a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md +++ b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md @@ -159,3 +159,29 @@ import os path = os.path.join("foo", "bar") ``` + +--- + +### HTML Attributes +To add HTML attributes to certain lines/paragraphs, [see this page](https://python-markdown.github.io/extensions/attr_list/#the-list) for the format and where to put it. + +This can be useful for setting the image size when adding an image using markdown (see the [Image Captions](#image-captions) section for an example), or for adding bulma styles to certain elements (like the warning notification [here](/pages/guides/pydis-guides/contributing/sir-lancebot#setup-instructions)). +**This should be used sparingly, as it reduces readability and simplicity of the article.** + +--- + +### Image Captions +To add an image caption, place a sentence with italics *right below* the image link + +**Markdown:** +```nohighlight +{: width="400" } +*Summmer Code Jam 2020 banner with event information.* +``` + +**Output:** + +{: width="400"} +*Summer Code Jam 2020 banner with event information.* + +> Note: To display a regular italicized line below an image, leave an empty line between the two. diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css index 57d7472b..97b297b2 100644 --- a/pydis_site/static/css/content/page.css +++ b/pydis_site/static/css/content/page.css @@ -29,3 +29,23 @@ code.hljs { :is(h1, h2, h3, h4, h5, h6):hover > .headerlink { display: inline; } + +/* + * Display <em> tags immediately following <img> tags like figure subcaptions. + * Note: There must not be a newline between the image and the italicized line + * for this to work. Otherwise, it's regular markdown. + * + * Image caption: + * + *  + * *This is my caption.* + * + */ +img + em { + /* Place the caption on it's own line */ + display: block; + white-space: pre; + + /* Style */ + font-size: .875em; +} |