MainFooter.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <footer class="footer">
  3. <div class="container">
  4. <div class="content has-text-centered">
  5. <p class="socialIcons">
  6. <a
  7. class="icon"
  8. :href="`${this.socialLinks.github}`"
  9. target="_blank"
  10. title="GitHub Repository"
  11. >
  12. <img src="/assets/social/github.svg" />
  13. </a>
  14. <a
  15. class="icon"
  16. :href="`${this.socialLinks.twitter}`"
  17. target="_blank"
  18. title="Twitter Account"
  19. >
  20. <img src="/assets/social/twitter.svg" />
  21. </a>
  22. <a
  23. class="icon"
  24. :href="`${this.socialLinks.facebook}`"
  25. target="_blank"
  26. title="Facebook Page"
  27. >
  28. <img src="/assets/social/facebook.svg" />
  29. </a>
  30. <a
  31. class="icon"
  32. :href="`${this.socialLinks.discord}`"
  33. target="_blank"
  34. title="Discord Server"
  35. >
  36. <img src="/assets/social/discord.svg" />
  37. </a>
  38. </p>
  39. <a href="https://musare.com" target="_blank"
  40. ><img
  41. class="musareFooterLogo"
  42. src="/assets/wordmark.png"
  43. alt="Musare"
  44. /></a>
  45. <p class="footerLinks">
  46. <router-link title="About Musare" to="/about">
  47. About
  48. </router-link>
  49. <router-link title="The Musare Team" to="/team">
  50. Team
  51. </router-link>
  52. <router-link title="News" to="/news">
  53. News
  54. </router-link>
  55. </p>
  56. <p>
  57. © Copyright Musare 2015 - 2019
  58. </p>
  59. </div>
  60. </div>
  61. </footer>
  62. </template>
  63. <script>
  64. export default {
  65. data() {
  66. return {
  67. socialLinks: {
  68. github: "",
  69. twitter: "",
  70. facebook: "",
  71. discord: ""
  72. }
  73. };
  74. },
  75. mounted() {
  76. lofig.get("siteSettings.socialLinks", res => {
  77. this.socialLinks = res;
  78. });
  79. }
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. .content a:not(.button) {
  84. border: 0;
  85. }
  86. .content {
  87. display: flex;
  88. align-items: center;
  89. flex-direction: column;
  90. }
  91. .footer {
  92. position: absolute;
  93. right: 0;
  94. bottom: 0;
  95. left: 0;
  96. height: 240px;
  97. padding: 40px 20px 40px;
  98. border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
  99. box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.65),
  100. 0 6px 20px 0 rgba(3, 169, 244, 0.4);
  101. background-color: #ffffff;
  102. width: 100%;
  103. .musareFooterLogo {
  104. display: block;
  105. margin-left: auto;
  106. margin-right: auto;
  107. margin-bottom: 15px;
  108. width: 200px;
  109. }
  110. .socialIcons {
  111. .icon {
  112. height: 28px;
  113. line-height: 28px;
  114. width: 28px;
  115. }
  116. }
  117. .footerLinks {
  118. :not(:last-child) {
  119. border-right: solid 1px #03a9f4;
  120. }
  121. a {
  122. padding: 0 5px;
  123. font-size: 18px;
  124. color: #03a9f4;
  125. }
  126. a:hover {
  127. color: #03a9f4;
  128. text-decoration: underline;
  129. }
  130. }
  131. }
  132. @media only screen and (min-width: 992px) {
  133. .footer {
  134. height: 180px;
  135. .socialIcons {
  136. left: 0;
  137. top: 35px;
  138. position: absolute;
  139. }
  140. .footerLinks {
  141. right: 0;
  142. top: 35px;
  143. position: absolute;
  144. }
  145. }
  146. }
  147. </style>