From 531f9bf63d34a9e54837c8a0bf69da9a08a82525 Mon Sep 17 00:00:00 2001 From: xengineering Date: Thu, 3 Sep 2020 10:51:58 +0200 Subject: Restructure Files and Directories --- main.py | 15 +++---- static/css/style.css | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++ static/index.html | 40 ------------------- static/style.css | 111 --------------------------------------------------- templates/index.html | 40 +++++++++++++++++++ 5 files changed, 156 insertions(+), 161 deletions(-) create mode 100644 static/css/style.css delete mode 100644 static/index.html delete mode 100644 static/style.css create mode 100644 templates/index.html diff --git a/main.py b/main.py index 3203bf5..670c7af 100755 --- a/main.py +++ b/main.py @@ -30,19 +30,14 @@ app = Flask(__name__) @app.route('/') def index(): - return current_app.send_static_file('index.html') + return render_template('index.html') -@app.route('/style.css') -def style(): - return current_app.send_static_file('style.css') - - -@app.route('/favicon.ico') -def favicon(): - return current_app.send_static_file('favicon.ico') +@app.route('/static/css/') +def css(css_file): + return current_app.send_static_file("css/{}".format(css_file)) if __name__ == '__main__': serve(app, listen='*:8080') # production server - #app.run() # test server + #app.run() # debug server - NOT FOR PRODUCTION! diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..fd92176 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,111 @@ + + +/* + web-template - A Template Project for dynamic Web Applications. + + Copyright (C) 2020 xengineering + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published + by the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + + +/* + General Stuff +*/ + +* { + box-sizing: border-box; /* Include padding and border in the element's total width and height */ +} + +body { + margin: 0; /* avoid ugly white margin */ + font-family: Arial, Helvetica, sans-serif; /* select a nice font */ +} + +.menu { + background-color: black; +} + +.content { + background-color: white; +} + +.menu a { + color: lightgray; + text-decoration: none; /* disable ugly underlined links */ +} + +/* How should the link behave if the mouse is over this item? */ +.menu a:hover { + background-color: lightgray; + color: black; +} + + + +/* + Default Geometry / Geometry for Phones ('Mobile First Development') +*/ + +.content { + padding-left: 20px; + padding-right: 20px; + text-align: justify; +} + +.menu a { + display: block; + padding: 16px; + text-align: center; +} + + + +/* + Geometry for Tablets +*/ + +@media only screen and (min-width: 600px) { + /* empty --> same rules as for phones */ +} + + + +/* + Geometry for Desktops +*/ + +@media only screen and (min-width: 768px) { + + .menu { + height: 100%; + width: 200px; + position: fixed; /* position fixed in top left corner (with offset) */ + top: 0px; /* disable the offset from top left corner */ + } + + .menu a { + text-align: left; + } + + .content { + margin-left: 200px; /* transparent margin on the left for .menu */ + } + + .content *{ /* everything inside the content container */ + max-width: 960px; /* maximum width on desktops should be 960 px */ + margin-left: auto; /* center it with margin */ + margin-right: auto; /* center it with margin */ + } +} diff --git a/static/index.html b/static/index.html deleted file mode 100644 index 90e5f1f..0000000 --- a/static/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - Web Template - - - - - - -
-
-

Web Template

-

- Lorem ipsum. -

-
-
- - diff --git a/static/style.css b/static/style.css deleted file mode 100644 index fd92176..0000000 --- a/static/style.css +++ /dev/null @@ -1,111 +0,0 @@ - - -/* - web-template - A Template Project for dynamic Web Applications. - - Copyright (C) 2020 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published - by the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - - -/* - General Stuff -*/ - -* { - box-sizing: border-box; /* Include padding and border in the element's total width and height */ -} - -body { - margin: 0; /* avoid ugly white margin */ - font-family: Arial, Helvetica, sans-serif; /* select a nice font */ -} - -.menu { - background-color: black; -} - -.content { - background-color: white; -} - -.menu a { - color: lightgray; - text-decoration: none; /* disable ugly underlined links */ -} - -/* How should the link behave if the mouse is over this item? */ -.menu a:hover { - background-color: lightgray; - color: black; -} - - - -/* - Default Geometry / Geometry for Phones ('Mobile First Development') -*/ - -.content { - padding-left: 20px; - padding-right: 20px; - text-align: justify; -} - -.menu a { - display: block; - padding: 16px; - text-align: center; -} - - - -/* - Geometry for Tablets -*/ - -@media only screen and (min-width: 600px) { - /* empty --> same rules as for phones */ -} - - - -/* - Geometry for Desktops -*/ - -@media only screen and (min-width: 768px) { - - .menu { - height: 100%; - width: 200px; - position: fixed; /* position fixed in top left corner (with offset) */ - top: 0px; /* disable the offset from top left corner */ - } - - .menu a { - text-align: left; - } - - .content { - margin-left: 200px; /* transparent margin on the left for .menu */ - } - - .content *{ /* everything inside the content container */ - max-width: 960px; /* maximum width on desktops should be 960 px */ - margin-left: auto; /* center it with margin */ - margin-right: auto; /* center it with margin */ - } -} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..67e2d78 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,40 @@ + + + + Web Template + + + + + + +
+
+

Web Template

+

+ Lorem ipsum. +

+
+
+ + -- cgit v1.2.3-70-g09d2