Skip to content

Commit

Permalink
Responsiveness fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@prokawsar
prokawsar committed Sep 29, 2024
1 parent 171d813 commit ee7ff03
Show file tree
Hide file tree
Showing 9 changed files with 12 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/elements/ScrollContainer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@

<div
bind:this={containerRef}
class="flex w-full flex-col overflow-y-auto scroll-smooth rounded-xl"
class="flex w-full flex-col overflow-y-auto scroll-smooth rounded-xl lg:h-[317px] xl:h-full"
style="max-height: {maxHeight};"
>
<div bind:this={contentRef} class="flex flex-col gap-2">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/layouts/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import Icon from '@iconify/svelte'
</script>

<footer class="bg-white px-5 pb-10 pt-40 md:px-0">
<footer class="bg-white px-5 pb-10 pt-40 lg:px-5 xl:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-row">
<div class="flex flex-1 flex-col gap-5">
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/layouts/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
let showMobileMenu = false
</script>

<header class="sticky top-0 z-10 bg-arkGray bg-opacity-95 px-5 md:px-0 dark:bg-gray-900">
<header class="sticky top-0 z-10 bg-arkGray bg-opacity-95 px-5 xl:px-0 dark:bg-gray-900">
<div class="mx-auto flex h-[72px] items-center justify-between sm:px-8 lg:px-0 xl:max-w-7xl">
<div class="flex flex-row items-center">
<a href="{base}/" aria-label={config.headerTitle}>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/sections/Blog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import BlogItem from '$lib/components/elements/BlogItem.svelte'
</script>

<section class="relative flex items-center py-10 lg:py-24">
<section class="relative flex items-center py-10 lg:px-5 lg:py-24 xl:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:gap-10 lg:px-0">
<div class="flex w-full flex-col gap-4">
<p class="text-center text-4xl font-bold lg:text-6xl">Blog</p>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/sections/Contribute.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import Icon from '@iconify/svelte'
</script>

<section class="relative flex items-center bg-arkGray py-24">
<section class="relative flex items-center bg-arkGray py-24 lg:px-5 xl:px-0">
<div
class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:flex-row lg:items-start lg:px-0"
>
Expand Down Expand Up @@ -41,7 +41,7 @@
</ContributeCard>

<ContributeCard title="Replace alphabetical sorting by un-sorting">
<div class="flex flex-row gap-2" slot="title-tag">
<div class="flex flex-row flex-wrap gap-2" slot="title-tag">
<Tag>
<Icon icon="ri:svelte-line" />
Svelte</Tag
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/sections/Hero.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<div class="relative flex w-full flex-row items-center justify-between gap-1 py-10 md:mb-10">
<!-- BG Images -->
<div class="flex-1">
<img class="hidden max-w-[60%] md:block" src="{base}/images/left.png" alt="left" />
<img class="hidden md:block xl:max-w-[60%]" src="{base}/images/left.png" alt="left" />
<img class="sm:hidden" src="{base}/images/mob-left.png" alt="left" />
</div>

Expand Down Expand Up @@ -100,12 +100,12 @@

<!-- BG Images -->
<div class="flex flex-1 justify-end">
<img class="hidden max-w-[50%] md:block" src="{base}/images/right.png" alt="right" />
<img class="hidden md:block xl:max-w-[50%]" src="{base}/images/right.png" alt="right" />
<img class="sm:hidden" src="{base}/images/mob-right.png" alt="right" />
</div>
</div>

<div class="mx-auto flex w-full max-w-7xl flex-row sm:px-8 lg:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-row sm:px-8 lg:px-5 xl:px-0">
{#if browser}
<ScrollContainer>
{#each slides as { color, text, animation }, i}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/sections/OurApps.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
let activeApp = appList[0]
</script>

<section class="relative flex py-12">
<section class="relative flex py-12 lg:px-5 xl:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 lg:gap-10 lg:px-0">
<div class="flex w-full flex-col gap-4">
<p class="text-center text-4xl font-bold lg:text-6xl">Our Apps</p>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/sections/Support.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}
</script>

<section class="relative flex items-center bg-arkOrangeLight py-14">
<section class="relative flex items-center bg-arkOrangeLight py-14 lg:px-5 xl:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 lg:items-start">
<div class="flex flex-col gap-3 px-10 md:px-0">
<p class="text-center text-xl font-semibold uppercase text-arkOrange lg:text-start">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/sections/Youtube.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
]
</script>

<section class="relative flex items-center pb-16">
<section class="relative flex items-center pb-16 lg:px-5 xl:px-0">
<div class="mx-auto flex w-full max-w-7xl flex-col gap-5 rounded-xl bg-[#FC0D1B]/20 p-5">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
Expand Down

0 comments on commit ee7ff03

Please sign in to comment.