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