mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-11-21 01:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Footer max width

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-26 23:12:52 +01:00 committed by MiniDigger | Martin
parent 2d257417c2
commit 19b0d7707e
2 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend-new/src/components/Footer.vue
View File

@ -3,8 +3,8 @@
<template>
<footer class="relative flex items-end mt-10 bg-gradient-to-r from-[#004ee9] to-[#367aff] px-8 pt-20 pb-2 text-[#f8faff] min-h-70">
<div class="footerContent w-screen">
<div class="flex justify-center flex-col md:flex-row justify-center gap-y-6 md:gap-y-0 md:gap-x-6">
<div class="md:w-1/3 min-w-1/3 max-w-1/3)">
<div class="flex justify-center flex-col md:flex-row justify-center gap-y-6 md:gap-y-0 md:gap-x-6 max-w-1200px m-auto">
<div class="md:(w-1/3 min-w-1/3 max-w-1/3)">
<p class="text-xl font-bold text-center mb-2">About Hangar</p>
<p>Hangar is an NFT plugin repository, hosted in the blockchain. Every plugin is unique and owned just by you. Can you use it on your server? No! You only own the receipt. And that's what makes Hangar so eco-friendly.</p>
</div>
@ -28,11 +28,11 @@
</div>
</div>
<div class="md:w-1/3 min-w-1/3 max-w-1/3)">
<div class="md:(w-1/3 min-w-1/3 max-w-1/3)">
<p class="text-xl font-bold text-center mb-2">More from Paper</p>
</div>
</div>
<div class="footerBar flex items-center justify-around mt-4">
<div class="footerBar flex items-center justify-around mt-4 max-w-1200px m-auto">
<p>Copyright © <a href="https://papermc.io/">PaperMC</a> 2016 - 2022</p>
<div class="footerBarLinks flex">
<router-link

60
frontend-new/src/pages/index.vue
View File

@ -1,4 +1,6 @@
<script setup lang="ts">
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
const { t } = useI18n();
@ -7,7 +9,63 @@ const { t } = useI18n();
<template>
<div class="flex flex-col items-center pt-10">
<h2 class="text-3xl font-bold uppercase">Search your favorite plugins</h2>
<input class="mt-6 rounded-md big-box-shadow p-3 w-4/5 max-w-800px focus-visible:(border-white) text-black" type="text" placeholder="Search in 1 projects, proudly made by the community...">
<div class="flex flex-row mt-6 big-box-shadow">
<input class="rounded-md p-3 w-4/5 max-w-800px focus-visible:(border-white) text-black" type="text" placeholder="Search in 1 projects, proudly made by the community...">
<div class="sort rounded-md">
<Menu>
<MenuButton class="bg-white text-black rounded-md p-2">Sort by</MenuButton>
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-out"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<MenuItems>
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Account settings
</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a :class='{ "bg-blue-500": active }' href="/account-settings">
Documentation
</a>
</MenuItem>
<MenuItem disabled>
<span class="opacity-75">Invite a friend (coming soon!)</span>
</MenuItem>
</MenuItems>
</transition>
</Menu>
</div>
</div>
</div>
<div class="projectsAndSidebar p-4 mt-5 w-screen max-w-1200px flex justify-around m-auto flex-col md:flex-row gap-y-6 md:gap-y-0 md:gap-x-6">
<div class="projects md:(w-2/3 min-w-2/3 max-w-2/3) min-h-800px bg-gray-200 rounded-md">
</div>
<div class="sidebar bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-md min-w-300px min-h-800px p-4 text-white">
<div class="versions">
<h3 class="font-bold">Minecraft versions</h3>
<div>
<input id="1.18.1" type="checkbox" name="1.18.1">
<label for="1.18.1">1.18.1</label>
</div>
</div>
<div class="categories">
<h3 class="font-bold">Categories</h3>
</div>
<div class="platforms">
<h3 class="font-bold">Platforms</h3>
</div>
<div class="licenses">
<h3 class="font-bold">Licenses</h3>
</div>
</div>
</div>
</template>