From 7a7b2a6415e09fcaf596bad5c52fd9572633b073 Mon Sep 17 00:00:00 2001 From: Linnnus Date: Wed, 27 Mar 2024 14:20:24 +0100 Subject: 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. --- README.md | 9 ++++- app.py | 6 +-- static/base.css | 62 ----------------------------- static/base.jpeg | Bin 92603 -> 0 bytes static/crew.jpeg | Bin 261527 -> 0 bytes static/hero.jpeg | Bin 477217 -> 0 bytes static/images/base.jpeg | Bin 0 -> 92603 bytes static/images/crew.jpeg | Bin 0 -> 261527 bytes static/images/hero.jpeg | Bin 0 -> 477217 bytes static/index.css | 104 ------------------------------------------------ static/styles/base.css | 62 +++++++++++++++++++++++++++++ static/styles/index.css | 104 ++++++++++++++++++++++++++++++++++++++++++++++++ views/base.html | 2 +- views/index.html | 8 ++-- 14 files changed, 181 insertions(+), 176 deletions(-) delete mode 100644 static/base.css delete mode 100644 static/base.jpeg delete mode 100644 static/crew.jpeg delete mode 100644 static/hero.jpeg create mode 100644 static/images/base.jpeg create mode 100644 static/images/crew.jpeg create mode 100644 static/images/hero.jpeg delete mode 100644 static/index.css create mode 100644 static/styles/base.css create mode 100644 static/styles/index.css diff --git a/README.md b/README.md index ee899b7..d133a1a 100644 --- a/README.md +++ b/README.md @@ -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/`. diff --git a/app.py b/app.py index ca7e5d7..cfedee5 100644 --- a/app.py +++ b/app.py @@ -8,9 +8,9 @@ app = Bottle() def index(): return template("index") -@app.route("/static/") -def server_static(filename): - return static_file(filename, root="./static/") +@app.route("//") +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.css b/static/base.css deleted file mode 100644 index f9b1ae6..0000000 --- a/static/base.css +++ /dev/null @@ -1,62 +0,0 @@ -/* - * This file will contain the styles that are to be applied to the WHOLE site. - * - * No page-specific settings should go in this file. - */ - -* { - box-sizing: border-box; -} - -html, body { - padding: 0; - margin: 0; - - font-family: Helvetica, Arial, sans-serif; - - color: white; - background-color: #2a2626; -} - -/* Sticky footer - * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers - */ -body { - min-height: 100vh; - display: grid; - grid-template-rows: auto 1fr auto; -} - -.navbar { - /* A lot of spacing gives a kind of modern look. */ - padding: 1.5rem; - - /* Make the navbar slightly darker than the default background color to "lift it up". */ - background-color: #1c1c1c; - - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; -} - -.navbar__links { - list-style: none; - padding: 0; - - display: flex; - flex-direction: row; - gap: 1.5em; -} - -.navbar__location { - /* remove default link styling */ - color: inherit; - text-decoration: none; -} - -footer { - text-align: center; - font-size: small; - margin: 1rem; -} diff --git a/static/base.jpeg b/static/base.jpeg deleted file mode 100644 index c51aca5..0000000 Binary files a/static/base.jpeg and /dev/null differ diff --git a/static/crew.jpeg b/static/crew.jpeg deleted file mode 100644 index 9f93e76..0000000 Binary files a/static/crew.jpeg and /dev/null differ diff --git a/static/hero.jpeg b/static/hero.jpeg deleted file mode 100644 index fb2967c..0000000 Binary files a/static/hero.jpeg and /dev/null differ diff --git a/static/images/base.jpeg b/static/images/base.jpeg new file mode 100644 index 0000000..c51aca5 Binary files /dev/null and b/static/images/base.jpeg differ diff --git a/static/images/crew.jpeg b/static/images/crew.jpeg new file mode 100644 index 0000000..9f93e76 Binary files /dev/null and b/static/images/crew.jpeg differ diff --git a/static/images/hero.jpeg b/static/images/hero.jpeg new file mode 100644 index 0000000..fb2967c Binary files /dev/null and b/static/images/hero.jpeg differ diff --git a/static/index.css b/static/index.css deleted file mode 100644 index 3f07a45..0000000 --- a/static/index.css +++ /dev/null @@ -1,104 +0,0 @@ -/* - * This file contains styles specific to the "index" view. The corresponding - * HTML/template file is `views/index.html`. - */ - -.hero { - /* We want the hero at the top to take up a big portion of the screen, - * while still showing that there's more content to be found below. */ - min-height: 50vh; - - /* Put children smack-dab in the center */ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - /* 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); - background-size: cover; - - /* TODO: Put some cool image here */ - background-color: purple; - color: white; -} - -.hero__title { - font-size: 5rem; - margin: 1rem; - - /* TODO: Use (subset) font for this very important text. */ -} - -.hero__subtitle { - font-size: large; - font-style: italic; -} - -.achievements { - padding: 2rem 1rem; - - /* Use a dark and twisted color to make this band stand out as a separate element. */ - background-color: #6e1818; - - /* Disperse achievements evenly horisontally */ - display: flex; - justify-content: space-around; - align-items: center; -} - -.achievements__item { - /* Stack the two children vertically */ - display: flex; - flex-direction: column; - align-items: center; -} - -.achievements__number { - /* Numbers should be big and attention grabbing */ - font-size: 2rem; - font-style: bold; -} - -.achievements__text { -} - -.boxes { - /* The columns should be aligned in the center. - * N.B. margin matches padding of achievements. */ - max-width: 600px; - margin: 2rem auto; -} - -.boxes__column { - --gap: 1rem; - width: calc(50% - var(--gap) / 2); -} - -.boxes__column--right { - float: right; -} - -.boxes__column--left { - float: left; - margin-right: var(--gap); -} - -.boxes__item { - -} - -.boxes__header { - -} - -.boxes__body-text { - line-height: 1.5; -} - -.boxes__image { - max-width: 100%; - height: auto; -} \ No newline at end of file diff --git a/static/styles/base.css b/static/styles/base.css new file mode 100644 index 0000000..f9b1ae6 --- /dev/null +++ b/static/styles/base.css @@ -0,0 +1,62 @@ +/* + * This file will contain the styles that are to be applied to the WHOLE site. + * + * No page-specific settings should go in this file. + */ + +* { + box-sizing: border-box; +} + +html, body { + padding: 0; + margin: 0; + + font-family: Helvetica, Arial, sans-serif; + + color: white; + background-color: #2a2626; +} + +/* Sticky footer + * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers + */ +body { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; +} + +.navbar { + /* A lot of spacing gives a kind of modern look. */ + padding: 1.5rem; + + /* Make the navbar slightly darker than the default background color to "lift it up". */ + background-color: #1c1c1c; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.navbar__links { + list-style: none; + padding: 0; + + display: flex; + flex-direction: row; + gap: 1.5em; +} + +.navbar__location { + /* remove default link styling */ + color: inherit; + text-decoration: none; +} + +footer { + text-align: center; + font-size: small; + margin: 1rem; +} diff --git a/static/styles/index.css b/static/styles/index.css new file mode 100644 index 0000000..22e6dd0 --- /dev/null +++ b/static/styles/index.css @@ -0,0 +1,104 @@ +/* + * This file contains styles specific to the "index" view. The corresponding + * HTML/template file is `views/index.html`. + */ + +.hero { + /* We want the hero at the top to take up a big portion of the screen, + * while still showing that there's more content to be found below. */ + min-height: 50vh; + + /* Put children smack-dab in the center */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + /* 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(/images/hero.jpeg); + background-size: cover; + + /* TODO: Put some cool image here */ + background-color: purple; + color: white; +} + +.hero__title { + font-size: 5rem; + margin: 1rem; + + /* TODO: Use (subset) font for this very important text. */ +} + +.hero__subtitle { + font-size: large; + font-style: italic; +} + +.achievements { + padding: 2rem 1rem; + + /* Use a dark and twisted color to make this band stand out as a separate element. */ + background-color: #6e1818; + + /* Disperse achievements evenly horisontally */ + display: flex; + justify-content: space-around; + align-items: center; +} + +.achievements__item { + /* Stack the two children vertically */ + display: flex; + flex-direction: column; + align-items: center; +} + +.achievements__number { + /* Numbers should be big and attention grabbing */ + font-size: 2rem; + font-style: bold; +} + +.achievements__text { +} + +.boxes { + /* The columns should be aligned in the center. + * N.B. margin matches padding of achievements. */ + max-width: 600px; + margin: 2rem auto; +} + +.boxes__column { + --gap: 1rem; + width: calc(50% - var(--gap) / 2); +} + +.boxes__column--right { + float: right; +} + +.boxes__column--left { + float: left; + margin-right: var(--gap); +} + +.boxes__item { + +} + +.boxes__header { + +} + +.boxes__body-text { + line-height: 1.5; +} + +.boxes__image { + max-width: 100%; + height: auto; +} \ No newline at end of file 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 @@ - + {% block head %}{% endblock %} 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. #} - - + + {% endblock %} {% block content %} @@ -57,13 +57,13 @@

-- cgit v1.2.3

Our base

The crew

Coins