JeroenED
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor HTML and SCSS for improved structure and styling 

- Removed unnecessary CSS properties from `base.scss`
- Added `class="h-100"` to the `<html>` tag in `base.html.twig` for full height
- Added `class="d-flex flex-column h-100"` to the `<body>` tag in `base.html.twig` for flexbox layout
- Updated footer styling in `base.html.twig` with additional classes
- Added `class="flex-shrink-0"` to the `<main>` tag in `page.html.twig`
This commit is contained in:
Jeroen De Meerleer 2024-02-07 12:40:26 +01:00
parent 766622f0fc
commit c7b7285403
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
3 changed files with 4 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/scss/base.scss
View File

@ -7,22 +7,10 @@ $orange: #d6972a;
$white: #f0f0f0; $white: #f0f0f0;
$font: 'Fira Code', monospace; $font: 'Fira Code', monospace;
html {
position: relative;
min-height: 100%;
}
body { body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: 'Mukta', sans-serif; font-family: 'Mukta', sans-serif;
background-color: $white; background-color: $white;
} }
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
nav { nav {
background-color: $black; background-color: $black;

6
templates/base.html.twig
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="h-100">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -11,10 +11,10 @@
</head> </head>
<body> <body class="d-flex flex-column h-100">
{% block content %}{% endblock %} {% block content %}{% endblock %}
{% block extrahtml %}{% endblock %} {% block extrahtml %}{% endblock %}
<footer class="footer"> <footer class="footer mt-auto py-2">
{% block footer %}{% endblock %} {% block footer %}{% endblock %}
</footer> </footer>
</body> </body>

2
templates/page.html.twig
View File

@ -11,7 +11,7 @@
{{ header | raw }} {{ header | raw }}
</div> </div>
</header> </header>
<main> <main class="flex-shrink-0">
<div class="container py-4"> <div class="container py-4">
{{ content | raw }} {{ content | raw }}
</div> </div>