From 8bf2a86e5bc1b7361089963d7170d5361d968432 Mon Sep 17 00:00:00 2001 From: Markus Steinlein <47111718+Ayreonaut@users.noreply.github.com> Date: Mon, 8 Mar 2021 22:14:55 +0100 Subject: [PATCH] Moved fotogrid code to its own file. Created subfolder for static css. --- app.py | 29 +---- fotogrid.py | 20 +++ static/css/fotogrid.css | 35 ++++++ static/css/style.css | 267 ++++++++++++++++++++++++++++++++++++++++ templates/template.html | 4 +- 5 files changed, 330 insertions(+), 25 deletions(-) create mode 100644 fotogrid.py create mode 100644 static/css/fotogrid.css create mode 100644 static/css/style.css diff --git a/app.py b/app.py index 990c307..74c7a84 100755 --- a/app.py +++ b/app.py @@ -6,17 +6,23 @@ from flask_flatpages.utils import pygmented_markdown from flask_fontawesome import FontAwesome from datetime import datetime +from fotogrid import fotogrid + # directly support jinja within markdown blogposts # https://flask-flatpages.readthedocs.io/en/v0.7.1/ def markdown_with_jinja_renderer(text): prerendered_body = render_template_string(text) return pygmented_markdown(prerendered_body) +# create app app = Flask(__name__) app.config['FLATPAGES_EXTENSION'] = '.md' app.config['FLATPAGES_HTML_RENDERER'] = markdown_with_jinja_renderer app.config['FONTAWESOME_STYLES'] = ['solid', 'brands'] +# register fotogrid with jinja +app.jinja_env.globals.update(fotogrid=fotogrid) + pages = FlatPages(app) fa = FontAwesome(app) @@ -51,30 +57,7 @@ def index(): return render_template('index.html', pages=sorted_pages) -def fotogrid(image_urls): - result = '
' - cols = 4 - images = divmod(len(image_urls), cols) - images_per_col = images[0] - if images[1] > 0: - images_per_col += 1 - nbr = 0 - for img in image_urls: - if (nbr % images_per_col) == 0: - if nbr > 0: - result += '
' # closing fotocolumn - result += '
' - result += '' - nbr += 1 - - result += "
" # closing fotocolum, fotorow - return result - - -app.jinja_env.globals.update(fotogrid=fotogrid) -#template = Template('Fotogrid') -#template.globals['fotogrid'] = fotogrid if __name__ == '__main__': app.run(host='0.0.0.0') diff --git a/fotogrid.py b/fotogrid.py new file mode 100644 index 0000000..efa18c1 --- /dev/null +++ b/fotogrid.py @@ -0,0 +1,20 @@ +# Provide a simple responsive fotogrid using flex layout. +# Depends on the css/fotogrid.css defined styles. +def fotogrid(image_urls): + result = '
' + cols = 4 + images = divmod(len(image_urls), cols) + images_per_col = images[0] + if images[1] > 0: + images_per_col += 1 + nbr = 0 + for img in image_urls: + if (nbr % images_per_col) == 0: + if nbr > 0: + result += '
' # closing fotocolumn + result += '
' + result += '' + nbr += 1 + + result += "
" # closing fotocolum, fotorow + return result \ No newline at end of file diff --git a/static/css/fotogrid.css b/static/css/fotogrid.css new file mode 100644 index 0000000..227411d --- /dev/null +++ b/static/css/fotogrid.css @@ -0,0 +1,35 @@ + + +.fotorow { + display: flex; + flex-wrap: wrap; + padding: 0 4px; +} + +/* Create four equal columns that sits next to each other */ +.fotocolumn { + flex: 25%; + max-width: 25%; + padding: 0 4px; +} + +.fotocolumn img { + margin-top: 8px; + vertical-align: middle; +} + +/* Responsive layout - makes a two column-layout instead of four columns */ +@media (max-width: 1000px) { + .fotocolumn { + flex: 50%; + max-width: 50%; + } +} + +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ +@media (max-width: 800px) { + .fotocolumn { + flex: 100%; + max-width: 100%; + } +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..c66d162 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,267 @@ +* { + box-sizing:border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", Arial, sans-serif; + font-size: 1rem; + line-height: 1.5; +} + +body { + text-size-adjust:100% + background-attachment: fixed; + background-color: #000000; + color: rgba(255, 255, 255, 0.75); + display: flex; + flex-direction: column; + min-height:100vh +} + +main { + display: block +} + +a { + color: #c11012; + text-decoration:none +} + +a:hover, a:focus { + text-decoration:underline +} + +a strong { + color:inherit +} + +h1, h2, h3, h4, h5, h6, .site-title { + color: #313131; + font-weight: 600; + line-height: 1.25; + margin-bottom: .5rem; + text-rendering:optimizeLegibility +} + +h1 { + font-size:2rem +} + +h2 { + font-size: 1.5rem; + margin-top:1rem +} + +#sidebar { + flex: 0 0 auto; + padding:2rem +} + +#sidebar .site-title { + font-family: 'Abril Fatface', serif; + font-size: 1.25rem; + font-weight: normal; + margin-bottom: .5rem; + margin-top:0 +} + +#sidebar nav { + display: flex; +} + +#sidebar-nav-links { + flex-flow: column nowrap; +} + +.content { + background: #fff; + color: #515151; + padding:2rem +} + +.container { + display: flex; + flex: 1 1 auto; + flex-direction:column +} + +.container > .content { + flex-grow: 1; + padding-bottom:4rem +} + +.container > header { + background: transparent; + color: #fff; + margin:-1.5rem 2rem 2rem +} + +.container > header h1, .container > header h2 { + color:inherit +} + +.home #sidebar { + text-align:center +} + +.home #sidebar .site-title { + font-size:3.25rem +} + +.home #sidebar header ~ nav { + display:flex +} + +.home #sidebar > * :last-child { + margin-bottom:0.5rem +} + +/* + Styling for images meant to be embedded within blog post. Use it + by append #illustration to image url in markdown like: + ![Kitten](static/img/kitten.jpg#illustration) + */ +img[src $= "#illustration"] { + display: block; + margin-top: 8px; + margin-left: auto; + margin-right: auto; + border-radius: 8px; + width: 60%; +} + +/* + Display an external icon after each link that leads away from our site. + */ +.content a[href^="http://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):after, +.content a[href^="https://"]:not([href*="fdgl.rocks"]):not([href*="youtu.be"]):not([href*="youtube.com"]):after { + + font-family: 'Font Awesome 5 Free'; + content: "\f35d"; + display: inline-block; + font: normal 16px/1 'Font Awesome 5 Free'; + margin-left: 4px; +} +/* + Display an Youtube icon left of every youtube link. + */ +.content a[href^="http://youtu.be"]:before, +.content a[href^="https://youtu.be"]:before, +.content a[href^="http://youtube.com"]:before, +.content a[href^="https://youtube.com"]:before { + + font-family: "Font Awesome 5 Brands"; + content: "\f167"; + display: inline-block; + font: normal 16px/1 'Font Awesome 5 Brands'; + margin-right: 4px; +} + + +@media (min-width: 49rem) { + body { + flex-direction: row; + min-height: 100vh; + -webkit-overflow-scrolling: touch; + overflow-y:auto + } + + body > * { + -webkit-overflow-scrolling: touch; + overflow-y:auto + } + + #sidebar, .home #sidebar { + text-align: left; + width:18rem + } + + #sidebar > * :last-child, .home #sidebar > * :last-child { + margin-bottom:0 + } + + #sidebar { + position: fixed; + left:0 + } + + #sidebar .site-title { + font-size:3.25rem; + text-align: center; + } + + #sidebar .site-title .back-arrow { + display:none + } + + #sidebar p.lead, #sidebar header ~ * { + display:block + } + + #sidebar header ~ nav { + display:flex + } + + .index #sidebar { + margin-bottom:0 + } + + .container { + background: #fff; + color: #515151; + min-height: 100vh; + padding: 4rem 4rem 0; + margin-left:18rem + } + + .container > header { + color: #313131; + margin:0 + } + + .container > header h1, .container > header h2 { + color:inherit + } + + .container > header h1:last-child, .container > header h2:last-child { + margin-bottom:.5rem + } + + .container > * { + max-width: 38rem; + padding:0 + } +} + +#sidebar a { + color:#fff +} + +#sidebar a:hover, #sidebar a:focus { + text-decoration:underline +} + +@media screen and (max-width: 783px) { + .container > .content { + padding:1.5rem + } + + #sidebar #sidebar-nav-links { + flex-direction: row; + justify-content:space-evenly + } + + #sidebar #sidebar-nav-links a { + display: inline-block; + margin:0 .5em + } + + .home.index #sidebar { + padding: 1rem + } +} diff --git a/templates/template.html b/templates/template.html index e6518aa..0f3ad42 100644 --- a/templates/template.html +++ b/templates/template.html @@ -3,8 +3,8 @@ {{ fontawesome_html() }} - - + +