Skip to content

CSS adapted to display correctly on mobile devices #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Casamatechs wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

CSS adapted to display correctly on mobile devices #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions src/lib/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="footer flex flew-row flex-wrap justify-around mt-[3em] text-[rgb(0,0,255)]">
<div class="flex flew-row flex-wrap justify-around mt-[3em] text-[rgb(0,0,255)]">
<hr />
<ul>
<li><a href="/">EvenTer</a></li>
Expand All @@ -8,12 +8,6 @@
</div>

<style>
.footer {
width: 100%;
position: fixed;
bottom: 0;
}

ul {
display: flex;
flex-direction: row;
Expand All @@ -26,8 +20,4 @@
li {
padding: 2em;
}

.footer > * {
width: 70%;
}
</style>
14 changes: 5 additions & 9 deletions src/lib/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@
import Navbar from './Navbar.svelte';
</script>

<div class="border-b-[0.2rem] border-b-[#ED1B24] h-20">
<div class="flex m-auto w-3/5 items-center justify-between">
<img
class="max-w-56 max-h-44 mt-1 align-middle border-none"
src="/logo_small.svg"
alt="Small EvenTer Logo"
/>
<Navbar />
</div>
<div
class="border-b-[0.2rem] border-b-[#ED1B24] h-20 w-screen flex px-[15%] items-center justify-between overflow-x-auto"
>
<img class="h-4/5 align-middle border-none" src="/logo_small.svg" alt="Small EvenTer Logo" />
<Navbar />
</div>
10 changes: 2 additions & 8 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,9 @@

<Header />

<div class="content-container">
<!-- SVH is a new CSS measure unit for mobile devices https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport -->
<div class="min-h-[calc(100svh-248px)] m-auto max-w-[70%]">
<slot />
</div>

<Footer />

<style>
.content-container {
margin: auto;
max-width: 70%;
}
</style>
3 changes: 2 additions & 1 deletion src/routes/events/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script lang="ts">
import type { EventListData } from '$lib/EventData';
import EventListItem from '$lib/EventListItem.svelte';

export let data;
export let data: EventListData;
</script>

<h1>The Latest and Greatest CodeSeoul Events!</h1>
Expand Down
1 change: 0 additions & 1 deletion src/routes/events/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { EventListData } from '$lib/EventData';
import type { LoadEvent } from '@sveltejs/kit';
import { PUBLIC_API_ROOT_URL } from '$env/static/public';


export async function load({ fetch }: LoadEvent): Promise<EventListData | null> {
const url = `${PUBLIC_API_ROOT_URL}/events`;
const options = {
Expand Down