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() }}
-
-
+
+