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
html = read_file.read()
# extract images from their enclosing <p> tags
html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'\2', html)
# extract images from their enclosing <p> tags and put them in img panels
html = re.sub('(<p>(<img(?:.+)/>)</p>)', r'<div class="img-panel">\2</div>', html)
# 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)

23
src/inc_css/blog.css
View File

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