81 lines
1.2 KiB
CSS
81 lines
1.2 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);
|
|
}
|
|
|
|
/* List */
|
|
main ul {
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* breakpoint */
|
|
@media only screen and (max-width: 640px) {
|
|
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;
|
|
}
|
|
|
|
/* Hover Card */
|
|
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;
|
|
}
|
|
|
|
/* Element title */
|
|
div h3 {
|
|
margin-block: 0;
|
|
}
|
|
|
|
/* Element description */
|
|
span {
|
|
margin: auto;
|
|
}
|
|
|
|
/* Element text */
|
|
div p,
|
|
div a {
|
|
font-size: var(--font-size-card);
|
|
}
|
|
|
|
/* Element langage */
|
|
p[data-lang] {
|
|
margin: 0;
|
|
}
|