PrivateCoffee/wikimore
5
1
Fork 1
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): refine layout and infobox styling

Browse source 
Removed redundant general styling and adjusted the widths in several elements to improve responsive behavior. Enhanced infobox design with a distinct title section for better readability and visual separation. These changes address layout issues on smaller screens and improve overall user experience.

Fixes #14, maybe?
This commit is contained in:
Kumi 2024-08-28 13:47:39 +02:00
parent 286a73cbc6
commit 2105850846
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/wikimore/static/css/style.css
View file

@ -1,16 +1,11 @@
/* General styling */ /* General styling */
* {
box-sizing: border-box;
max-width: 100%;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f8f9fa; background-color: #f8f9fa;
width: 100%; width: 100%;
overflow-x: hidden; overflow-x:
} }
/* Link styling */ /* Link styling */
@ -110,8 +105,11 @@ h1 {
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
float: right; float: right;
width: 250px; width: 300px;
min-width: 300px;
max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow-x: auto;
clear: right; clear: right;
} }
@ -482,19 +480,25 @@ section>.category-link::after {
.infobox { .infobox {
float: right; float: right;
margin: 1em; margin: 1em;
width: 300px;
min-width: 300px; min-width: 300px;
width: fit-content !important; max-width: 100%;
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #ddd; border: 1px solid #ddd;
font-size: small; font-size: small;
border-collapse: collapse; border-collapse: collapse;
max-width: 100%;
display: flex;
flex-direction: column;
overflow-x: auto; overflow-x: auto;
clear: right; clear: right;
} }
.infobox-title {
background-color: #1e90ff;
color: white;
font-weight: bold;
text-align: center;
padding: 10px;
}
.infobox-above, .infobox-above,
.infobox-header { .infobox-header {
background-color: #1e90ff; background-color: #1e90ff;