diff options
| author | Yorhel <git@yorhel.nl> | 2021-09-20 10:54:38 +0200 |
|---|---|---|
| committer | Yorhel <git@yorhel.nl> | 2021-09-20 10:54:40 +0200 |
| commit | f8d78b1ced2b98db0aadedfe710b2de1367ae9d0 (patch) | |
| tree | 6b42acd73b423cf6b4324efc73659184e1625460 /css | |
| parent | 79466c4ae8890a1885418008d10e9ce9813b51d7 (diff) | |
CSS: Switch to 2 or 1 column homepage layout on smaller screens
Fixes (part of) the issue with links not being visible due to the
box being too small.
This is the first time applying CSS grid on VNDB, let's hope even the
more obscure browsers support it by now.
Diffstat (limited to 'css')
| -rw-r--r-- | css/v2.css | 10 |
1 files changed, 8 insertions, 2 deletions
@@ -350,8 +350,14 @@ p.screenshots { text-align: center; margin-top: 10px; padding: 0; heig p.screenshots img { margin: 2px; } li.announcement { margin-bottom: 3px; margin-top: 3px } li.announcement a { font-weight: bold; font-size: 15px; color: $maintext } -.homepage h1 { margin-bottom: 5px } -.homepage > div { overflow: hidden } +.homepage { margin: 21px 0 -10px 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; } +@media (max-width: 1300px) { .homepage { grid-template-columns: 1fr 1fr } } +@media (max-width: 900px) { .homepage { grid-template-columns: 1fr } } +.homepage > div { overflow: hidden; border: 1px solid $border; padding: 0 2px 10px 2px; background: $boxbg; } +.homepage h1 { margin: 0 0 5px 0; font-size: 18px; font-weight: bold; color: $boxtitle } +.homepage h1 a { color: $boxtitle; } +.homepage h2 { font-size: 14px; margin-top: 3px; } +.homepage ul { list-style-type: none; margin-left: 10px; } .homepage li { display: flex; line-height: 1.1 } .homepage li span { white-space: nowrap; padding-right: 4px; padding-bottom: 3px } .homepage li span:first-child { overflow: hidden; text-overflow: ellipsis } |