From 05394a2be90a0fdf8c9ab571d07ed6c4a82ce89d Mon Sep 17 00:00:00 2001 From: Linnnus Date: Wed, 27 Mar 2024 14:04:01 +0100 Subject: Use proper BEM convention After reading up on BEM [1] and specifically how to handle deeply nested child elements [2] I made the changes in this patch. [1]: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ [2]: https://scalablecss.com/bem-nesting-grandchild-elements/ --- app.py | 3 ++- static/base.css | 2 +- static/index.css | 4 ++-- views/base.html | 8 ++++---- views/index.html | 12 ++++++------ 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/app.py b/app.py index bc1945d..ca7e5d7 100644 --- a/app.py +++ b/app.py @@ -4,7 +4,8 @@ from bottle import jinja2_template as template app = Bottle() @app.route("/") -def hello(): +@app.route("/index.html") +def index(): return template("index") @app.route("/static/") diff --git a/static/base.css b/static/base.css index 65faad2..f9b1ae6 100644 --- a/static/base.css +++ b/static/base.css @@ -49,7 +49,7 @@ body { gap: 1.5em; } -.navbar__links__item { +.navbar__location { /* remove default link styling */ color: inherit; text-decoration: none; diff --git a/static/index.css b/static/index.css index 504b859..3f07a45 100644 --- a/static/index.css +++ b/static/index.css @@ -56,13 +56,13 @@ align-items: center; } -.achievements__item__number { +.achievements__number { /* Numbers should be big and attention grabbing */ font-size: 2rem; font-style: bold; } -.achievements__item__text { +.achievements__text { } .boxes { diff --git a/views/base.html b/views/base.html index e105d0c..a242770 100644 --- a/views/base.html +++ b/views/base.html @@ -12,10 +12,10 @@
{% block content %}{% endblock %}
diff --git a/views/index.html b/views/index.html index 84de07f..0b5b8ae 100644 --- a/views/index.html +++ b/views/index.html @@ -16,16 +16,16 @@
- #1 - ...at raiding + #1 + ...at raiding
- 9,398,988 - ...coins + 9,398,988 + ...coins
- 1 morbillion - ...monsters slain + 1 morbillion + ...monsters slain
-- cgit v1.2.3