update main template and add nav menu
All checks were successful
/ weblog.lol (push) Successful in 14s

This commit is contained in:
Gordon Pedersen 2024-05-10 14:29:07 +10:00
parent 6ca3a14dc4
commit fde20c3580
3 changed files with 189 additions and 145 deletions

View file

@ -16,6 +16,7 @@ Landing page template: Landing Page Template
Separator: · Separator: ·
// Navigation: about, another-page, <a href="https://example.com">Example</a>, [Example](https://example.com) // Navigation: about, another-page, <a href="https://example.com">Example</a>, [Example](https://example.com)
Navigation: <a href="https://death.id.au/>Home</a>, <a href="https://death.id.au/now>Now</a>, <a href="https://deathau.weblog.lol>Blog</a>, <a href="https://death.id.au/CV>CV</a>
Files path: /files/ Files path: /files/
Landing page post count: 8 Landing page post count: 8
Landing page post length: 100 words Landing page post length: 100 words

View file

@ -20,7 +20,9 @@
<aside class="post-info"> <aside class="post-info">
<a href="{location}"><i class="fa-solid fa-clock"></i> <time class="dt-published" datetime="{date}">{date}</time></a> <a href="{location}"><i class="fa-solid fa-clock"></i> <time class="dt-published" datetime="{date}">{date}</time></a>
</aside> </aside>
<i data-emoji="{emoji}"></i>
{body} {body}
<aside class="post-info"><a href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a><a href="{external_url}"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a></aside>
<aside class="post-tags"> <aside class="post-tags">
{tags} {tags}
</aside> </aside>

View file

@ -35,7 +35,10 @@ Location: /styles.css
html { html {
filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg);
} }
img,svg,video {
img,
svg,
video {
filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg);
} }
} }
@ -53,7 +56,8 @@ body {
background: var(--background); background: var(--background);
} }
article, main.page { article,
main.page {
display: block; display: block;
max-width: 42em; max-width: 42em;
border-radius: 1em; border-radius: 1em;
@ -76,11 +80,8 @@ article, main.page {
width: 100%; width: 100%;
} }
.post-info+h1 { .post-info,
/*max-width: calc(100% - 4rem - 2em);*/ .post-tags {
}
.post-info, .post-tags {
font-size: 85%; font-size: 85%;
color: var(--accent); color: var(--accent);
text-align: right; text-align: right;
@ -123,18 +124,41 @@ iframe {
font-weight: var(--font-em-weight); font-weight: var(--font-em-weight);
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-head); font-family: var(--font-head);
font-weight: var(--font-head-weight); font-weight: var(--font-head-weight);
margin: 1rem 0; margin: 1rem 0;
} }
h1 { font-size: 3em; line-height: 1em; } h1 {
h2 { font-size: 2em; } font-size: 3em;
h3 { font-size: 1.5em; } line-height: 1em;
h4 { font-size: 1.17em; } }
h5 { font-size: 1em; }
h6 { font-size: .83em; } h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.17em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: .83em;
}
iframe { iframe {
max-width: 100%; max-width: 100%;
@ -149,10 +173,11 @@ iframe {
[data-emoji]::before { [data-emoji]::before {
content: attr(data-emoji); content: attr(data-emoji);
font-stye: normal;
} }
[data-emoji='{emoji}'], [href='{status_url}'], [href='{external_url}'] { [data-emoji='{emoji}'],
[href='{status_url}'],
[href='{external_url}'] {
display: none; display: none;
} }
@ -176,11 +201,14 @@ header nav li a {
margin-right: 1em; margin-right: 1em;
} }
p, li { p,
li {
line-height: 160%; line-height: 160%;
} }
header, main, footer { header,
main,
footer {
max-width: 60em; max-width: 60em;
margin: 2em auto; margin: 2em auto;
padding: 0 1em; padding: 0 1em;
@ -196,10 +224,21 @@ footer p {
text-align: center; text-align: center;
} }
a:link { color: var(--link); } a:link {
a:visited { color: var(--link); } color: var(--link);
a:hover { color: var(--link); } }
a:active { color: var(--link); }
a:visited {
color: var(--link);
}
a:hover {
color: var(--link);
}
a:active {
color: var(--link);
}
.tag { .tag {
background: var(--accent); background: var(--accent);
@ -225,7 +264,8 @@ code {
word-wrap: break-word; word-wrap: break-word;
} }
pre, code { pre,
code {
font-family: var(--font-code); font-family: var(--font-code);
font-weight: var(--font-code-weight); font-weight: var(--font-code-weight);
font-size: 90%; font-size: 90%;
@ -248,7 +288,8 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
td, th { td,
th {
padding: .75em; padding: .75em;
text-align: left; text-align: left;
border: 1px solid var(--accent); border: 1px solid var(--accent);