diff options
| author | Fuwn <[email protected]> | 2023-11-19 03:38:08 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-11-19 03:38:08 -0800 |
| commit | 950be944a6cf3744437e55ceffa0f55326b8b5db (patch) | |
| tree | 6c9322f10be69f0dd0799185b01dca174dd08275 | |
| parent | feat(routes): tamper with image hovers (diff) | |
| download | frontend-next-950be944a6cf3744437e55ceffa0f55326b8b5db.tar.xz frontend-next-950be944a6cf3744437e55ceffa0f55326b8b5db.zip | |
feat(languages): language columns
| -rw-r--r-- | src/routes/languages.svelte | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/src/routes/languages.svelte b/src/routes/languages.svelte index 466f0ec..76961b3 100644 --- a/src/routes/languages.svelte +++ b/src/routes/languages.svelte @@ -36,7 +36,7 @@ SPDX-License-Identifier: GPL-3.0-only --> {#if !complete} <p>Fetching languages ...</p> {:else} - <ul> + <ul id="language-list"> {#each languages as language} <li> {#if language === "C#"} @@ -53,3 +53,21 @@ SPDX-License-Identifier: GPL-3.0-only --> </ul> {/if} </div> + +<style> + #language-list { + column-count: 1; + } + + @media screen and (min-width: 600px) { + #language-list { + column-count: 2; + } + } + + @media screen and (min-width: 900px) { + #language-list { + column-count: 3; + } + } +</style> |