make responsive

Scott170c · Dec 8, 2024 · 5662153 · 5662153
1 parent 1c26648
commit 5662153
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 92 deletions.
diff --git a/app/ModelViewer.js b/app/ModelViewer.js
@@ -7,7 +7,7 @@ const ModelViewer = () => {
         disable-zoom
         camera-orbit="0deg 0deg 105%"
         disable-pan
-        style={{ width: '25%', height: '500px' }}
+        style={{ width: '25vw' ,height: '40vh'}}
       ></model-viewer>
     );
   };

diff --git a/app/components/3box.tsx b/app/components/3box.tsx
@@ -12,6 +12,8 @@ const Threebox = () => {
         <Grid columns= {[1,1,1,3]}gap = {[50,5,20,0]} sx={{
             mt: '5vh',
             width: 'fit-content',
+            minheight: '40vh',
+            resize: 'both',
             px: '3vw',
             textAlign: 'center',
             justifyContent: 'center',
@@ -21,32 +23,29 @@ const Threebox = () => {
             borderRadius: '1rem',
             mx: '32px',
             mb: '5vh',
-            paddingBottom: '2vh',
-            paddingTop: '2vh',
-
-
+            padding: '2vh',
           }}>
               <Box sx={{
                 alignItems: 'center',
                 justifyContent: 'center',
                 display: 'flex',
                 flexDirection: 'column',
                 mx: '1vw',
-                paddingTop: '2rem',
+                paddingTop: ['0rem', '2rem'],
                 borderRadius: '20px',
               }}>
                 <Heading as="h4"   sx={{
                   fontFamily: 'var(--font-inter)',
                   fontWeight: 900,
-                  fontSize: '1.5vw',
+                  fontSize: ['1rem', '1.5vw'],
                   paddingBottom: '1.2rem',
                   color: 'white',
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
                 } }>Design a PCB</Heading>
                 <Image sx={{
-                  width:'27vw',
-                  height: '28vw',
-                  borderRadius: '20px',
+                  width:['28vh', '28vw'],
+                  height:['32vh', '28vw'],
+                  borderRadius: '10px',
                   paddingBottom: '2rem',
                   fill: 'true'
                 }}
@@ -59,22 +58,22 @@ const Threebox = () => {
                 justifyContent: 'center',
                 display: 'flex',
                 flexDirection: 'column',
-                paddingTop: '2rem',
+                paddingTop: ['1rem', '2rem'],
                 mx: '1vw',
 
                 textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
               }}>
                      <Heading as="h4"   sx={{
                   fontFamily: 'var(--font-inter)',
                   fontWeight: 900,
-                  fontSize: '1.5vw',
+                  fontSize: ['1rem', '1.5vw'],
                   color: 'white',
                   paddingBottom: '1.2rem'
                 } }>Design Art</Heading>
                    <Image sx={{
-                  width:'27vw',
-                  height:'28vw',
-                  borderRadius: '16px',
+                  width:['28vh', '28vw'],
+                  height:['32vh', '28vw'],
+                  borderRadius: '10px',
                   paddingBottom: '2rem'
                 }} src="https://cloud-go1uacpkk-hack-club-bot.vercel.app/0image.png"></Image>
               </Box>
@@ -85,21 +84,21 @@ const Threebox = () => {
                 mx: '1vw',
 
                 flexDirection: 'column',
-                paddingTop: '2rem'
+                paddingTop: ['0rem', '2rem'],
               }}>
               <Heading as="h4"   sx={{
                   fontFamily: 'var(--font-inter)',
                   fontWeight: 900,
-                  fontSize: '1.5vw',
+                  fontSize: ['1rem', '1.5vw'],
                   paddingBottom: '1.2rem',
                   color: 'white',
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
                 } }>Create Firmware</Heading>
                    <Image sx={{
-                  width:'27vw',
-                  height:'28vw',
-                  borderRadius: '16px',
-                  paddingBottom: '2rem'
+                  width:['28vh', '28vw'],
+                  height:['32vh', '28vw'],
+                  borderRadius: '10px',
+                  paddingBottom: ['1rem', '2rem']
                 }}
                 src = "https://cloud-ix9a26xw1-hack-club-bot.vercel.app/0image.png"
                 ></Image>

diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
@@ -1,5 +1,6 @@
+import { kMaxLength } from 'buffer';
 import React from 'react';
