Aucun résumé des modifications |
Aucun résumé des modifications |
||
(26 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
.tile-halves { | .tile-halves { | ||
display: flex; | |||
flex-flow: row wrap; | |||
border-radius: 10px; | |||
} | |||
} | |||
.tile-halves h2 { | .tile-halves h2 { | ||
font-family: "Anton"; | |||
font-size: 1.4em; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.4em; | |||
} | text-align: center; | ||
} | |||
.tile- | .tile-mainTitle { | ||
font-family: "Anton"; | |||
} | font-size: 2.4em; | ||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.4em; | |||
text-align: center; | |||
} | |||
.tile-top { | .tile-top { | ||
width: 100%; | |||
padding: 1.3rem 1.5rem 0.6rem; | |||
} | } | ||
.tile-top.tile-image { | .tile-top.tile-image { | ||
border-radius: 10px; | |||
height: fit-content; | |||
max-height: 20em; | |||
object-fit: cover; | |||
display: flex; | |||
align-items: center; | |||
overflow: hidden; | |||
padding: 0; | |||
} | transition: 0.4s ease-out; | ||
} | |||
.tile-halves:hover .tile-top.tile-image img { | .tile-halves:hover .tile-top.tile-image img { | ||
transform: scale(1.1); | |||
transition: 0.5s ease-out; | |||
} | } | ||
.tile-top.tile-image a { | .tile-top.tile-image a { | ||
width: 100%; | |||
} | height: 100%; | ||
} | |||
.tile- | .tile-bottom { | ||
width: 100%; | |||
padding: 1rem 1.5rem 0.6rem; | |||
} | |||
} | |||
.tile-bottom { | .tile-bottom.link-button { | ||
align-self: flex-end; | |||
padding: 3; | |||
} | |||
} | |||
.tile-bottom.link-button { | .tile-bottom.link-button a { | ||
display: block; | |||
text-align: center; | |||
} | padding: 0.75em 1.5em 0.8em; | ||
text-decoration: none; | |||
} | |||
.tile-bottom. | .tile-bottom.read-more { | ||
background: var(--tile-link-button-color); | |||
transition: 0.3s ease-out; | |||
} | |||
} | |||
.tile-bottom.read-more { | .tile-bottom.read-more a { | ||
font-weight: bold; | |||
text-align: right; | |||
} | } | ||
.tile-bottom.read-more | .tile-bottom.read-more:hover .arrow { | ||
transform: translateX(50%); | |||
} | |||
} | |||
.tile-bottom.read-more | .tile-bottom.read-more .arrow { | ||
filter: var(--byline-arrow-filter); | |||
} | margin-left: 0.4em; | ||
transition: 0.3s ease-out; | |||
} | |||
.tile- | .tile-row { | ||
display: flex; | |||
} | flex-flow: row wrap; | ||
margin-bottom: 1em; | |||
} | |||
. | .mainpage-contents .tile-halves { | ||
flex: 1; | |||
margin-right: 0.9rem; | |||
} | |||
} | |||
.tile- | .mainpage-contents .tile-halves:hover img { | ||
transform: scale(1.04); | |||
} | |||
} | |||
.mainpage-contents .tile-halves { | .mainpage-contents .tile-halves:last-child { | ||
margin-right: 0; | |||
} | |||
} | |||
.mainpage-contents | .mainpage-contents .tile-top { | ||
position: relative; | |||
} | } | ||
.mainpage-contents .tile- | .mainpage-contents .tile-top h2 a { | ||
display: block; | |||
} | text-align: center; | ||
text-decoration: none; | |||
line-height: 4.5rem; | |||
padding-left: 0.45rem; | |||
} | |||
.mainpage-contents | .mainpage-contents h2 { | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
. | .animate-charcter { | ||
background-image: linear-gradient( | |||
-225deg, | |||
#231557 0%, | |||
#44107a 29%, | |||
#ff1361 67%, | |||
#fff800 87%, | |||
#231557 100% | |||
); | |||
background-size: auto auto; | |||
background-clip: border-box; | |||
} | background-size: 200% auto; | ||
color: #fff; | |||
background-clip: text; | |||
text-fill-color: transparent; | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
animation: textclip 5s linear infinite; | |||
} | |||
@keyframes textclip { | |||
to { | |||
background-position: 200% center; | |||
} | |||
} | } | ||
Version actuelle datée du 11 juillet 2023 à 17:02
.tile-halves { display: flex; flex-flow: row wrap; border-radius: 10px; } .tile-halves h2 { font-family: "Anton"; font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 0.4em; text-align: center; } .tile-mainTitle { font-family: "Anton"; font-size: 2.4em; font-weight: bold; border: none; margin: 0 0 0.4em; text-align: center; } .tile-top { width: 100%; padding: 1.3rem 1.5rem 0.6rem; } .tile-top.tile-image { border-radius: 10px; height: fit-content; max-height: 20em; object-fit: cover; display: flex; align-items: center; overflow: hidden; padding: 0; 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%; height: 100%; } .tile-bottom { width: 100%; padding: 1rem 1.5rem 0.6rem; } .tile-bottom.link-button { align-self: flex-end; padding: 3; } .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 { font-weight: bold; text-align: right; } .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; } .tile-row { display: flex; flex-flow: row wrap; margin-bottom: 1em; } .mainpage-contents .tile-halves { flex: 1; margin-right: 0.9rem; } .mainpage-contents .tile-halves:hover img { transform: scale(1.04); } .mainpage-contents .tile-halves:last-child { margin-right: 0; } .mainpage-contents .tile-top { position: relative; } .mainpage-contents .tile-top h2 a { display: block; text-align: center; text-decoration: none; line-height: 4.5rem; padding-left: 0.45rem; } .mainpage-contents h2 { margin: 0; padding: 0; } .animate-charcter { background-image: linear-gradient( -225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 87%, #231557 100% ); background-size: auto auto; background-clip: border-box; background-size: 200% auto; color: #fff; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textclip 5s linear infinite; } @keyframes textclip { to { background-position: 200% center; } }