Alex at 16:14, 17 October 2024

2024-10-17T16:14:35Z

Alex at 16:12, 17 October 2024

2024-10-17T16:12:16Z

Alex: Created page with "/* --------------------- 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: #cabe9b; --tile-background-color: #f9f3eb; --tile-link-button-color: #f5e9db; --tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% ); --tile-dark-colo..."

2024-10-16T23:09:51Z

Created page with "--------------------- 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: #cabe9b; --tile-background-color: #f9f3eb; --tile-link-button-color: #f5e9db; --tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% ); --tile-dark-colo..."

New page

/* ---------------------
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: #cabe9b;
--tile-background-color: #f9f3eb;
--tile-link-button-color: #f5e9db;
--tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% );
--tile-dark-color: @white;
--tile-dark-bg: @shuttle-gray;
--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;
border: 1px solid var(--tile-border-color);
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(--byline-color);
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;
}

span {
width: 100%;
}

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

// goes inside .tile-halves
.tile-bottom {
background: var(--tile-background-color);
border-top: 1px solid var(--tile-border-color);
width: 100%;
padding: 1rem 1.5rem .6rem;

&.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;
}

}

}

/* ---------------------
oswf tile
--------------------- */

.tile.oswf-day {
margin-left: .5em;
}

.oswf-tile {
margin: 1em;

&.oswf-complete {
opacity: 0.65;
}

.oswf-summary {
font-size: 105%;
line-height: 1.6;
margin-top: -0.4em;
}

.oswf-img {
display: block;
max-width: 75px;
float: right;

img {
max-width: 100%;
height: auto;
}
}

.oswf-guidance {
border-top: 1px solid @gallery;
padding-top: 1em;
}
}

MediaWiki:Common.less/tiles.less - Revision history

Alex at 16:14, 17 October 2024

Alex at 16:12, 17 October 2024