mylloon.fr/static/css/portfolio.css
Mylloon ce039a5d68
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
whole div clickable
2023-10-15 12:26:16 +02:00

87 lines
1.3 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;
}
/* 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;
width: 100%;
}
/* Element title */
div h3 {
margin-block: 0;
}
/* 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;
}