Skip to content

Commit 8f0cf93

Browse files
CtoicCtoic
authored
Merge pull request #216 from maanuu5/fix-h-f
Fixed The UI of Header & Footer
2 parents efed5c4 + 3166c55 commit 8f0cf93

3 files changed

Lines changed: 186 additions & 8 deletions

File tree

‎pages/footer.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
<div class="container border-top" style="margin-top: 80px">
33
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-3 mt-5 pb-5 g-4">
44
<div class="col mb-3">
5-
<div class="d-inline-flex align-items-center">
6-
<a href="./index.html" class="mb-3 link-body-emphasis text-decoration-none">
7-
<img src="./Images/lisbook-logo-1.png" alt="Lisbook Logo" width="100" />
5+
<div class="footer-brand">
6+
<a href="./index.html" class="brand-link text-decoration-none">
7+
<img src="./Images/lisbook-logo-1.png" alt="Lisbook Logo" width="84" />
88
</a>
9-
<p class="footer-logo-text h1 fw-bold ms-3">Lisbook</p>
9+
<div class="brand-text">
10+
<div class="brand-title">Lisbook</div>
11+
<p class="brand-tagline">LisBook is a straightforward audiobook player designed for simplicity and ease of use.</p>
12+
</div>
1013
</div>
11-
<p>LisBook is a straightforward audiobook player designed for simplicity and ease of use.</p>
1214
</div>
1315

1416
<div class="col mb-3">

‎pages/header.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,15 @@
6464
/>
6565
</svg>
6666
</button>
67+
<!-- Language selector placed inline with menu items -->
68+
<div class="language-selector">
69+
<select id="language" onchange="changeLanguage()" aria-label="Language selector">
70+
<option value="en">EN</option>
71+
<option value="fr">FR</option>
72+
<option value="es">ES</option>
73+
<option value="zh">中文</option>
74+
</select>
75+
</div>
6776
</div>
6877

6978
<!-- Mobile Menu Toggle Button -->

‎style.css‎

Lines changed: 170 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -831,15 +831,15 @@ header {
831831
top: 0;
832832
z-index: 1000;
833833
background-color: #1a1a1a; /* Ensures the header is fixed at the top */
834-
padding: 10px 0;
834+
padding: 6px 0;
835835
}
836836

837837
#menu {
838838
background-color: inherit; /* Menu should inherit the header's background color */
839839
}
840840
/* Make sure the body doesn't hide underneath the fixed header */
841841
body {
842-
margin-top: 80px; /* Adjust this margin to match the height of the header */
842+
margin-top: 68px; /* Adjust this margin to match the height of the header */
843843
}
844844

