add guide + tidying up code

Scott170c · Dec 6, 2024 · 0cde54a · 0cde54a
1 parent 6a024ec
commit 0cde54a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 11 deletions.
diff --git a/app/components/3box.tsx b/app/components/3box.tsx
@@ -18,7 +18,7 @@ const Threebox = () => {
             flexDirection: 'row',
             alignItems: 'center',
             backgroundColor: 'rgba(0, 0, 0, 0.31)',
-            borderRadius: '20px',
+            borderRadius: '25px',
             mx: '32px',
             mb: '5vh',
             paddingBottom: '2vh',

diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
@@ -31,17 +31,19 @@ const styles = {
     overflow: 'hidden',
   },
   question: {
-    fontSize: '2.1rem',
-    fontWeight: 600,
+    fontSize: '2.8rem',
+    fontWeight: 790,
     color: '#FFFFFF',
     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+    paddingLeft: '10px',
   },
   answer: {
-    fontSize: '1.1rem',
+    fontSize: '1.5rem',
     color: '#003180',
     marginTop: '8px',
     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
     fontWeight: 600,
+    paddingLeft: '20px'
   },
 };
 

diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
@@ -0,0 +1,14 @@
+import { Heading, Text } from 'theme-ui'
+const components = {
+    h1: (props) => <Heading as="h1" sx={{ 
+        fontSize: 5, color: 'black' ,      
+        fontFamily: 'var(--font-inter)',                    
+        fontWeight:800
+    }} {...props} />,
+    h2: (props) => <Heading as="h2" sx={{ fontSize: 4, color: 'black',       fontFamily: 'var(--font-inter)', 
+    }} {...props} />,
+    h3: (props) => <Heading as="h3" sx={{ fontSize: 3, color: 'black' }} {...props} />,
+    p: (props) => <Text sx={{ fontSize: 2, color: 'text' }} {...props} />,
+
+}
+export default components
diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx
@@ -1 +1,22 @@
-## This is a heading
+
+# Hacky Holidays Guide
+
+## Hacky Holidays is a limited time YSWS event for making your own PCB tree decorations! There are **4** major steps in making a successful decoration:
+
+1. Choosing your Parts
+2. Making your Schematic
+3. Designing your Schematic
+4. Programming your PCB
+
+# Choosing Your Parts
+
+When choosing your parts, think about the function of each component, and try to wither out unneeded components. Unneeded components can reduce your decoration’s battery life!
+
+Components used for the tutorial:
+(1x) MCU
+
+()
+
+[General Info](https://www.notion.so/General-Info-153a1dc89099809d86c0fda32bbf66a9?pvs=21)
+
+[How to wire up your LEDs](https://www.notion.so/How-to-wire-up-your-LEDs-154a1dc890998077b10aecd282861452?pvs=21)
diff --git a/app/guide/page.tsx b/app/guide/page.tsx
@@ -2,7 +2,7 @@
 import { keyframes } from '@emotion/react'
 import GuideMD from './guideMD.mdx'
 import { MDXProvider } from '@mdx-js/react'
-
+import components from '../components/mdx'
 const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 import { Box } from 'theme-ui'
 // const components = {
@@ -15,10 +15,12 @@ import { Box } from 'theme-ui'
 export default function guide() {
   return (
     <Box sx = {{
-      fontFamily: 'var(--font-inter)', 
+      fontFamily: 'var(--font-inter)',
+      color: 'black',
+      listStyleType: 'decimal',
     }}>
           <MDXProvider >
-      <GuideMD />
+      <GuideMD components={components}/>
     </MDXProvider>  
     </Box>
 );

diff --git a/app/page.tsx b/app/page.tsx
@@ -164,13 +164,16 @@ export default function Home() {
               <Heading as="h3"   sx={{ 
                     margin: 20,
                     fontFamily: 'var(--font-inter)', 
+                    fontSize: '1.55vw', 
                     fontWeight:800,
                     paddingTop: '0.5rem',
+                    paddingLeft: '5.5rem',
                     paddingRight: '5rem',
-                    color: 'white',
                     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                  }}>Submissions will be peer-reviewed in the categories of Best Creative Design, Most Technically Impressive, and Spookiest Halloween Theme — no extensive experience required. The top voted 10% of entries per catagory will receive a $100 grant to manufacture their PCB and purchase additional hardware or electronics. Get inspired by Halloween themes such as costumes and animatronic props, and incorporate them into your design.</Heading>
-          <Grid columns = {[1,1,1,3]}gap = {[50,5,20,0]} sx = {{paddingTop: '20px', paddingBottom: '30px', position: 'relative'}}>
+                    color: 'white',
+                  }}>Submissions will be peer-reviewed in the categories of Best Creative Design, Most Technically Impressive, and Spookiest Halloween Theme — no extensive experience required. The top voted 10% of entries per catagory will receive a $100 grant to manufacture their PCB and purchase additional hardware or electronics. Get inspired by Halloween themes such as costumes and animatronic props, and incorporate them into your design. <br></br><br></br> 
+                  <Box sx={{fontsize: '5vw'}}>FAQ:</Box></Heading>
+          <Grid columns = {[1,1,1,3]}gap = {[50,5,20,0]} sx = {{paddingTop: '1.5vh', position: 'relative'}}>
             <FAQcard question="What are the Requirements?" answer="Your PCB must be under 100mm x 100m in size, 
                                                                   and all parts must come from the parts list.  Since
                                                                   This is an addition to OnBoard, your project must