MediaWiki:Common.less/tiles.less: Difference between revisions

/* ---------------------
           tiles
   --------------------- */
// mainpage.less relies on this; check before changing anything

:root {
	--byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%); // match --byline-color
	--tile-border-color: @BODY_BORDER;
	--tile-background-color: @BODY_LIGHT;
	--tile-link-button-color: #f5e9db;
	--tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% );
	--tile-dark-color: @white;
	--tile-dark-bg: @BODY_DARK;
	--tile-dark-link-color: #ccc;
	--tile-dark-byline-color: fade( @white, 70% );
	--tile-dark-header-color: @white;
}

.tile {
    background: var(--tile-background-color);
    border: 1px solid var(--tile-border-color);
    box-shadow: @box-shadow;
    padding: 1.5em 2em 1em;
    max-width: 40em;

    h2 {
    	font-size: 1.4em;
        font-weight: bold;
        border: none;
        margin: 0 0 .4em;
	}

    // reduce spacing when byline and heading appear together
    // (which should be the only way bylines appear)
    .byline + h2 {
        margin-top: -0.5em;
    }

    &.dark {
        color: var(--tile-dark-color);
        background: var(--tile-dark-bg);
        border: none;
        box-shadow: @box-shadow-dark;

        h2 {
            color: var(--tile-dark-header-color);
        }

        a {
            color: var(--tile-dark-link-color);
        }

        .byline {
            color: var(--tile-dark-byline-color);
        }

    }

}

.byline {
	font-size: .9em;
	color: var(--byline-color);

	a {
		color: var(--byline-color);
	}

}

/* ---------------------
        tile halves
   --------------------- */

// contains .tile or .tile-halves
.tile-row {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 1em;
}

.tile-halves {
	display: flex;
	flex-flow: row wrap;
	background: var(--tile-background-color);
	box-shadow: @box-shadow;

    h2 {
        font-size: 1.4em;
        font-weight: bold;
        border: none;
        margin: 0 0 .4em;
    }

    .byline + h2 {
        margin-top: -0.5em;
    }

}

// goes inside .tile-halves
.tile-top {
	width: 100%;
	padding: 1.3rem 1.5rem .6rem;

	&.tile-image {
		display: flex;
		align-items: center; // vertically center images
		background-color: var(--body-light);
		overflow: hidden;
		padding: 0;
		height: 13vw;
		max-height: 12em;
		transition: .4s ease-out;

		.tile-halves:hover & img {
			transform: scale(1.1);
			transition: .5s ease-out;
		}


        a {
            width: 100%;
        }

        img {
            width: 100%;
            object-fit: cover;
            max-height: 200px;
            transition: .4s ease-out;
        }
    }
}

// goes inside .tile-halves
.tile-bottom {
    background: var(--body-dark);
    width: 100%;
    padding: 1rem 1.5rem .6rem;
    
    h2 {
    	a {
    		color: @white !important;
    	}
    }

    &.link-button {
        align-self: flex-end; // have link stick to the bottom
        padding: 0;

        a {
            display: block;
            text-align: center;
            padding: .75em 1.5em .8em;
            text-decoration: none;
        }

    }

    // must be used in conjunction with .link-button
    &.read-more {
        background: var(--tile-link-button-color);
        transition: .3s ease-out;

        a {
            color: var(--byline-color);
            font-weight: bold;
            text-align: right;
        }

        &:hover {
            background: var(--tile-link-button-highlight-color);

            .arrow {
                transform: translateX(50%);
            }

        }

        .arrow {
            filter: var(--byline-arrow-filter);
            margin-left: .4em;
            transition: .3s ease-out;
        }

    }

}