blitzwing/wikimore
1
0
Fork 0
forked from PrivateCoffee/wikimore
Code Pull requests Activity

feat: Add new side-box styling for improved layout

Browse source 
Introduced .side-box and related classes to enhance the styling
and layout of side boxes. This includes background color, border,
padding, margin, float, and display properties.

Also added media queries to ensure side-box responsiveness on
devices with max widths of 768px and 480px.

Enhances page design, providing a more flexible and visually
consistent user interface. Fixes #11.
This commit is contained in:
Kumi 2024-08-18 13:33:11 +02:00
parent f828386be8
commit 2803d530fa
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -386,6 +386,55 @@ span {
display: inline;
}
/* Side box styling */
.side-box {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
float: right;
width: 300px;
box-sizing: border-box;
display: flex;
flex-direction: column;
clear: right;
}
.side-box-right {
float: right;
}
.side-box-flex {
display: flex;
align-items: center;
}
.side-box-image {
flex: 0 0 auto;
margin-right: 10px;
}
.side-box-image img {
display: block;
max-width: 100%;
height: auto;
}
.side-box-text {
flex: 1 1 auto;
font-size: 0.9em;
line-height: 1.5;
}
.side-box-text a {
color: #1e90ff;
text-decoration: none;
}
.side-box-text a:hover {
text-decoration: underline;
}
/* Media query for devices with a max width of 768px */
@media (max-width: 768px) {
#header {
@ -421,6 +470,13 @@ span {
display: block;
margin: 10px 0;
}
.side-box {
max-width: 100%;
margin: 10px 0;
float: none;
clear: none;
}
}
/* Media query for devices with a max width of 480px */
@ -465,4 +521,15 @@ span {
max-width: 100%;
margin: 5px 0;
}
.side-box {
max-width: 100%;
margin: 5px 0;
float: none;
clear: none;
}
.side-box-text {
font-size: 0.8em;
}
}