xyvs/guessit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Responsive Design

Browse Source
This commit is contained in:
Fran
2024-01-16 11:10:32 -05:00
parent c14671cdfe
commit e926f349a7
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
services/frontend/src/App.vue
View File

@@ -13,7 +13,7 @@ const setHome = (value: boolean) => {
</script>
<template>
<div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-16 gap-5 text-neutral-700">
<div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
<Header @setHome="setHome" />
<Home v-if="isHome" />
<About v-else />

9
services/frontend/src/components/Home.vue
View File

@@ -33,8 +33,8 @@ const getFilenameData = () => {
</script>
<template>
<div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-12 pb-6">
<div class="space-y-12 px-12">
<div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6">
<div class="space-y-12 px-4 md:px-12">
<div class="flex flex-col items-center justify-center gap-4">
<h2 class="text-4xl font-semibold">
guessit
@@ -61,8 +61,11 @@ const getFilenameData = () => {
</div>
</div>
</div>
<div class="text-left text-sm rounded px-4">
<div class="hidden md:block text-left text-sm px-4">
<highlightjs :code="code" ref="codeRef" />
</div>
<div class="md:hidden text-center px-4">
Sorry, this section is not available on mobile devices.
</div>
</div>
</template>