mylloon.fr/static/css/portfolio.css

87 lines
1.3 KiB
CSS
Raw Normal View History

2023-10-15 02:52:12 +02:00
@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);
}
2023-10-15 03:01:31 +02:00
main {
max-width: 840px; /* breakpoint */
}
2023-10-15 02:52:12 +02:00
/* List */
main ul {
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
/* breakpoint */
2023-10-15 03:01:31 +02:00
@media only screen and (max-width: 740px) {
2023-10-15 02:52:12 +02:00
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 {
2023-10-15 02:58:10 +02:00
background: color-mix(in srgb, var(--background) 40%, var(--extreme));
2023-10-15 02:52:12 +02:00
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Element */
div {
display: flex;
flex-direction: column;
2023-10-15 12:26:16 +02:00
width: 100%;
2023-10-15 02:52:12 +02:00
}
/* Element title */
div h3 {
margin-block: 0;
}
/* Element description */
span {
margin: auto;
2023-10-15 12:26:16 +02:00
margin-left: 0;
2023-10-15 02:52:12 +02:00
}
/* Element text */
div p,
div a {
font-size: var(--font-size-card);
}
2023-10-15 12:20:51 +02:00
/* Element language */
2023-10-15 02:52:12 +02:00
p[data-lang] {
margin: 0;
}