diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Landing.svelte | 52 |
1 files changed, 51 insertions, 1 deletions
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index 5849fbc0..cc4dad7c 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -16,6 +16,7 @@ import root from './Utility/root'; import type { Media } from './AniList/media'; import { env } from '$env/dynamic/public'; + import tooltip from './Tooltip/tooltip'; const randomManga = sampleManga .filter( @@ -189,7 +190,7 @@ <p /> <div class="example-item card"> - <div> + <div class="item-content"> <span class="big-text">Tools & More!</span> <p> @@ -236,6 +237,30 @@ }}>Log in</a > with AniList to get started! </span> + + <p /> + + <div class="example-item images"> + <img src="https://i.imgur.com/dpijzKn.png" alt="Badge Wall" title="Badge Wall" use:tooltip /> + <img + src="https://i.imgur.com/huEi683.png" + alt="Schedule (List View)" + title="Schedule (List View)" + use:tooltip + /> + <img + src="https://i.imgur.com/PkuJZdW.png" + alt="Schedule" + title="Schedule (Cover Grid View)" + use:tooltip + /> + </div> + </div> + + <div class="item-description demo"> + <a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank"> + <img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip /> + </a> </div> </div> @@ -247,8 +272,33 @@ flex-wrap: wrap; } + .images { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .images img { + border-radius: 8px; + margin: 0.15rem; + width: 32.5%; + } + + .demo { + display: flex; + flex-direction: column; + justify-content: center; + } + + .demo img { + border-radius: 8px; + margin: 0.15rem; + width: 100%; + } + .item-content { flex: 1 1 50%; + padding: 0 1rem; } .item-description { |