-
+import { Box } from 'theme-ui';
 // Define the type for the props
 interface CardProps {
   question: string;
@@ -9,10 +10,10 @@ interface CardProps {
 // Create the component
 const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
   return (
-    <div style={styles.card}>
+    <Box sx={styles.card}>
       <h3 style={styles.question}>{question}</h3>
       <p style={styles.answer}>{answer}</p>
-    </div>
+    </Box>
   );
 };
 
@@ -24,25 +25,25 @@ const styles = {
     margin: '16px',
     backgroundColor: 'rgba(201, 227, 255, 0.73)',
     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-    height: '16vw',
-    width: '25vw',
+    height: ['fill-content', '16vw'],
+    width: ['60vw', '26vw'],
     border: '5px solid rgba(39, 114, 193, 0.42)',
     overflow: 'hidden',
   },
   question: {
-    fontSize: '1.6rem',
+    fontSize: 'calc(1.2vw + 1.2vh)',
     fontWeight: 790,
     color: '#FFFFFF',
     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-    paddingLeft: '10px',
+    paddingLeft: '2%',
   },
   answer: {
-    fontSize: '0.8rem',
+    fontSize: 'calc(0.6vw + 0.6vh)',
     color: '#003180',
     marginTop: '8px',
     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
     fontWeight: 600,
-    paddingLeft: '10px'
+    paddingLeft: '2%'
   },
 };
 

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -20,7 +20,7 @@ import {
             alignItems: 'center',
             // py: '10px',
             justifyContent: 'center',
-            fontSize: '2.7vh',
+            fontSize: '120%',
             fontWeight: 700,
             color: '#90C4FF'
           }}>

diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
@@ -1,14 +1,17 @@
 import { Heading, Text } from 'theme-ui'
 const components = {
     h1: (props) => <Heading as="h1" sx={{ 
-        fontSize: 5, color: 'black' ,      
+        fontSize: 5,  
         fontFamily: 'var(--font-inter)',                    
-        fontWeight:800
+        fontWeight:800,
+        marginBottom: '10px'
     }} {...props} />,
-    h2: (props) => <Heading as="h2" sx={{ fontSize: 4, color: 'black',       fontFamily: 'var(--font-inter)', 
+    h2: (props) => <Heading as="h2" sx={{ fontSize: 4,   fontFamily: 'var(--font-inter)', marginBottom: '10px'
     }} {...props} />,
-    h3: (props) => <Heading as="h3" sx={{ fontSize: 3, color: 'black' }} {...props} />,
+    h3: (props) => <Heading as="h3" sx={{ fontSize: 3,  }} {...props} />,
     p: (props) => <Text sx={{ fontSize: 2, color: 'text' }} {...props} />,
-
+    ol: (props) => <ol style={{ listStyleType: 'decimal', paddingLeft:'20px', marginLeft:'20px' }} {...props} />,
+    li: (props) => <li {...props} />,
+
 }
 export default components
diff --git a/app/components/top.tsx b/app/components/top.tsx
@@ -19,15 +19,14 @@ import {
           alignItems: 'center',
           justifyContent: 'center',
           gap: '1rem',
-          paddingRight: '3rem',
+          paddingRight: ['0rem', '3rem'],
           width: '100%',
-          margin: 'auto',
+          margin: ['auto'],
+
+          mt: ['10vh', '0vh'],
+          backgroundImage: '../public/background2.png',
 
-          mt: '15vh',
-          textAlign: 'center',
-          // height: '65vh'
-          backgroundImage: 'https://cloud-n3hpb6nr4-hack-club-bot.vercel.app/0image.png',
-          height: '100vh'
+          height: ['2vh', '90vh'],
         }}
         >
       {typeof window !== 'undefined' && <ModelViewer />}
@@ -56,13 +55,13 @@ import {
             ml: ['0vw','2vw'],
             // mt: ['1%','12%'],
             maxWidth: '100%',
-            textAlign: 'center'
+            // textAlign: 'center'
           }}
           >
           <Heading as="h1" variant="styles.h1" 
                 sx={{ 
                   fontFamily: 'var(--font-inter)', 
-                  fontSize: ['5rem', '6.5rem'], 
+                  fontSize: ['2rem', '6.5rem'], 
                   fontWeight:800,
                   textAlign: ['center','center','left'],
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
@@ -72,27 +71,30 @@ import {
           <Heading as="h2" variant="styles.h1" 
                 sx={{ 
                   fontFamily: 'var(--font-inter)', 
-                  fontSize: ['1.5rem','1.9rem'], 
+                  fontSize: ['0.5rem','1.9rem'], 
                   fontWeight:800,
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
                 }}>
             Design a PCB holiday decoration this winter, get one shipped!
           </Heading>
+          <a href = "/guide">
           <Button
           sx={{
             mx: ['auto',0],
             fontFamily: 'var(--font-inter)',
-            fontSize: '1.2rem',
+            fontSize: ['0.4rem', 'calc(0.6vw + 0.6vh)'],
             fontWeight: 900,
             color: 'white',
             bg: '#f90b0b',
-            width: 'fit-content',
+            // width: 'fit-content',
             borderRadius: '2rem',
-            padding: '1rem 2rem',
-            mt: '1rem'
+            padding: ['0.6rem 0.6rem', '1rem 2rem'],
+            mt: '1rem',
+
           }}>
               <b>&nbsp;Learn to Make a Decoration &nbsp; ➜</b>
           </Button>
+          </a>
 
 
           </Box>

diff --git a/app/globals.css b/app/globals.css
@@ -13,10 +13,9 @@
 }
 body {
   color: #FFFFFF;
-  background: var(linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1)));
+  background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);';
   font-family: Arial, Helvetica, sans-serif;
   height: 100vh;
   margin: 0;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
