📌 Current mission: start filling the wiki — create pages, upload images, and join the Discord!

MediaWiki:Common.css: Difference between revisions

From Asylum Wiki
Jump to navigationJump to search
Add main page layout CSS
Refine layout CSS with real measurements
Line 123: Line 123:
     .asy-portal-grid { grid-template-columns: repeat(2, 1fr); }
     .asy-portal-grid { grid-template-columns: repeat(2, 1fr); }
}
}
/* --- v2: refined to match soyjak.wiki's actual measurements --- */
body {
    background-image: linear-gradient(rgba(115, 124, 190, 0.25) 100px, rgba(0, 0, 0, 0) 300px);
    background-repeat: no-repeat;
}
.asy-outer, .asy-col {
    border-radius: 5px;
    border: none !important;
    box-shadow: none;
}
.asy-outer {
    background: #eef2ff;
}
.asy-header {
    background: #ababff;
    border-radius: 5px;
    padding: 14px 20px;
}
.asy-col {
    background: #eef2ff;
}
.asy-portal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.asy-portal {
    flex: 0 0 170px;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0 5px;
}
.asy-portal a {
    font-weight: bold;
}
.asy-portal.c1 { background: #ffffff; }
.asy-portal.c2 { background: #eef2ff; }
.asy-portal.c3 { background: #f2f2f2; }
.asy-portal.c4 { background: #8899aa; }
.asy-portal.c4 a { color: #fff !important; }
.asy-portal.c5 { background: #b1cc6a; }
.asy-portal.c6 { background: #f5e0ff; }
.asy-portal.c7 { background: #b57245; }
.asy-portal.c7 a { color: #fff !important; }
.asy-portal.c8 { background: #192d2c; }
.asy-portal.c8 a { color: #fff !important; }

Revision as of 15:28, 12 July 2026

/* 4sylum Wiki — retro/classic theme (soyjak.wiki-style, MonoBook skin).
   This is MediaWiki:Common.css — applies to all skins.
   Edit live at https://4sylum.com/wiki/MediaWiki:Common.css (sysop only). */

/* Deliberately close to stock MonoBook — that flat, boxy, early-2000s
   Wikipedia look is the whole point. Only light accent tweaks below. */

a.new, #p-cactions a.new {
    color: #cc2200;
}

a {
    color: #002bb8;
}

a:visited {
    color: #5a3696;
}

.firstHeading {
    border-bottom: 1px solid #aaa;
}

/* Slightly punchier sitename/logo area, still period-accurate */
#p-logo a {
    background-repeat: no-repeat;
}

table.wikitable {
    background-color: #f9f9f9;
    border: 1px solid #aaa;
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background-color: #eaecf0;
    border: 1px solid #aaa;
}

/* Add your own retro/meme flourishes below this line */
/* --- Main Page layout blocks (soyjak.wiki-style boxed sections) --- */

.asy-outer {
    border: 1px solid #8888cc;
    background: #e6e6fa;
    padding: 12px 20px;
    margin-bottom: 10px;
}

.asy-header {
    text-align: center;
}

.asy-header .asy-title {
    font-size: 28px;
    font-weight: bold;
}

.asy-header .asy-tagline {
    font-style: italic;
    margin-top: 4px;
}

.asy-navlinks {
    text-align: center;
    border-top: 1px solid #8888cc;
    margin-top: 10px;
    padding-top: 6px;
}

.asy-columns {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.asy-col {
    flex: 1;
    border: 1px solid #8888cc;
    background: #e6e6fa;
    padding: 10px;
}

.asy-col h2 {
    color: #a00000;
    border-bottom: none;
    text-align: center;
    font-size: 22px;
    margin-top: 0;
}

.asy-box-inner {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.asy-portal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.asy-portal {
    text-align: center;
    padding: 10px 6px;
    border: 1px solid #999;
    background: #f0f0f8;
    font-weight: bold;
}

.asy-portal a {
    text-decoration: none;
}

.asy-events li {
    margin-bottom: 4px;
}

@media (max-width: 800px) {
    .asy-columns { flex-direction: column; }
    .asy-portal-grid { grid-template-columns: repeat(2, 1fr); }
}
/* --- v2: refined to match soyjak.wiki's actual measurements --- */

body {
    background-image: linear-gradient(rgba(115, 124, 190, 0.25) 100px, rgba(0, 0, 0, 0) 300px);
    background-repeat: no-repeat;
}

.asy-outer, .asy-col {
    border-radius: 5px;
    border: none !important;
    box-shadow: none;
}

.asy-outer {
    background: #eef2ff;
}

.asy-header {
    background: #ababff;
    border-radius: 5px;
    padding: 14px 20px;
}

.asy-col {
    background: #eef2ff;
}

.asy-portal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.asy-portal {
    flex: 0 0 170px;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0 5px;
}

.asy-portal a {
    font-weight: bold;
}

.asy-portal.c1 { background: #ffffff; }
.asy-portal.c2 { background: #eef2ff; }
.asy-portal.c3 { background: #f2f2f2; }
.asy-portal.c4 { background: #8899aa; }
.asy-portal.c4 a { color: #fff !important; }
.asy-portal.c5 { background: #b1cc6a; }
.asy-portal.c6 { background: #f5e0ff; }
.asy-portal.c7 { background: #b57245; }
.asy-portal.c7 a { color: #fff !important; }
.asy-portal.c8 { background: #192d2c; }
.asy-portal.c8 a { color: #fff !important; }