Main Page: Difference between revisions
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
<style type="text/css"> | |||
/* Main Page Header Styles */ | |||
.mainpage-header { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
padding: 20px; | |||
box-sizing: border-box; | |||
} | |||
.header-intro, .header-stats { | |||
flex: 1; | |||
min-width: 300px; /* Ensures that the intro and stats sections do not become too narrow */ | |||
padding: 10px; | |||
box-sizing: border-box; | |||
} | |||
.header-intro h1, .header-intro p, .header-stats ul { | |||
margin: 10px 0; | |||
} | |||
.header-stats ul { | |||
list-style-type: none; | |||
padding: 0; | |||
} | |||
.header-stats ul li { | |||
display: inline-block; | |||
margin-right: 15px; | |||
} | |||
/* Main Page Contents Styles */ | |||
.mainpage-contents { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-around; | |||
gap: 20px; /* Adjusts the space between items */ | |||
padding: 20px; | |||
box-sizing: border-box; | |||
} | |||
.tile-halves { | |||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
min-width: 250px; /* Minimum width of each tile */ | |||
max-width: 300px; /* Maximum width to maintain uniformity */ | |||
box-sizing: border-box; | |||
} | |||
.tile-top, .tile-bottom { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
text-align: center; | |||
padding: 10px; | |||
box-sizing: border-box; | |||
} | |||
.tile-top { | |||
flex-grow: 1; | |||
} | |||
.link-button { | |||
width: 100%; | |||
padding: 10px 0; /* Adds padding to the bottom part for better spacing */ | |||
box-sizing: border-box; | |||
} | |||
/* Enhancements for responsiveness */ | |||
@media (max-width: 768px) { | |||
.mainpage-header, .mainpage-contents { | |||
justify-content: center; | |||
} | |||
.header-intro, .header-stats, .tile-halves { | |||
flex: 0 0 100%; /* Forces items to take full width on smaller screens */ | |||
max-width: none; /* Removes max-width restriction for better flexibility */ | |||
} | |||
} | |||
</style> | |||
<div class="mainpage-header"> | <div class="mainpage-header"> | ||
<div class="header-intro"> | <div class="header-intro"> |
Revision as of 06:18, 18 February 2024
<style type="text/css"> /* Main Page Header Styles */ .mainpage-header {
display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; box-sizing: border-box;
}
.header-intro, .header-stats {
flex: 1; min-width: 300px; /* Ensures that the intro and stats sections do not become too narrow */ padding: 10px; box-sizing: border-box;
}
.header-intro h1, .header-intro p, .header-stats ul {
margin: 10px 0;
}
.header-stats ul {
list-style-type: none; padding: 0;
}
.header-stats ul li {
display: inline-block; margin-right: 15px;
}
/* Main Page Contents Styles */ .mainpage-contents {
display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; /* Adjusts the space between items */ padding: 20px; box-sizing: border-box;
}
.tile-halves {
display: flex; flex-direction: column; flex: 1; min-width: 250px; /* Minimum width of each tile */ max-width: 300px; /* Maximum width to maintain uniformity */ box-sizing: border-box;
}
.tile-top, .tile-bottom {
display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px; box-sizing: border-box;
}
.tile-top {
flex-grow: 1;
}
.link-button {
width: 100%; padding: 10px 0; /* Adds padding to the bottom part for better spacing */ box-sizing: border-box;
}
/* Enhancements for responsiveness */ @media (max-width: 768px) {
.mainpage-header, .mainpage-contents { justify-content: center; }
.header-intro, .header-stats, .tile-halves { flex: 0 0 100%; /* Forces items to take full width on smaller screens */ max-width: none; /* Removes max-width restriction for better flexibility */ }
} </style>
Welcome to the RuneSaga Wiki!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Number of articles: 907
- Number of files: 2,535
- Number of active users: 5
- Number of edits: 11,161