ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

blog: reading mode fixes, add highight.js for codeblocks

Browse source
This commit is contained in:
ari melody 2025-07-05 15:11:51 +01:00
parent faf6095d16
commit ddbf3444eb
Signed by: ari
GPG key ID: CF99829C92678188
26 changed files with 1777 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

46
public/style/blogpost.css
View file

@ -70,16 +70,16 @@ main {
margin: 0;
}
.blog p:hover,
article#blog p:hover,
.comment p:hover {
background: inherit;
}
article.blog {
article#blog {
font-size: 22px;
}
.blog h1 {
article#blog h1 {
margin-bottom: 0;
font-size: 1.8em;
}
@ -87,7 +87,7 @@ article.blog {
.blog-author {
margin: .2em 0;
}
.blog .blog-author img {
article#blog .blog-author img {
width: 1.3em;
height: 1.3em;
display: inline-block;
@ -104,19 +104,28 @@ article.blog {
opacity: .75;
}
#blog-content {
article#blog {
font-family: 'Lora', serif;
}
.blog p {
article#blog header {
position: relative;
width: auto;
font-family: 'Monaspace Argon', monospace;
border: none;
background: none;
z-index: 0;
}
article#blog p {
line-height: 1.5em;
}
.blog sub {
article#blog sub {
opacity: .75;
}
.blog pre {
article#blog pre {
max-height: 15em;
padding: .5em;
font-size: .9em;
@ -126,7 +135,7 @@ article.blog {
background: var(--background-alt);
}
.blog p code {
article#blog p code {
padding: .2em .3em;
font-size: .9em;
border: 1px solid #8884;
@ -134,14 +143,20 @@ article.blog {
background: var(--background-alt);
}
.blog img {
article#blog blockquote {
margin: 1em 0;
padding: 0 0 0 1em;
border-left: .2em solid #8888;
}
article#blog img {
max-height: 50%;
max-width: 100%;
display: block;
}
.blog i.end-mark {
article#blog i.end-mark {
width: 1.2em;
height: 1.2em;
margin-top: -.2em;
@ -178,7 +193,7 @@ article.blog {
font-weight: 600;
}
#interactions button {
#interactions .button {
min-width: fit-content;
padding: 0 .75em 0 .5em;
@ -198,11 +213,14 @@ article.blog {
background: none;
border: 1px solid var(--on-background);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
}
#interactions button:hover {
#interactions .button:hover {
background: #0001;
}
#interactions button:active {
#interactions .button:active {
background: #0002;
}