MainFooter.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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="/"
  40. ><img
  41. class="musareFooterLogo"
  42. src="/assets/blue_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 - 2020
  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").then(socialLinks => {
  77. this.socialLinks = socialLinks;
  78. });
  79. }
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. @import "styles/global.scss";
  84. .night-mode {
  85. footer.footer,
  86. footer.footer .container,
  87. footer.footer .container .content {
  88. background-color: #222;
  89. }
  90. footer.footer .socialIcons img {
  91. filter: invert(1);
  92. }
  93. }
  94. .content a:not(.button) {
  95. border: 0;
  96. }
  97. .content {
  98. display: flex;
  99. align-items: center;
  100. flex-direction: column;
  101. }
  102. .footer {
  103. flex-shrink: 0;
  104. height: 240px;
  105. padding: 40px 20px 40px;
  106. border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
  107. box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.65),
  108. 0 6px 20px 0 rgba(3, 169, 244, 0.4);
  109. background-color: $white;
  110. width: 100%;
  111. .musareFooterLogo {
  112. display: block;
  113. margin-left: auto;
  114. margin-right: auto;
  115. margin-bottom: 15px;
  116. width: 200px;
  117. }
  118. .socialIcons {
  119. .icon {
  120. height: 28px;
  121. line-height: 28px;
  122. width: 28px;
  123. }
  124. }
  125. .footerLinks {
  126. :not(:last-child) {
  127. border-right: solid 1px $primary-color;
  128. }
  129. a {
  130. padding: 0 5px;
  131. font-size: 18px;
  132. color: $primary-color;
  133. }
  134. a:hover {
  135. color: $primary-color;
  136. text-decoration: underline;
  137. }
  138. }
  139. }
  140. @media only screen and (min-width: 992px) {
  141. .footer {
  142. height: 180px;
  143. .socialIcons {
  144. left: 0;
  145. top: 35px;
  146. position: absolute;
  147. }
  148. .footerLinks {
  149. right: 0;
  150. top: 35px;
  151. position: absolute;
  152. }
  153. }
  154. }
  155. </style>