diff --git a/scripts/mkblog.py b/scripts/mkblog.py index 0bcd5b6..99f5026 100644 --- a/scripts/mkblog.py +++ b/scripts/mkblog.py @@ -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

tags - html = re.sub('(

()

)', r'\2', html) + # extract images from their enclosing

tags and put them in img panels + html = re.sub('(

()

)', r'
\2
', html) # insert text-panel start between non-

and

elements html = re.sub('((?)\n)(

)', r'\1

\n\2', html) diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css index ca7c680..8056d0a 100644 --- a/src/inc_css/blog.css +++ b/src/inc_css/blog.css @@ -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; + } +}