MediaWiki:Common.less/tiles.less: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary |
No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 11: | Line 11: | ||
--tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% ); |
--tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% ); |
||
--tile-dark-color: @white; |
--tile-dark-color: @white; |
||
--tile-dark-bg: @ |
--tile-dark-bg: @BODY_DARK; |
||
--tile-dark-link-color: #ccc; |
--tile-dark-link-color: #ccc; |
||
--tile-dark-byline-color: fade( @white, 70% ); |
--tile-dark-byline-color: fade( @white, 70% ); |
||
Line 83: | Line 83: | ||
display: flex; |
display: flex; |
||
flex-flow: row wrap; |
flex-flow: row wrap; |
||
border: 1px solid var(--tile-border-color); |
|||
background: var(--tile-background-color); |
background: var(--tile-background-color); |
||
box-shadow: @box-shadow; |
box-shadow: @box-shadow; |
||
Line 108: | Line 107: | ||
display: flex; |
display: flex; |
||
align-items: center; // vertically center images |
align-items: center; // vertically center images |
||
background-color: var(-- |
background-color: var(--body-light); |
||
overflow: hidden; |
overflow: hidden; |
||
padding: 0; |
padding: 0; |
||
Line 136: | Line 135: | ||
// goes inside .tile-halves |
// goes inside .tile-halves |
||
.tile-bottom { |
.tile-bottom { |
||
background: var(-- |
background: var(--body-dark); |
||
border-top: 1px solid var(--tile-border-color); |
|||
width: 100%; |
width: 100%; |
||
padding: 1rem 1.5rem .6rem; |
padding: 1rem 1.5rem .6rem; |
||
h2 { |
|||
a { |
|||
color: @white !important; |
|||
} |
|||
} |
|||
&.link-button { |
&.link-button { |
Latest revision as of 01:25, 1 April 2024
/* ---------------------
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;
}
}
}