User:Lakelimbo/Main page mockup



Host your wiki with Miraheze Miraheze is a 100% free and non-profit MediaWiki hosting run by expert volunteers. We are currently hosting Wikis ( complete list | directory )

Create an account Request a wiki

F Free of charge A No ads O 100% open source M Running the most recent version of MediaWiki E Tons of extensions and skins C Possibility of custom domains H HTTPS by default J Free CSS, JS, template and image database/repository S Friendly community support + And more!

News
 * July 2022: Miraheze celebrates its 7 year anniversary!
 * June 2022: Miraheze upgraded to MediaWiki 1.38!
 * January 2022: Miraheze deployed its own physical hardware with a UK-based colocation data centre service provider

For archived news please see the news archive. Contribute Miraheze is entirely community-supported and has no advertising. We appreciate contributions of time, money, or expertise.


 * Contributing; learn how you can use your knowledge and time to help us.
 * Donate; a record of previous donations and costs are available here.

Contact

i On-wiki i Discord i IRC i Facebook i Twitter i Mastodon

Below this is just info, not supposed to go to the page
display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-evenly; align-items: center; margin-bottom: 3rem; background-color: #fff6d9; border-top: 5px solid #ffc200; padding: 1rem 0; border-radius: 0 0 10px 10px; }
 * These standalone letters are just placeholder for icons, as well as their bg colors.
 * Below is the necessary CSS to work. Of course, things can change over time.
 * If you want to test on your own, go to the browser's devtools (F12) and add the following:
 * 1) top-hero {

font: bold 2rem sans-serif; border: none; margin: 0; }
 * 1) top-hero h2 {

@media (min-width: 768px) { #top-hero div:last-of-type { order: -1; } }

display: flex; flex-wrap: wrap; row-gap: 1rem; align-items: baseline; text-align: center; margin-bottom: 3rem; }
 * 1) commitments {

flex: 17%; display: flex; flex-direction: column; align-items: center; }
 * 1) commitments div {

font: bold 2rem sans-serif; padding: 0.5rem; width: fit-content; min-width: 50px; border-radius: 10px; }
 * 1) commitments div div {

.column-container { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }

@media (min-width: 768px) { .column-container { flex-direction: row; } }

.column-container div { flex: auto; }

padding: 0 1rem; background-color: #f3d9ff; border-top: 5px solid #a100ff; border-radius: 0 0 10px 10px; }
 * 1) news {

padding: 0 1rem; background-color: #ffd9d9; border-top: 5px solid #ff0000; border-radius: 0 0 10px 10px; }
 * 1) contribute {

padding: 0 1rem 1rem; background-color: #d9ffda; border-top: 5px solid #23ff00; border-radius: 0 0 10px 10px; }
 * 1) contact {

display: flex; align-items: baseline; }
 * 1) contact div {

display: flex; flex-direction: column; align-items: center; }
 * 1) contact div div {

font: bold 2rem sans-serif; padding: 0.5rem; width: fit-content; min-width: 50px; border-radius: 10px; }
 * 1) contact div div div {