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;
$font: 'Fira Code', monospace;
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: 'Mukta', sans-serif;
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 {
background-color: $black;

6
templates/base.html.twig
View File

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

2
templates/page.html.twig
View File

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