Jump to content

Template:Neighbor Stories/styles.css: Difference between revisions

From The Petit Planet Wiki
Cleared both sides of hr. Added light background and padding for story text
mNo edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
.neighbor-story {
    margin-bottom: 1.5em;
}
.neighbor-story .mw-heading2 {
.neighbor-story .mw-heading2 {
     margin-top: 1em;
     margin-top: 1em;
}
}


/* Image */
.neighbor-story-image {
.neighbor-story-image {
     border-radius: 20px;
     border-radius: 20px;
Line 17: Line 22:


figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image {
figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image {
     margin: 0 1em 1em 0;
     margin: 0 1.75em 1.75em 0;
}
}


figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
     margin: 0 0 1em 1em;
     margin: 0 0 1.75em 1.75em;
}
}


figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
     margin: 1.75em auto 0;
     margin: 0 auto 0;
}
}


@media (max-width: 639px) {
@media (max-width: 639px) {
    body.skin--responsive figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image,
    body.skin--responsive figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
        margin: 0 auto 1em !important;
        float: none !important;
    }
     body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
     body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
         margin: 1.75em auto 0 !important;
         margin: 0 auto 0 !important;
        float: none !important;
     }
     }
}
}


.neighbor-story .poem {
/* Text */
.neighbor-story-text {
    white-space: pre-wrap;
     background: var(--background-color-0b);
     background: var(--background-color-0b);
    padding: 1em;
     border-radius: 10px;
     border-radius: 10px;
    padding: 20px;
}
}


.neighbor-story .poem p {
.neighbor-story-text p:last-of-type {
     margin: -0.5em 0;
     margin-bottom: -0.5em;
}
 
.neighbor-story-text hr + p {
    margin-top: 0;
}
}


@media (min-width: 639px) {
    .neighbor-story-text figure + p {
        margin-top: -1.5rem !important;
    }
}
/* Horizontal rule */
.neighbor-story hr {
.neighbor-story hr {
background-color: var(--background-color-3);
     width: 85%;
     width: 85%;
     margin: 0.2em auto;
     margin: 0.2em auto;
Line 57: Line 69:
}
}


.neighbor-story {
.neighbor-story-text p + hr {
     margin-bottom: 1.5em;
    margin-top: -0.75em !important;
}
 
.neighbor-story-text p:last-of-type + hr {
     margin-top: 0.75em !important;
}
}

Latest revision as of 11:09, 10 May 2026

.neighbor-story {
    margin-bottom: 1.5em;
}

.neighbor-story .mw-heading2 {
    margin-top: 1em;
}

/* Image */
.neighbor-story-image {
    border-radius: 20px;
    background: #131836; /* fallback */
    background: linear-gradient(to bottom, #131836 0%, #14364d 100%);
    max-width: max-content;
}

.neighbor-story-image img {
    background-color: transparent !important;
    color: inherit;
    filter: none;
}

figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image {
    margin: 0 1.75em 1.75em 0;
}

figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
    margin: 0 0 1.75em 1.75em;
}

figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
    margin: 0 auto 0;
}

@media (max-width: 639px) {
    body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
        margin: 0 auto 0 !important;
    }
}

/* Text */
.neighbor-story-text {
    white-space: pre-wrap;
    background: var(--background-color-0b);
    padding: 1em;
    border-radius: 10px;
}

.neighbor-story-text p:last-of-type {
    margin-bottom: -0.5em;
}

.neighbor-story-text hr + p {
    margin-top: 0;
}

@media (min-width: 639px) {
    .neighbor-story-text figure + p {
        margin-top: -1.5rem !important;
    }
}

/* Horizontal rule */
.neighbor-story hr {
	background-color: var(--background-color-3);
    width: 85%;
    margin: 0.2em auto;
    clear: both;
}

.neighbor-story-text p + hr {
    margin-top: -0.75em !important;
}

.neighbor-story-text p:last-of-type + hr {
    margin-top: 0.75em !important;
}