Style FAQ and Guide

hacksu · Oct 11, 2024 · 6042bce · 6042bce
1 parent 443d597
commit 6042bce
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 85 deletions.
diff --git a/public-frontend/src/components/faq.vue b/public-frontend/src/components/faq.vue
@@ -1,34 +1,25 @@
 <template>
   <div id="faq-container">
     <div id="faq">
-      <orbiter />
       <div class="info-container">
-        <h2 id="faqTitle">
-          FREQUENTLY ASKED QUESTIONS
-        </h2>
-
-        <Accordion :multiple="true">
-          <AccordionTab v-for="faq, i in faqs" :key="i" :header="faq.question">
-            <p class="faq-answer" v-for="p, i in faq.answer.split('\n\n')" :key="i" v-html="p" />
-          </AccordionTab>
-        </Accordion>
-
+        <fieldset v-for="faq, i in faqs" :key="i">
+          <legend>{{ faq.question }}</legend>
+          <p class="faq-answer" v-for="p, i in faq.answer.split('\n\n')" :key="i" v-html="p" />
+        </fieldset>
         <p class="faqModule">
           Still have questions?
           <router-link to="contact" id="contactLink">Let us know!</router-link>
         </p>
       </div>
     </div>
   </div>
+  <link rel="stylesheet" href="https://unpkg.com/xp.css">
 </template>
 
 <script>
-import orbiter from "./orbiter.vue";
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
 export default {
   name: "Main",
-  components: { orbiter, Accordion, AccordionTab },
+  components: {},
   data() {
     return {
       faqs: [
@@ -85,69 +76,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/globalVars.scss';
 
 .info-container {
-  padding: 20px;
-  width: 600px;
-  max-width: 97.5vw;
-}
-
-:deep(.p-accordion .p-accordion-header) {
-    background-color: #1e1e1e!important;
-}
-
-:deep(.p-accordion) {
-    background-color: black;
-    border: 2px solid white;
-    border-radius: 5px;
-    overflow: hidden;
+  color: black;
+  font-size: 12pt;
 }
 
-:deep(.p-accordion .p-accordion-tab.p-accordion-tab-active) {
-    margin-bottom: 0;
-}
-
-:deep(.p-accordion .p-accordion-content) {
-    background-color: #fff2;
-}
-
-#faq-container {
-  margin-top: 0px;
-  padding-top: 20px;
-  z-index: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-#faqTitle {
-  margin: 20px 10px;
-  color: white;
-}
-
-#faq {
-  color: white;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.faqModule {
-  padding: 10px 20px 10px 20px;
-  margin-top: 20px;
-}
-
-.faq-answer {
-  margin: 15px 8px;
-
-  &:first-of-type {
-    margin-top: 5px;
-  }
-
-  &:last-of-type {
-    margin-bottom: 5px;
-  }
-}
 </style>
diff --git a/public-frontend/src/main.js b/public-frontend/src/main.js
@@ -5,6 +5,7 @@ import PrimeVue from 'primevue/config';
 import "primevue/resources/themes/md-dark-indigo/theme.css";
 import 'primeicons/primeicons.css';
 import 'floating-vue/dist/style.css'
+import { theme } from "antd";
 
 export const createApp = ViteSSG(
   App,

diff --git a/public-frontend/src/views/Guide.vue b/public-frontend/src/views/Guide.vue
@@ -668,22 +668,24 @@ useHead({
 
 <style scoped lang="scss">
 .container {
-    width: 600px;
-    max-width: 96vw;
-    margin: 100px auto;
+    width: 750px;
+    max-width: 100vw;
+    margin: auto;
     line-height: 1.5;
+    color:  #003399;
+    font-family: Tahoma, Verdana, Geneva, sans-serif;
 }
 h1 {
     font-size: 2rem;
 }
 p {
     margin: 20px 0;
-    font-size: 1.1rem;
+    font-size: 1.25rem;
     &.large-text {
         font-size: 1.25rem;
     }
     &.small-text {
-        font-size: 0.8rem;
+        font-size: 1rem;
     }
 }
 :deep(.p-carousel-item) {
@@ -700,12 +702,14 @@ p {
 // adjusting the positions and sizes of carousel control buttons by a couple
 // pixels at a time because i care so much it hurts
 :deep(button.p-carousel-next) {
+    color: black;
     transform: translateX(-2px);
     @media (max-width: 600px) {
         display: none;
     }
 }
 :deep(button.p-carousel-prev) {
+    color: black;
     transform: translateX(2px);
     @media (max-width: 600px) {
         display: none;
@@ -717,9 +721,7 @@ p {
 :deep(.p-carousel-prev-icon) {
     transform: scale(1.5) translateX(1px);
 }
-:deep(.p-accordion-content) > p:first-of-type {
-    margin-top: 0px;
-}
+
 .web-dev-grid {
     display: grid;
     width: 500px;

diff --git a/public-frontend/src/views/Home.vue b/public-frontend/src/views/Home.vue
@@ -26,7 +26,7 @@
         <FAQ/>
       </div>
     </div>
-    <div :hidden="!guide" id="guideWindow" class="window" style="width: 600px;">
+    <div :hidden="!guide" id="guideWindow" class="window" style="width: 800px;">
       <div id="guideWindowHeader" class="title-bar" @mousedown="startDrag('guideWindow', $event)">
         <div class="title-bar-text">Hackathon Guide</div>
         <div class="title-bar-controls">