Skip to content

feat: add Reader theme #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zicklag merged 3 commits into from
Feb 28, 2025
Merged

feat: add Reader theme #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ac13ed
feat: add reader theme
sameoldlab Feb 26, 2025
81f2180
clean up / formatting
sameoldlab Feb 26, 2025
0a8437d
Merge branch 'muni-town:main' into feat/theme
sameoldlab Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 136 additions & 0 deletions src/lib/themes/reader/page.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!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" />
<title>{{title}} | {{profile.display_name}}</title>

<style>
/* Comment out Google Fonts from Google CDN to prevent tracking. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Lora:ital@0;1&display=swap');

body {
--body: Lora, Cambria, Cochin, Times, sans-serif;
--head: 'Libre Caslon Display', Georgia, 'Times New Roman' Times, serif;
color-scheme: dark light;
background-color: black white;
text-rendering: optimizeLegibility;
}
.content {
display: flex;
align-items: start;
gap: 2rem;
padding-block: 4rem;
/* flex-wrap: wrap; */
padding-inline: 2rem;
}

main {
height: 100%;
min-height: 100dvh;
font-weight: normal;
font-family: var(--body);
}
nav {
position: sticky;
top: 4rem;
opacity: .7;
font-family: var(--body);
a {
text-decoration: none;
}
transition: opacity 200ms ease-out;
&:hover {
opacity: 1;
}
}
h1,h2 {
font-family: var(--head);
font-size: 1.125em;
font-weight: 500;
}
h1 {
font-size: 1.25em;
margin: 0;
}

ul {padding:0;}
li {
list-style-type: none;
display:flex;
}
a, p {
max-width: 45ch;
hypens: auto;
text-wrap: pretty;
}
a {
color: inherit;
flex-grow: 2;
transition: text-decoration 200ms ease-in-out;
&:hover {
text-decoration: underline;
}
}
.back {
display: flex;
align-items: center;
justify-contents: start;
gap: .25em;
}
.cozy {
background-color: #E4DFD2;
color: #32281B;
}
.oled {
background-color: oklch(0 0 0);
color: oklch(.9 0 0);
}
.dark {
background-color: oklch(.26 0 0);
color: oklch(.85 0 0);
}
.brut {
--body: Inter, "San Francisco", Calibri, "Gill Sans",
Oxygen, Ubuntu, system-ui, -apple-system, Roboto,
sans-serif;
--head: var(--body);
h1, h2 {
font-size: 1rem;
font-weight: 500;
color: oklch(.9 0 0);
}
p, a {
color: oklch(.76 0 0);
}
}
</style>
</head>

<!-- Add a class to change the style [cozy, brut, oled, dark] -->
<body class="cozy">
<div class="content">
<nav>
<a class="back" href="https://{{profile.handle}}.weird.one/{{handle}}">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
</path>
</svg>
Home
</a>
</nav>
<main>
<header>

<h1>{{title}}</h1>
</header>
<article>
{{markdown | markdown}}
</article>
</main>
</div>
</body>

</html>
191 changes: 191 additions & 0 deletions src/lib/themes/reader/profile.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!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" />
<title>{{profile.display_name}}</title>
<link rel="canonical" href="{{handle}}" />

<style>
/* Comment out Google Fonts from Google CDN to prevent tracking. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Lora:ital@0;1&display=swap');

body {
--body: Lora, Cambria, Cochin, Times, sans-serif;
--head: 'Libre Caslon Display', Georgia, 'Times New Roman' Times, serif;
color-scheme: dark light;
background-color: black white;
text-rendering: optimizeLegibility;
}

* { margin: 0;}
main {
height: 100%;
min-height: 100dvh;
padding-inline: 2rem;
font-weight: normal;
font-family: var(--body);
}
h1,h2 {
font-family: var(--head);
font-size: 1.125em;
font-weight: 400;
}
ul {padding:0;}
section { padding-block-end: 1rem;}
li {
list-style-type: none;
display:flex;
}
a, p {
max-width: 45ch;
hypens: auto;
text-wrap: pretty;
}
a {
color: inherit;
text-decoration: none;
flex-grow: 2;
transition: text-decoration 200ms ease-in-out;
&:hover {
text-decoration: underline;
}}
section:first-child {
padding-block-start: 4rem;
div{
display: flex;
align-items: stretch;
gap: .25rem;
}
figure {
display:flex;
align-items: end;
margin: 0;
}
figure, img {
width: 100%;
max-width: 1.125rem;
}
h1 {
line-height: 100%;
}
}
.prof {
text-align: center;
p, a {margin-inline: auto;}
section>div{
justify-content: center;
}
}
.cozy {
background-color: #E4DFD2;
color: #32281B;
}
.oled {
background-color: oklch(0 0 0);
color: oklch(.9 0 0);
}
.dark {
background-color: oklch(.26 0 0);
color: oklch(.85 0 0);
}
.brut {
--body: Inter, "San Francisco", Calibri, "Gill Sans",
Oxygen, Ubuntu, system-ui, -apple-system, Roboto,
sans-serif;
--head: var(--body);
section {
h1, h2 {
font-size: 1rem;
font-weight: 400;
opcaticy: .9;
}
p, a {
color: oklch(.4 0 0);
font-weight: 360;
transition: opacity 300ms ease-in;
&:hover {
opacity: 1;
}
}
}
}

</style>
</head>

<!-- Add a class to change the style [cozy, prof, brut, oled, dark] -->
<body class="cozy brut">
<main>
<section>
<div>
<figure class="avatar-figure">
<img class="avatar" src="/avatar" alt="{{display_name}} avatar" />
</figure>
<h1>{{display_name}}</h1>
</div>
{% if bio %}
<div> {{bio | markdown}} </div>
{% endif %}
</section>

{% if social_links %}
<section>
<h2>Contact</h2>
<ul class="contact">
{% for link in social_links %}
<li><a rel="me" title="{{link.label}}" href="{{link.url}}" target="_blank" class="link">
{{link.platform_name}}
</a></li>
{% endfor %}
</ul>
</section>
{% endif %}



{% if tags %}
<section>
<h2>Tags</h2>
<ul class="tags">
{% for tag in tags %}
<li><a href="{{instance_info.url}}/people#{{tag}}" target="_blank" class="tag">
{{tag}}
</a></li>
{% endfor %}
</ul>
</section>
{% endif %}

{% if links %}
<section class="links">
<h2>Links</h2>
<ul>
{% 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>
{% endif %}


{% if pages %}
<section class="links">
<h2>Pages</h2>
<ul>
{% for page in pages %}
<li><a href="/{{page.slug}}" class="link">
{{page.name or page.slug}}
</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
</main>
</body>

</html>
Loading