diff options
| -rw-r--r-- | README.md | 9 | ||||
| -rw-r--r-- | app.py | 6 | ||||
| -rw-r--r-- | static/images/base.jpeg (renamed from static/base.jpeg) | bin | 92603 -> 92603 bytes | |||
| -rw-r--r-- | static/images/crew.jpeg (renamed from static/crew.jpeg) | bin | 261527 -> 261527 bytes | |||
| -rw-r--r-- | static/images/hero.jpeg (renamed from static/hero.jpeg) | bin | 477217 -> 477217 bytes | |||
| -rw-r--r-- | static/styles/base.css (renamed from static/base.css) | 0 | ||||
| -rw-r--r-- | static/styles/index.css (renamed from static/index.css) | 2 | ||||
| -rw-r--r-- | views/base.html | 2 | ||||
| -rw-r--r-- | views/index.html | 8 |
9 files changed, 16 insertions, 11 deletions
@@ -7,7 +7,12 @@ This repository contains a web server which implements some guild management stu The main server is implemented in `app.py`. `views/` contains Jinja2 templates. -These are rendered using the `template()` function. +These are rendered using the `bottle#template_jinja()` function, +imported as `template()` in `app.py`. +Every view `views/X.html` has a corresponding `static/styles/X.css` +containing styles specific to that view. +Global styles are thus contained in `static/styles/base.css` +since that template forms the base for all other views. `static/` is for files that never change. -All HTTP requests that begin with `/static/` will be resolved relative to this file. +All HTTP requests that begin with `/images/` or `/styles/` will be resolved relative to their corresponding subfolder in `static/`. @@ -8,9 +8,9 @@ app = Bottle() def index(): return template("index") [email protected]("/static/<filename>") -def server_static(filename): - return static_file(filename, root="./static/") [email protected]("/<type:re:styles|images>/<filename>") +def server_static(type, filename): + return static_file(filename, root=f"./static/{type}/") debug(True) run(app, host='localhost', port=8080, reloader=True)
\ No newline at end of file diff --git a/static/base.jpeg b/static/images/base.jpeg Binary files differindex c51aca5..c51aca5 100644 --- a/static/base.jpeg +++ b/static/images/base.jpeg diff --git a/static/crew.jpeg b/static/images/crew.jpeg Binary files differindex 9f93e76..9f93e76 100644 --- a/static/crew.jpeg +++ b/static/images/crew.jpeg diff --git a/static/hero.jpeg b/static/images/hero.jpeg Binary files differindex fb2967c..fb2967c 100644 --- a/static/hero.jpeg +++ b/static/images/hero.jpeg diff --git a/static/base.css b/static/styles/base.css index f9b1ae6..f9b1ae6 100644 --- a/static/base.css +++ b/static/styles/base.css diff --git a/static/index.css b/static/styles/index.css index 3f07a45..22e6dd0 100644 --- a/static/index.css +++ b/static/styles/index.css @@ -17,7 +17,7 @@ /* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */ background-image: radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%), - url(/static/hero.jpeg); + url(/images/hero.jpeg); background-size: cover; /* TODO: Put some cool image here */ diff --git a/views/base.html b/views/base.html index a242770..1550fa4 100644 --- a/views/base.html +++ b/views/base.html @@ -2,7 +2,7 @@ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link href="/static/base.css" rel="stylesheet"> + <link href="/styles/base.css" rel="stylesheet"> {% block head %}{% endblock %} </head> <body> diff --git a/views/index.html b/views/index.html index 0b5b8ae..bbe8af4 100644 --- a/views/index.html +++ b/views/index.html @@ -4,8 +4,8 @@ {# Since the background image is declared in the CSS, we can improve loading times by instructing the browser to start loading the image *before* it has even parsed the CSS. #} - <link rel="preload" as="image" href="/static/hero.jpeg"> - <link rel="stylesheet" href="/static/index.css"> + <link rel="preload" as="image" href="/images/hero.jpeg"> + <link rel="stylesheet" href="/styles/index.css"> {% endblock %} {% block content %} @@ -57,13 +57,13 @@ </section> <section class="boxes__item"> <h2 class="boxes__header">Our base</h2> - <img class="boxes__image" src="/static/base.jpeg" width="1200" height="675" alt="A very dark and mysterious palace"> + <img class="boxes__image" src="/images/base.jpeg" width="1200" height="675" alt="A very dark and mysterious palace"> </section> </div> <div class="boxes__column boxes__column--right"> <section class="boxes__item"> <h2 class="boxes__header">The crew</h2> - <img class="boxes__image" src="/static/crew.jpeg" width="1600" height="1200" alt="A crew of high-level WoW players"> + <img class="boxes__image" src="/images/crew.jpeg" width="1600" height="1200" alt="A crew of high-level WoW players"> </section> <section class="boxes__item"> <h2 class="boxes__header">Coins</h2> |
