Szablon:Siostrzane/style.css: Różnice pomiędzy wersjami
Wygląd
[wersja przejrzana] | [wersja przejrzana] |
Usunięta treść Dodana treść
thin screen, wide items |
thin screen tweaks |
||
(Nie pokazano 1 pośredniej wersji utworzonej przez tego samego użytkownika) | |||
Linia 22: | Linia 22: | ||
} |
} |
||
/* item width for ~grid-ish look */ |
/* item width for ~grid-ish look */ |
||
@media screen and (min-width: 23em) { |
|||
.tpl-sisproj-12 li {min-width: 12em} |
.tpl-sisproj-12 li {min-width: 12em} |
||
.tpl-sisproj-13 li {min-width: 13em} |
.tpl-sisproj-13 li {min-width: 13em} |
||
.tpl-sisproj-14 li {min-width: 14em} |
.tpl-sisproj-14 li {min-width: 14em} |
||
.tpl-sisproj-15 li {min-width: 15em} |
.tpl-sisproj-15 li {min-width: 15em} |
||
} |
|||
@media screen and (min-width: 30em) { |
|||
.tpl-sisproj-16 li {min-width: 16em} |
.tpl-sisproj-16 li {min-width: 16em} |
||
.tpl-sisproj-18 li {min-width: 18em} |
.tpl-sisproj-18 li {min-width: 18em} |
||
.tpl-sisproj-20 li {min-width: 20em} |
.tpl-sisproj-20 li {min-width: 20em} |
||
.tpl-sisproj-22 li {min-width: 22em} |
.tpl-sisproj-22 li {min-width: 22em} |
||
} |
|||
/* items layout */ |
/* items layout */ |
||
.tpl-sisproj li { |
.tpl-sisproj li { |
||
Linia 44: | Linia 48: | ||
} |
} |
||
/* thin screen, wide |
/* thin screen, especially for wide sub-description */ |
||
@media screen and (max-width: 470px) { |
@media screen and (max-width: 470px) { |
||
.tpl-sisproj |
.tpl-sisproj .sub { |
||
white-space: normal; |
white-space: normal; |
||
} |
} |
||
.tpl-sisproj |
.tpl-sisproj ul { |
||
display:grid; |
|||
justify-content: flex-start; |
|||
} |
} |
||
} |
} |
Aktualna wersja na dzień 00:09, 31 sty 2023
/* lists reset */
.tpl-sisproj ul li,
.tpl-sisproj ul {
margin: 0;
padding: 0;
list-style: none;
}
/* lists layout */
.tpl-sisproj ul + ul {
margin-top: 1em;
}
.tpl-sisproj ul {
display: flex;
gap: 1em;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 100em;
}
/* item width for ~grid-ish look */
@media screen and (min-width: 23em) {
.tpl-sisproj-12 li {min-width: 12em}
.tpl-sisproj-13 li {min-width: 13em}
.tpl-sisproj-14 li {min-width: 14em}
.tpl-sisproj-15 li {min-width: 15em}
}
@media screen and (min-width: 30em) {
.tpl-sisproj-16 li {min-width: 16em}
.tpl-sisproj-18 li {min-width: 18em}
.tpl-sisproj-20 li {min-width: 20em}
.tpl-sisproj-22 li {min-width: 22em}
}
/* items layout */
.tpl-sisproj li {
display: flex;
gap: .8em;
align-items: center;
}
.tpl-sisproj .sub {
font-size:85%;
color:#444;
white-space: nowrap;
}
/* thin screen, especially for wide sub-description */
@media screen and (max-width: 470px) {
.tpl-sisproj .sub {
white-space: normal;
}
.tpl-sisproj ul {
display:grid;
}
}