death.au/deathau.weblog.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added nav, changed header, styling changes
All checks were successful
/ weblog.lol (push) Successful in 14s
Details

Browse source
This commit is contained in:
Gordon Pedersen 2024-05-10 16:55:19 +10:00
parent bf81a92097
commit c2b35ba7a5
3 changed files with 82 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
configuration/configuration.txt
View file

@ -16,7 +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> 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

7
configuration/template.html
View file

@ -9,10 +9,13 @@
</head> </head>
<body> <body>
<header> <div class="header">
<header>
<img class="avatar" src="https://cdn.some.pics/deathau/663da4619fdb6.svg" alt="My avatar — A pixelated self-portrait in the style of the 'bitizens' in the mobile game Tiny Tower" />
<h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1> <h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1>
{navigation} {navigation}
</header> </header>
</div>
<main class="weblog"> <main class="weblog">

111
weblog/B0. Template/styles.css.md
View file

@ -11,10 +11,10 @@ Location: /styles.css
@import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css'); @import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css');
:root { :root {
--foreground: #f9f8fa; --foreground: #e2dae9;
--background: #242129; --background: #242129;
--card-bg: #242129; --card-bg: #242129;
--link: #aa55fe; --link: #8000ff;
--accent: #845e9e; --accent: #845e9e;
--font-main: 'Rubik', sans-serif, 'Noto Color Emoji'; --font-main: 'Rubik', sans-serif, 'Noto Color Emoji';
@ -54,6 +54,8 @@ body {
font-size: 120%; font-size: 120%;
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
margin:0;
padding:0;
} }
article, article,
@ -93,6 +95,7 @@ main.page {
.post-info>a { .post-info>a {
margin-left: 1em; margin-left: 1em;
background: none;
} }
article p { article p {
@ -181,6 +184,68 @@ iframe {
display: none; display: none;
} }
header,
main,
footer {
max-width: 60em;
margin: 2em auto;
padding: 0 1em;
}
header>.avatar {
max-width: 60px;
border-radius: 50%;
}
.header {
margin: 0 0 2em 0;
background-color: #000;
border-radius: 0 0 1rem 1rem;
box-shadow: var(--shadow);
}
header {
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: end;
padding: 1em;
}
header>h1 {
margin:0 2rem;
}
header>nav {
margin-left: auto;
font-family: var(--font-code);
font-weight: var(--font-code-weight);
}
a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 5px 5px;
transition: 250ms ease-in-out;
}
a:hover {
background-size: 5px 100%;
color: white;
}
h1 a {
background: none
}
.weblog-title a {
background: none;
}
@ -198,7 +263,8 @@ header nav li {
header nav li a { header nav li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
margin-right: 1em; margin-right: 0.5em;
padding: 0 .3em;
} }
p, p,
@ -206,43 +272,15 @@ li {
line-height: 160%; line-height: 160%;
} }
header,
main,
footer {
max-width: 60em;
margin: 2em auto;
padding: 0 1em;
}
header {
margin-top: 4em;
}
footer p { footer p {
margin-top: 5em; margin-top: 5em;
font-size: 90%; font-size: 90%;
text-align: center; text-align: center;
} }
a:link {
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);
color: var(--background) !important; color: var(--background);
padding: .3em .4em; padding: .3em .4em;
margin: .8em 0 0 .4em; margin: .8em 0 0 .4em;
border-radius: .5em; border-radius: .5em;
@ -250,6 +288,10 @@ a:active {
display: inline-block; display: inline-block;
} }
.tag:hover {
color: white;
}
hr { hr {
border: 0; border: 0;
height: 1px; height: 1px;
@ -294,8 +336,3 @@ th {
text-align: left; text-align: left;
border: 1px solid var(--accent); border: 1px solid var(--accent);
} }
.weblog-title a {
text-decoration: none;
color: var(--foreground);
}