845845
/* Light theme adjustments */
@@ -872,12 +872,82 @@ header .container {
872872
display: flex;
873873
justify-content: space-between;
874874
align-items: center; /* Center items vertically */
875-
height: 60px; /* Fixed height */
875+
height: 52px; /* Fixed height */
876876
}
877877
#menu {
878878
background-color: inherit;
879879
position: relative;
880880
}
881+
882+
/* Elegant header spacing and hover states */
883+
header {
884+
backdrop-filter: saturate(120%) blur(6px);
885+
-webkit-backdrop-filter: saturate(120%) blur(6px);
886+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
887+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
888+
}
889+
890+
/* Desktop menu layout: even spacing with gap */
891+
#menu {
892+
display: flex;
893+
align-items: center;
894+
gap: 1.25rem; /* 20px between items */
895+
}
896+
897+
/* Subtle upward nudge for desktop alignment */
898+
@media (min-width: 1024px) {
899+
#menu {
900+
margin-top: -4px;
901+
}
902+
}
903+
904+
/* Remove legacy margins inside header menu to rely on gap spacing */
905+
#menu .text-gray-300 {
906+
margin: 0;
907+
}
908+
909+
/* Click targets and elegant hover */
910+
#menu a,
911+
#menu button {
912+
padding: 8px 12px;
913+
border-radius: 10px;
914+
line-height: 1;
915+
transition: color 0.2s ease, background-color 0.2s ease;
916+
}
917+
918+
#menu a:hover,
919+
#menu button:hover {
920+
background-color: rgba(255, 255, 255, 0.06);
921+
color: var(--accent-color);
922+
}
923+
924+
/* Logo spacing so it breathes */
925+
a.logo-text {
926+
display: inline-flex;
927+
align-items: center;
928+
gap: 10px;
929+
padding: 6px 8px;
930+
border-radius: 10px;
931+
}
932+
933+
/* Light theme header refinements */
934+
body.light-theme header {
935+
border-bottom-color: rgba(0, 0, 0, 0.06);
936+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
937+
}
938+
939+
/* Mobile menu spacing: larger targets and vertical rhythm */
940+
@media (max-width: 1024px) {
941+
#menu {
942+
gap: 1.75rem;
943+
}
944+
945+
#menu a,
946+
#menu button {
947+
padding: 10px 14px;
948+
font-size: 1.05rem;
949+
}
950+
}
881951
/* Adjusting the layout */
882952
.profile-and-friends {
883953
display: flex;
@@ -1071,6 +1141,103 @@ header .container {
10711141
background-color: inherit;
10721142
}
10731143

1144+
/* Footer size and position tweaks (compact and slightly lower) */
1145+
.container.border-top {
1146+
margin-top: 180px !important; /* push footer down a bit */
1147+
}
1148+
1149+
footer.row {
1150+
padding-top: 6px; /* smaller footer height */
1151+
padding-bottom: 10px; /* smaller footer height */
1152+
}
1153+
1154+
.bg-white-900.text-center {
1155+
padding-top: 10px; /* smaller bottom bar */
1156+
padding-bottom: 10px;
1157+
}
1158+
1159+
/* Align footer contents directly under their headings */
1160+
footer.row .nav.flex-column.ms-2 {
1161+
margin-left: 0 !important;
1162+
}
1163+
1164+
/* Spacing between footer headings and their content */
1165+
footer.row .footer-col-title {
1166+
margin-bottom: 12px !important; /* ensure clear gap under headings */
1167+
}
1168+
1169+
footer.row .nav.flex-column {
1170+
margin-top: 0; /* uniform spacing governed by heading margin */
1171+
}
1172+
1173+
/* Stay Updated block spacing below heading */
1174+
footer.row .col.mb-3:last-child > p {
1175+
margin-top: 0; /* uniform spacing governed by heading margin */
1176+
}
1177+
1178+
/* Ensure "Stay Updated" content aligns under its heading */
1179+
footer.row .col.mb-3:last-child {
1180+
display: flex;
1181+
flex-direction: column;
1182+
align-items: center; /* center under heading */
1183+
text-align: center;
1184+
}
1185+
1186+
footer.row .col.mb-3:last-child p,
1187+
footer.row .col.mb-3:last-child form,
1188+
footer.row .col.mb-3:last-child #newsletterMessage {
1189+
margin-left: 0 !important;
1190+
align-self: center;
1191+
}
1192+
1193+
/* Shift ONLY the footer logo slightly left on desktop */
1194+
@media (min-width: 992px) {
1195+
footer.row .col.mb-3:first-child a img {
1196+
margin-left: -14px;
1197+
}
1198+
}
1199+
1200+
/* Reduce space between footer logo and its heading (move heading left a bit) */
1201+
@media (min-width: 992px) {
1202+
footer.row .col.mb-3:first-child .footer-logo-text {
1203+
margin-left: 6px !important; /* legacy selector; safe to keep */
1204+
}
1205+
}
1206+
1207+
/* Footer brand (left column) */
1208+
.footer-brand {
1209+
display: flex;
1210+
align-items: center;
1211+
gap: 10px;
1212+
}
1213+
1214+
.footer-brand .brand-link img {
1215+
display: block;
1216+
}
1217+
1218+
.footer-brand .brand-title {
1219+
font-weight: 800;
1220+
font-size: 1.5rem;
1221+
line-height: 1.1;
1222+
margin-bottom: 12px;
1223+
}
1224+
1225+
.footer-brand .brand-text {
1226+
display: flex;
1227+
flex-direction: column;
1228+
align-items: center; /* center tagline under title */
1229+
}
1230+
1231+
.footer-brand .brand-tagline {
1232+
margin: 0;
1233+
font-size: 0.9rem;
1234+
opacity: 0.8;
1235+
text-align: center;
1236+
max-width: 300px;
1237+
}
1238+
1239+
/* Reverted: no left shift for first footer column */
1240+
10741241
.flex-item {
10751242
flex: 1;
10761243
margin: 0 20px;

0 commit comments

Comments
 (0)