py-styles

Raw CSS to make your site look like python code. Built mainly for my portfolio & will be missing functionality. Feel free to submit a PR or request functionality in a issue.

Preview

Live preview

Documentation

All the python related styling is kept here, feel free to use it in your own site.

Defining functions & returns

<h3 id="about" class="def return-str">about</h3>

Return types

• return-str
• return-int
• return-list
• return-none
• return-dict

Adding docstrings

<h3 id="about" class="def return-str">about</h3>
<div class="func">
    <p class="docstring">Who I am.</p>
</div>

Comments

Will underline if link provided.

<p class="comment">
    <a href="https://github.com/WardPearce/Paycord" target="_blank">https://github.com/WardPearce/Paycord</a>
</p>

Variables

Assigning

<div class="var"><p class="name">paaster</p><div class="bool-true"></div></div>
<div class="var"><p class="name">unofficial_dathost_interface</p><div class="bool-false"></div></div>

Bool

<div class="var"><p class="name">paaster</p><div class="bool-true"></div></div>
<div class="var"><p class="name">unofficial_dathost_interface</p><div class="bool-false"></div></div>

Dict

<div class="dict">
    <ul>
        <li>
            <p class="str">email</p>
            <p class="str"><a href="mailto:wardpearce@pm.me">wardpearce@pm.me</a></p>
        </li>
        <li>
            <p class="str">matrix</p>
            <p class="str"><a href="https://matrix.to/#/@wardp:matrix.org" target="_blank">@wardp:matrix.org</a></p>
        </li>
        <li>
            <p class="str">github</p>
            <p class="str"><a href="https://github.com/WardPearce/" target="_blank">github.com/WardPearce</a></p>
        </li>
    </ul>
</div>

List

<div class="list">
    <ul>
        <li><p class="str">Python</p></li>
        <li><p class="str">Typescript</p></li>
        <li><p class="str">Svelte</p></li>
        <li><p class="str">MySQL</p></li>
        <li><p class="str">Asyncio</p></li>
        <li><p class="str">Docker</p></li>
        <li><p class="str">Django</p></li>
        <li><p class="str">Vue</p></li>
        <li><p class="str">MongoDB</p></li>
        <li><p class="str">AWS</p></li>
        <li><p class="str">Linux</p></li>
        <li><p class="str">REST APIs</p></li>
        <li><p class="str">Nginx / Apache</p></li>
        <li><p class="str">S3</p></li>
        <li><p class="str">Backblaze</p></li>
        <li><p class="str">SqlAlchemy</p></li>
    </ul>
</div>

String

<p class="str">Modern typed requests for Python 3 built on-top of HTTPX.</p>

Integer

<p class="int">0</p>

Return

<div class="return">
    <p class="str">Modern typed requests for Python 3 built on-top of HTTPX.</p>
</div>

Call

<p class="call">about</p>

Conditionals

Conditionals is the most complex part of py-styles, basically every 2nd li is treated as the logic for the conditional defined in the li above it.

Adding the else class to the li & leaving it blank is how you define a else, otherwise it will be a elif.

<div class="conditional">
    <ul>
        <li>paaster</li>
        <li>
            <p class="comment">
                <a href="https://github.com/WardPearce/paaster" target="_blank">https://github.com/WardPearce/paaster</a>
            </p>
            <div class="return">
                <p class="str">Paaster is a secure by default end to end encrypted pastebin built with the objective of simplicity.</p>
            </div>
        </li>

        <li>unofficial_dathost_interface</li>
        <li>
            <p class="comment">
                <a href="https://github.com/UnofficialDathost/Interface" target="_blank">https://github.com/UnofficialDathost/Interface</a>
            </p>
            <div class="return">
                <p class="str">Improved serverless interface for Dathost!</p>
            </div>
        </li>
    </ul>
</div>