diff options
author | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-15 10:04:11 +0300 |
---|---|---|
committer | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-15 10:04:11 +0300 |
commit | eeafd0c19aa1663b19d7aca3249973892d0b78a3 (patch) | |
tree | 451c7dee2ab30137f39a98e1022d2f1fc62ac39e /Website/pages | |
parent | edb19da7474c6dbfb5cc673785f2135c944c150a (diff) |
Website sponsors section prettified
Diffstat (limited to 'Website/pages')
-rw-r--r-- | Website/pages/index.vue | 87 |
1 files changed, 56 insertions, 31 deletions
diff --git a/Website/pages/index.vue b/Website/pages/index.vue index bbb0444..e9a727f 100644 --- a/Website/pages/index.vue +++ b/Website/pages/index.vue @@ -1,45 +1,70 @@ <template> - <div> + <div class="d-flex flex-column justify-between" style="height: calc(100vh - 10rem)"> + <div class="col"></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> + <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> + <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> - <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" style="margin: 0px 0px "> - <a :href="sponsor.link">{{sponsor.name}}</a> - </p> + <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" class="sponsor"> + <a + :style="sponsor.link ? { cursor: 'pointer' } : { cursor: 'default' }" + :href="sponsor.link" + > + {{ sponsor.name }} + </a> + </p> + </v-row> </div> </div> </template> <style scoped> -#sponsors { - margin-top: 200px; +.sponsor { + margin: 1rem; + height: max-content; } + +@media (max-width: 767px) { + .sponsor { + margin: .5rem; + height: max-content; + } +} + #thumbslogo { opacity: 0; fill: transparent; |