diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 18b79e4..693f306 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -4,7 +4,16 @@
}
.header {
- padding: 6rem;
+ padding: 6rem 0;
+ .container-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: column;
+ @media (min-width: 768px) {
+ flex-direction: row;
+ }
+ }
}
.header-link {
@@ -29,6 +38,7 @@
font-size: 2rem;
font-weight: normal;
margin: 0;
+ text-align: center;
}
.header .user-menu {
@@ -60,10 +70,11 @@
}
footer {
margin-top: 1rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 6rem;
+ .container {
+ justify-content: space-between;
+ align-items: center;
+ display: flex;
+ }
}
html, body {
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
index e397c2d..32c2af4 100644
--- a/src/main/resources/templates/about.html
+++ b/src/main/resources/templates/about.html
@@ -10,9 +10,9 @@
</head>
<body>
<header class="header bg-primary text-white py-3">
- <div class="container d-flex justify-content-between align-items-center">
+ <div class="container container-header">
<img th:src="@{/images/SU_logotyp_Landscape_Invert.svg}" alt="Stockholm University Logotype" class="logo">
- <h1 class="app-title mb-0"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
+ <h1 class="app-title"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
<a class="user-menu text-white text-decoration-none dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
@@ -37,11 +37,12 @@
<p>All processing is done locally, and no data is sent to the cloud, ensuring your privacy and data security.</p>
</main>
<footer class="bg-primary text-white py-4">
- <span>© 2024 Seshat App</span>
- <a href="/about" class="text-white text-decoration-none">About</a>
+ <div class="container">
+ <span>© 2024 Seshat App</span>
+ <a href="/about" class="text-white text-decoration-none">About</a>
+ </div>
</footer>
<script type="text/javascript" th:src="@{/3p/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>
-<script type="text/javascript" th:src="@{/js/script.js}"></script>
</body>
</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index a2ee258..f420a81 100644
--- a/src/main/resources/templates/file-management.html
+++ b/src/main/resources/templates/file-management.html
@@ -10,7 +10,7 @@
</head>
<body>
<header class="header bg-primary text-white py-3">
- <div class="container d-flex justify-content-between align-items-center">
+ <div class="container container-header">
<img th:src="@{/images/SU_logotyp_Landscape_Invert.svg}" alt="Stockholm University Logotype" class="logo">
<h1 class="app-title mb-0"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
@@ -164,8 +164,10 @@
</section>
</main>
<footer class="bg-primary text-white text-center py-3">
- <p>© 2024 Seshat App</p>
- <a href="/about" class="text-white text-decoration-none">About</a>
+ <div class="container">
+ <span>© 2024 Seshat App</span>
+ <a href="/about" class="text-white text-decoration-none">About</a>
+ </div>
</footer>
<script type="text/javascript" th:src="@{/3p/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>