diff options
author | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-15 10:12:16 +0300 |
---|---|---|
committer | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-15 10:12:16 +0300 |
commit | 9437770785563be9155a5ab83dc553f8c8d98fc0 (patch) | |
tree | acac082ba3a25df58b2c4bf3ea5c18b4d147e85b /Website/pages | |
parent | a7958997368ec189af747ec9417bac2e5662d52b (diff) | |
parent | 77e769c65d4389758946602dd4d255da59aa702a (diff) |
resolved my own conflict, files relinted
Diffstat (limited to 'Website/pages')
-rw-r--r-- | Website/pages/index.vue | 139 |
1 files changed, 83 insertions, 56 deletions
diff --git a/Website/pages/index.vue b/Website/pages/index.vue index 72f3767..7df54ac 100644 --- a/Website/pages/index.vue +++ b/Website/pages/index.vue @@ -1,60 +1,78 @@ <template> - <div> - <svg - id="thumbslogo" - class="mb-4" - width="150" - height="150" - viewBox="0 0 24 24" - overflow="visible" - > - <path - d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" - /> - <path - id="plarrow" - d="m8 12.5 5.1-2.9L8 6.7v5.8z" - fill="#fff" - stroke="none" - /> - </svg> - - <h1 class="title-text">Return YouTube Dislike</h1> - <div class="mb-4" style="color: #999"> - <p style="margin-top: 0"> - Browser extension and an API that show you dislikes on youtube - </p> - </div> + <div + class="d-flex flex-column justify-between" + style="height: calc(100vh - 10rem)" + > + <div class="col"></div> + + <div class="col"> + <svg + id="thumbslogo" + class="mb-4" + width="150" + height="150" + viewBox="0 0 24 24" + overflow="visible" + > + <path + d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" + /> + <path + id="plarrow" + d="m8 12.5 5.1-2.9L8 6.7v5.8z" + fill="#fff" + stroke="none" + /> + </svg> + + <h1 class="title-text">Return YouTube Dislike</h1> + <div class="mb-4" style="color: #999"> + <p style="margin-top: 0"> + Browser extension and an API that show you dislikes on Youtube + </p> + </div> - <v-btn - :to="installLink" - color="primary px-6" - style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em" - > - <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon> - Install - </v-btn> - - <br /> - - <v-btn class="mainAltButton" :href="githubLink" target="_blank"> - <v-icon style="margin-right: 0.5em">mdi-github</v-icon> - GitHub - </v-btn> - - <v-btn class="mainAltButton" :href="discordLink" target="_blank"> - <v-icon style="margin-right: 0.5em">mdi-discord</v-icon> - Discord - </v-btn> - <div id="sponsors"> - <h3>Sponsors:</h3> - <p - v-for="sponsor in sponsors" - :key="sponsor.name" - style="margin: 0px 0px" + <v-btn + :to="installLink" + color="primary px-6" + style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em" > - <a :href="sponsor.link">{{ sponsor.name }}</a> - </p> + <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon> + Install + </v-btn> + + <br /> + + <v-btn class="mainAltButton" :href="githubLink" target="_blank"> + <v-icon style="margin-right: 0.5em">mdi-github</v-icon> + GitHub + </v-btn> + + <v-btn class="mainAltButton" :href="discordLink" target="_blank"> + <v-icon style="margin-right: 0.5em">mdi-discord</v-icon> + Discord + </v-btn> + </div> + + <v-spacer /> + + <div id="sponsors" class="d-flex flex-column items-center py-8"> + <h3 class="mb-4"> + <v-icon class="mb-2">mdi-heart</v-icon> + Sponsors + </h3> + <v-row class="justify-center mx-auto"> + <p v-for="sponsor in sponsors" :key="sponsor.name" class="sponsor"> + <a + :style=" + sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' } + " + :href="sponsor.link" + > + {{ sponsor.name }} + </a> + </p> + </v-row> </div> </div> </template> @@ -87,9 +105,18 @@ export default { </script> <style scoped> -#sponsors { - margin-top: 200px; +.sponsor { + margin: 1rem; + height: max-content; } + +@media (max-width: 767px) { + .sponsor { + margin: 0.5rem; + height: max-content; + } +} + #thumbslogo { opacity: 0; fill: transparent; |