mylloon.fr/static/css/portfolio.css
Mylloon 2b9f64d6e5
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
add arrow in top right corner for cards
2023-10-16 11:12:22 +02:00

97 lines
1.7 KiB
CSS

@media (prefers-color-scheme: light) {
:root {
--extreme: white;
}
}
@media (prefers-color-scheme: dark) {
:root {
--extreme: black;
}
}
:root {
--border-color: #6e6e6f;
--font-size-card: calc(var(--font-size) * 0.8);
}
main {
max-width: 840px; /* breakpoint */
}
/* List */
main ul {
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* breakpoint */
@media only screen and (max-width: 740px) {
main ul {
grid-template-columns: none;
}
}
/* Card */
main li {
display: flex;
border-radius: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background: color-mix(in srgb, var(--background) 90%, var(--extreme));
border: 1px solid
color-mix(in srgb, var(--background) 50%, var(--border-color));
transition: all 0.3s;
padding: 10px;
margin-block: 10px;
margin-inline: 5px;
}
main li:hover {
background: color-mix(in srgb, var(--background) 40%, var(--extreme));
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Element */
div {
display: flex;
flex-direction: column;
width: 100%;
}
/* Element title */
div h3 {
margin-block: 0;
}
div h3::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' %3E%3Cpath d='M21 3h-6m6 0l-9 9m9-9v6' stroke='currentColor' %3E%3C/path%3E%3Cpath d='M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6' stroke='currentColor' %3E%3C/path%3E%3C/svg%3E");
float: right;
}
@media (prefers-color-scheme: dark) {
div h3::after {
filter: invert(80%);
}
}
/* Element description */
span {
margin: auto;
margin-left: 0;
}
/* Element text */
div p,
div a {
font-size: var(--font-size-card);
}
/* Element language */
p[data-lang] {
margin: 0;
}