fix: Mobile

Hack4Krak · Jan 19, 2025 · b4f34c7 · b4f34c7
1 parent 6a256d8
commit b4f34c7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 35 deletions.
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="text-black dark:text-white">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

diff --git a/frontend/app/components/logo.vue → frontend/app/components/Logo.vue b/frontend/app/components/logo.vue → frontend/app/components/Logo.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <svg width="2261.9407" height="2876.5688" viewBox="0 0 598.4718 761.09217" xmlns="http://www.w3.org/2000/svg">
     <g transform="translate(-191.55971,-145.82944)" stroke-width="20" fill="none" stroke="currentColor">

diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
@@ -1,34 +1,22 @@
-<script setup lang="ts">
-</script>
-
 <template>
-  <div class="px-4 py-4 bg-gray-100 dark:bg-zinc-900">
-    <div class="flex justify-center items-center h-screen">
-      <logo class="fill-current text-black dark:text-white max-h-96 max-w-96 mr-12" src="img/logo.svg" alt="Hack4Krak logo" />
-      <USeparator orientation="vertical" class="h-88" size="lg" :ui="{ border: 'border-black dark:border-white' }" />
-      <div class="ml-10 text-black dark:text-white">
-        <div class="text-8xl font-semibold">
-          Hack4Krak
-        </div>
-        <div class="mt-4 mb-10 h-fit w-[600px] text-lg text-black/80 dark:text-white/80">
-          Organization responsible for managing the largest Capture the Flag (CTF) competition for high school students in Kraków, Poland.
-        </div>
-        <div class="flex text-4xl font-medium text-black/90 dark:text-white/90">
-          Strona w trakcie tworzenia
-        </div>
-        <div>
-          <div class="mt-10 flex text-4xl items-center">
-            <a class="h-fit w-32 mr-32" href="https://discord.gg/ASPqckzEd8">
-              <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white" mode="svg" alt="Official logo of Discord" />
-            </a>
-            <a class="h-fit w-12 text-black dark:text-white" href="https://github.com/Hack4Krak/Hack4KrakSite/">
-              <Icon name="mdi:github" />
-            </a>
-            <a class="h-fit w-24 text-black dark:text-white" href="https://github.com/Hack4Krak/Hack4KrakSite/">
-              <Icon name="octicon:logo-github-24" />
-            </a>
-          </div>
-        </div>
+  <div class="flex flex-col md:flex-row justify-center items-center h-screen bg-gray-100 dark:bg-zinc-900">
+    <Logo class="max-h-48 max-w-48 md:max-h-96 md:max-w-96 md:mr-12" />
+    <USeparator orientation="vertical" class="h-88 md:block hidden" size="lg" :ui="{ border: 'border-black dark:border-white' }" />
+    <div class="mt-5 md:mt-0 md:ml-10 text-center md:text-left dark:text-white">
+      <h1 class="text-5xl md:text-8xl font-semibold">
+        Hack4Krak
+      </h1>
+      <p class="mt-4 mb-10 text-base md:text-lg max-w-xs md:max-w-150">
+        Organization responsible for managing the largest Capture the Flag (CTF) competition for high school students in Kraków, Poland.
+      </p>
+      <div class="mt-10 flex justify-center md:justify-start h-10 text-2xl md:text-4xl items-center">
+        <a class="mr-5" href="https://discord.gg/ASPqckzEd8" target="_blank">
+          <Icon name="logos:discord" class="[&>path]:fill-black dark:[&>path]:fill-white" mode="svg" alt="Discord" />
+        </a>
+        <a class="flex" href="https://github.com/Hack4Krak/Hack4KrakSite/" target="_blank">
+          <Icon name="mdi:github" class="mr-2" alt="" />
+          <Icon name="octicon:logo-github-24" alt="GitHub" />
+        </a>
       </div>
     </div>
   </div>