+  min-width: none;
 }
diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx
@@ -1,22 +1,53 @@
 
-# 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:
+# **Hacky Holidays Guide**
+Hacky Holidays is a limited time YSWS event for making your own PCB tree decorations! There are **3** major steps in making a successful decoration:
 
 1. Choosing your Parts
-2. Making your Schematic
-3. Designing your Schematic
-4. Programming your PCB
+2. Designing your PCB
+3. Programming your PCB
+
+### **** This guide serves as a learning tool to help you get started, If you submit the guide PCB you will not be accepted! ****
+
+---
 
 # 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
+Parts covered in the guide **(THESE MUST BE ON YOUR PCB TO WORK):**
+
+- Neopixels
+- MCU (separate guides for the ESP32 and ch552)
+- Batteries
+
+If you want to add any components **not** on the approved list, ask one of the organizers in #hacky-holidays!
+
+---
+
+# **Designing your PCB**
+
+For this guide, we are going to be using KiCad, so if you are using a different tool your steps might be a bit different! 
+
+First, open up KiCad, and go to File → New Project… and name it whatever you want! Just make sure you name it something you remember so you can come back to it :P
+
+![image.png](https://cloud-ho0oo25ks-hack-club-bot.vercel.app/0image__67_.png)
+
+Then Click on the **Schematic Editor** Button. It will take you to a blank page where you will start designing your PCB!
+
+![image (3).png](https://prod-files-secure.s3.us-west-2.amazonaws.com/51907c75-c258-4bc2-9858-58c3dcad7100/4c6c1b0e-1052-4e21-b6f9-44eefa94f9ae/b38b9519-5210-4b7c-9046-fbd9882d3ce7.png)
+
+Now it’s time to branch off…. Click on the link with the microcontroller you plan to use!
+
+Xiao Esp32C3
+
+2nd Microcontroller
+
+---
+
+# **Programming your PCB**
 
-()
+To program your PCB, use the Arduino IDE and the Neopixels library! Here is a helpful resource to help you get started:
 
-[General Info](https://www.notion.so/General-Info-153a1dc89099809d86c0fda32bbf66a9?pvs=21)
+https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library-use
 
-[How to wire up your LEDs](https://www.notion.so/How-to-wire-up-your-LEDs-154a1dc890998077b10aecd282861452?pvs=21)
+# Submissions & Manufacturing
diff --git a/app/guide/page.tsx b/app/guide/page.tsx
@@ -14,14 +14,26 @@ import { Box } from 'theme-ui'
 // }
 export default function guide() {
   return (
+    <Box sx={{
+      background: 'rgba(0,153,255,1)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingBottom: '20px',
+      minHeight: '100vh',
+    }}>
     <Box sx = {{
       fontFamily: 'var(--font-inter)',
-      color: 'black',
+      minHeight: '100vh',
+      color: 'white',
+      width: '75vw',
+      background: 'rgba(0,153,255,1)',
       listStyleType: 'decimal',
-    }}>
-          <MDXProvider >
+   }}>
+          <MDXProvider  >
       <GuideMD components={components}/>
     </MDXProvider>  
     </Box>
+    </Box>
 );
 }