(Page créée avec « →Le CSS placé ici sera appliqué à tous les habillages. : .Test { background-image: url("http://57.128.4.144/mediawiki/index.php/Accueil#/media/Fichier:Documentation.png"); background-size:contain; background-position: 50% 50%; background-size:150%; transition: all .5s cubic-bezier(1,-0.99,.14,1.8); outline: solid 0px white; } ») |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* Le CSS placé ici sera appliqué à tous les habillages. */ | /* Le CSS placé ici sera appliqué à tous les habillages. */ | ||
. | .tile-halves { | ||
display: flex; | |||
flex-flow: row wrap; | |||
border: 1px solid var(--tile-border-color); | |||
background: var(--tile-background-color); | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | |||
} | |||
.tile-halves h2 { | |||
font-size: 1.4em; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.4em; | |||
} | |||
.tile-halves .byline + h2 { | |||
margin-top: -0.5em; | |||
} | |||
.tile-top { | |||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | |||
.tile-top.tile-image { | |||
display: flex; | |||
align-items: center; | |||
background-color: var(--byline-color); | |||
overflow: hidden; | |||
padding: 0; | |||
height: 13vw; | |||
max-height: 12em; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-halves:hover .tile-top.tile-image img { | |||
transform: scale(1.1); | |||
transition: 0.5s ease-out; | |||
} | |||
.tile-top.tile-image a { | |||
width: 100%; | |||
} | |||
.tile-top.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
height: auto; | |||
max-height: 200px; | |||
transition: 0.4s ease-out; | |||
} | |||
.tile-bottom { | |||
background: var(--tile-background-color); | |||
border-top: 1px solid var(--tile-border-color); | |||
width: 100%; | |||
padding: 1rem 1.5rem 0.6rem; | |||
} | |||
.tile-bottom.link-button { | |||
align-self: flex-end; | |||
padding: 0; | |||
} | |||
.tile-bottom.link-button a { | |||
display: block; | |||
text-align: center; | |||
padding: 0.75em 1.5em 0.8em; | |||
text-decoration: none; | |||
} | |||
.tile-bottom.read-more { | |||
background: var(--tile-link-button-color); | |||
transition: 0.3s ease-out; | |||
} | |||
.tile-bottom.read-more a { | |||
color: var(--byline-color); | |||
font-weight: bold; | |||
text-align: right; | |||
} | |||
.tile-bottom.read-more:hover { | |||
background: var(--tile-link-button-highlight-color); | |||
} | |||
.tile-bottom.read-more:hover .arrow { | |||
transform: translateX(50%); | |||
} | |||
.tile-bottom.read-more .arrow { | |||
filter: var(--byline-arrow-filter); | |||
margin-left: 0.4em; | |||
transition: 0.3s ease-out; | |||
} | } | ||
Version du 26 juin 2023 à 12:01
/* Le CSS placé ici sera appliqué à tous les habillages. */
.tile-halves {
display: flex;
flex-flow: row wrap;
border: 1px solid var(--tile-border-color);
background: var(--tile-background-color);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}
.tile-halves h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 0.4em;
}
.tile-halves .byline + h2 {
margin-top: -0.5em;
}
.tile-top {
width: 100%;
padding: 1.3rem 1.5rem 0.6rem;
}
.tile-top.tile-image {
display: flex;
align-items: center;
background-color: var(--byline-color);
overflow: hidden;
padding: 0;
height: 13vw;
max-height: 12em;
transition: 0.4s ease-out;
}
.tile-halves:hover .tile-top.tile-image img {
transform: scale(1.1);
transition: 0.5s ease-out;
}
.tile-top.tile-image a {
width: 100%;
}
.tile-top.tile-image img {
width: 100%;
object-fit: cover;
height: auto;
max-height: 200px;
transition: 0.4s ease-out;
}
.tile-bottom {
background: var(--tile-background-color);
border-top: 1px solid var(--tile-border-color);
width: 100%;
padding: 1rem 1.5rem 0.6rem;
}
.tile-bottom.link-button {
align-self: flex-end;
padding: 0;
}
.tile-bottom.link-button a {
display: block;
text-align: center;
padding: 0.75em 1.5em 0.8em;
text-decoration: none;
}
.tile-bottom.read-more {
background: var(--tile-link-button-color);
transition: 0.3s ease-out;
}
.tile-bottom.read-more a {
color: var(--byline-color);
font-weight: bold;
text-align: right;
}
.tile-bottom.read-more:hover {
background: var(--tile-link-button-highlight-color);
}
.tile-bottom.read-more:hover .arrow {
transform: translateX(50%);
}
.tile-bottom.read-more .arrow {
filter: var(--byline-arrow-filter);
margin-left: 0.4em;
transition: 0.3s ease-out;
}