ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

improve image formatting in blog posts
continuous-integration/drone/push Build is passing Details

This commit is contained in:
ktyl 2022-12-17 20:36:07 +00:00
parent 6898fd6c8d
commit 43500dd005
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scripts/mkblog.py
View File

@ -56,8 +56,8 @@ with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
# modify the basic html to make it nicer for styling later # modify the basic html to make it nicer for styling later
html = read_file.read() html = read_file.read()
# extract images from their enclosing <p> tags # extract images from their enclosing <p> tags and put them in img panels
html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'\2', html) html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'<div class="img-panel">\2</div>', html)
# insert text-panel start between non-<p> and <p> elements # insert text-panel start between non-<p> and <p> elements
html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html) html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)

23
src/inc_css/blog.css
View File

@ -6,6 +6,7 @@
} }
.page .blog .para-block { .page .blog .para-block {
color: var(--foreground-inactive); color: var(--foreground-inactive);
font-size: 1.1em; font-size: 1.1em;
@ -88,11 +89,18 @@ ul.blog-index li a {
padding-right: 1em; padding-right: 1em;
} }
.page .blog img { .page .blog .img-panel
width: max(30vmax, 500px); {
margin-top: 2em;
margin-top: 1.2em;
margin-bottom: 2em; margin-bottom: 2em;
}
.page .blog .img-panel img {
position: relative;
width: 120%;
max-width: 100vw;
left: -10%;
border-radius: 2em; border-radius: 2em;
} }
@ -101,5 +109,10 @@ ul.blog-index li a {
.page .blog .code-panel { .page .blog .code-panel {
padding: 1.0em 5.0em; padding: 1.0em 5.0em;
} }
}
.page .blog .img-panel img {
width: 100%;
left: 0;
border-radius: 0;
}
}