User:Saag/common.css: Difference between revisions
No edit summary |
mNo edit summary |
||
| (164 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/*:root {*/ | |||
width: | /* --weapon-orange: #d5903f;*/ | ||
/* --vitality-green: #74b01c; */ | |||
/* --spirit-purple: #c288f0;*/ | |||
/*}*/ | |||
/*a:link, a:visited {*/ | |||
/* color: #694a2c;*/ | |||
/*}*/ | |||
/*body, .mw-header, .mw-page-container, #article, #content, #catlinks {*/ | |||
/* color: #21130b;*/ | |||
/* background-color: #f5eedd;*/ | |||
/*}*/ | |||
:root { | |||
--byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%); | |||
--tile-border-color: #cabe9b; | |||
--tile-background-color: #f9f3eb; | |||
--tile-link-button-color: #f5e9db; | |||
--tile-link-button-highlight-color: #dfccb0; | |||
--tile-dark-color: #fff; | |||
--tile-dark-bg: #5d6773; | |||
--tile-dark-link-color: #ccc; | |||
--tile-dark-byline-color: rgba(255, 255, 255, 0.7); | |||
--tile-dark-header-color: #fff; | |||
} | |||
.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: 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 span { | |||
width: 100%; | |||
} | |||
.tile-top.tile-image img { | |||
width: 100%; | |||
object-fit: cover; | |||
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; | |||
} | } | ||