116 lines
2.1 KiB
CSS
116 lines
2.1 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:not(ul ul) {
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* breakpoint */
|
|
@media only screen and (max-width: 740px) {
|
|
main ul:not(ul ul) {
|
|
grid-template-columns: none;
|
|
}
|
|
|
|
main li:not(ul ul > li) {
|
|
grid-column: inherit !important;
|
|
}
|
|
}
|
|
|
|
/* Card */
|
|
main li:not(ul ul > 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:not(ul ul > li):nth-child(odd):last-child {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
main li:hover:not(ul ul > li) {
|
|
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:not(ul ul > li) {
|
|
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 {
|
|
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,
|
|
ul ul li {
|
|
font-size: var(--font-size-card);
|
|
}
|
|
|
|
/* Element list */
|
|
ul ul {
|
|
list-style: initial;
|
|
padding: 1em;
|
|
}
|
|
|
|
/* Element language */
|
|
p[data-lang] {
|
|
margin: 0;
|
|
}
|