zicklag · January 14, 2025 23:56
diff --git a/theme.html.j2 b/theme.html.j2
 <!doctype html>
 <html lang="en">

 <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="canonical" href="{{handle}}" />

    <style>
        img {
            width: 10em;
            border-radius: 100%;
            margin-bottom: 1em;
            box-shadow: white 0 0 20px;
        }

        main {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: auto;
        }

        hr {
            margin-bottom: 1em;
            margin-top: 2em;
        }

        .avatar-figure {
            display: flex;
            justify-content: center;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.30em
        }

        a {
            color: hsla(200, 100%, 80%);
        }

        .block {
            background-color: hsla(0, 0%, 5%, 85%);
            border-radius: 1em;
            padding: 2em;
            margin: 1em;
            max-width: min(600px, 75vw);
            width: 100%;
        }

        html {
            color: white;
            --s: 232px;
            /* control the size*/
            --c1: #1d1d1d;
            --c2: #4e4f51;
            --c3: #3c3c3c;

            background:
                repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
                repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 50%);
            background-size: var(--s) calc(var(--s)*tan(30deg));
        }
    </style>
 </head>

 <body>
    <main>
        <section>
            <figure class="avatar-figure">
                <img src="/avatar" alt="{{display_name}} avatar" />
            </figure>

            <div class="block">
                <h1>{{display_name}}</h1>

                {% if bio %}
                {{bio | markdown}}
                {% endif %}

                <hr />

                {% if tags %}
                <div class="tags">
                    <strong>Tags:</strong>
                    {% for tag in tags %}
                    <a href="{{instance_info.url}}/people#{{tag}}" target="_blank" class="tag">
                        {{tag}}
                    </a>
                    {% endfor %}
                </div>
                {% endif %}
            </div>



        </section>

        <section class="block">
            <h1>Links</h1>
            <ul>
                <li>
                    <a href="{{instance_info.url}}/{{handle}}" rel="me alternate" target="_blank" class="link">
                        Weird
                    </a>
                </li>
                {% for link in links %}
                <li>
                    <a rel="me" href="{{link.url}}" target="_blank" class="link">
                        {{link.label or link.url}}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </section>


        {% if pages %}
        <section class="block">
            <h1>Pages</h1>
            <ul>
                {% for page in pages %}
                <li>
                    <a href="{{instance_info.url}}/{{handle}}/{{page.slug}}" target="_blank" class="link">
                        {{page.name or page.slug}}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}
    </main>
 </body>

 </html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<link rel="icon" href="/favicon.png" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="canonical" href="{{handle}}" />

	<style>
	img {
	width: 10em;
	border-radius: 100%;
	margin-bottom: 1em;
	box-shadow: white 0 0 20px;
	}

	main {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: auto;
	}

	hr {
	margin-bottom: 1em;
	margin-top: 2em;
	}

	.avatar-figure {
	display: flex;
	justify-content: center;
	}

	.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.30em
	}

	a {
	color: hsla(200, 100%, 80%);
	}

	.block {
	background-color: hsla(0, 0%, 5%, 85%);
	border-radius: 1em;
	padding: 2em;
	margin: 1em;
	max-width: min(600px, 75vw);
	width: 100%;
	}

	html {
	color: white;
	--s: 232px;
	/* control the size*/
	--c1: #1d1d1d;
	--c2: #4e4f51;
	--c3: #3c3c3c;

	background:
	repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
	repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 50%);
	background-size: var(--s) calc(var(--s)*tan(30deg));
	}
	</style>
	</head>

	<body>
	<main>
	<section>
	<figure class="avatar-figure">
	<img src="/avatar" alt="{{display_name}} avatar" />
	</figure>

	<div class="block">
	<h1>{{display_name}}</h1>

	{% if bio %}
	{{bio \| markdown}}
	{% endif %}

	<hr />

	{% if tags %}
	<div class="tags">
	<strong>Tags:</strong>
	{% for tag in tags %}
	<a href="{{instance_info.url}}/people#{{tag}}" target="_blank" class="tag">
	{{tag}}
	</a>
	{% endfor %}
	</div>
	{% endif %}
	</div>



	</section>

	<section class="block">
	<h1>Links</h1>
	<ul>
	<li>
	<a href="{{instance_info.url}}/{{handle}}" rel="me alternate" target="_blank" class="link">
	Weird
	</a>
	</li>
	{% for link in links %}
	<li>
	<a rel="me" href="{{link.url}}" target="_blank" class="link">
	{{link.label or link.url}}
	</a>
	</li>
	{% endfor %}
	</ul>
	</section>


	{% if pages %}
	<section class="block">
	<h1>Pages</h1>
	<ul>
	{% for page in pages %}
	<li>
	<a href="{{instance_info.url}}/{{handle}}/{{page.slug}}" target="_blank" class="link">
	{{page.name or page.slug}}
	</a>
	</li>
	{% endfor %}
	</ul>
	</section>
	{% endif %}
	</main>
	</body>

	</html>