mylloon.fr/static/css/portfolio.css

102 lines
1.8 KiB
CSS
Raw Normal View History

@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));
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
main li[role="button"]:hover {
cursor: pointer;
}
/* Element */
div {
display: flex;
flex-direction: column;
width: 100%;
}
/* Element title */
div h3 {
margin-block: 0;
}
/* Redirection arrow on clickable element */
li[role="button"] div h3::after {
2023-10-16 11:14:49 +02:00
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' stroke='currentColor' %3E%3Cpath d='M21 3h-6m6 0l-9 9m9-9v6' %3E%3C/path%3E%3Cpath d='M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6' %3E%3C/path%3E%3C/svg%3E");
float: right;
}
@media (prefers-color-scheme: dark) {
li[role="button"] 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;
}