diff options
| author | Linnnus <[email protected]> | 2024-03-27 14:20:24 +0100 |
|---|---|---|
| committer | Linnnus <[email protected]> | 2024-03-31 15:40:19 +0200 |
| commit | 7a7b2a6415e09fcaf596bad5c52fd9572633b073 (patch) | |
| tree | 11b36261214bf9bbd39a418c6c64d33dafe36e56 | |
| parent | 05394a2be90a0fdf8c9ab571d07ed6c4a82ce89d (diff) | |
Move styles and images into subfolder
See the updates to the README for a description of the new layout.
Note that the /static/ prefix has also been removed from URLs. It felt
kind of like we were leaking implementation details. The fact that these
files are staic doesn't concern the consumer of the service.
| -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> |
