Formatted Steps
This commit is contained in:
chark1es
parent
d7144952a4
commit
832aa69257
5 changed files with 79 additions and 49 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -1,9 +1,13 @@
|
|||
---
|
||||
const {text, number, col, position} = Astro.props;
|
||||
const { text, number, col, position, width } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`relative col-span-${col} border-[0.1vw] border-white/30 h-[23vh] text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw]`}>
|
||||
<p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
|
||||
<div
|
||||
class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
|
||||
>
|
||||
<p
|
||||
class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight `}
|
||||
>
|
||||
{number}
|
||||
</p>
|
||||
{text}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,41 @@
|
|||
---
|
||||
import Step from "./Step.astro"
|
||||
import steps from "../../data/steps.json"
|
||||
import Subtitle from "../core/Subtitle.astro"
|
||||
import Step from "./Step.astro";
|
||||
import steps from "../../data/steps.json";
|
||||
import Subtitle from "../core/Subtitle.astro";
|
||||
---
|
||||
|
||||
<div class="flex flex-col items-center mt-[7%] mb-[10%]">
|
||||
<Subtitle title="How it works:" />
|
||||
<div class="grid grid-cols-5 w-[70%] gap-[1.5vw]">
|
||||
{steps.map((step)=>(
|
||||
<Step
|
||||
text = {step.text}
|
||||
number = {step.number}
|
||||
col = {step.col}
|
||||
position = {step.position}
|
||||
/>
|
||||
))}
|
||||
<div class="grid grid-rows-2 w-[70%] gap-[2vw]">
|
||||
<div class="grid grid-cols-4 gap-[1.5vw]">
|
||||
{
|
||||
steps
|
||||
.slice(0, 3)
|
||||
.map((step) => (
|
||||
<Step
|
||||
text={step.text}
|
||||
number={step.number}
|
||||
col={step.col}
|
||||
position={step.position}
|
||||
width={step.width}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-[1.5vw]">
|
||||
{
|
||||
steps
|
||||
.slice(3, 5)
|
||||
.map((step) => (
|
||||
<Step
|
||||
text={step.text}
|
||||
number={step.number}
|
||||
col={step.col}
|
||||
position={step.position}
|
||||
width={step.width}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,32 +1,34 @@
|
|||
[
|
||||
{
|
||||
"text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
|
||||
"number": "01",
|
||||
"col": "2",
|
||||
"position": "bottom-0 right-[2%] "
|
||||
},
|
||||
{
|
||||
"text": "Participants will be put into teams of 5 based on their experience and interests",
|
||||
"number": "02",
|
||||
"col": "2",
|
||||
"position": " top-0 left-[2%] "
|
||||
},
|
||||
{
|
||||
"text": "Each team will be assigned a mentor.",
|
||||
"number": "03",
|
||||
"col": "1",
|
||||
"position": "bottom-0"
|
||||
},
|
||||
{
|
||||
"text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
|
||||
"number": "04",
|
||||
"col": "3",
|
||||
"position": "bottom-0 right-[2%] "
|
||||
},
|
||||
{
|
||||
"text": "Winning teams will walk away with prizes!",
|
||||
"number": "05",
|
||||
"col": "2",
|
||||
"position": "top-0 right-[5%]"
|
||||
}
|
||||
{
|
||||
"text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
|
||||
"number": "01",
|
||||
"col": "2",
|
||||
"position": "bottom-0 right-[2%] "
|
||||
},
|
||||
{
|
||||
"text": "Participants will be put into teams of 5 based on their experience and interests",
|
||||
"number": "02",
|
||||
"col": "1",
|
||||
"position": " top-0 left-[2%] ",
|
||||
"width": "col-span-1"
|
||||
},
|
||||
{
|
||||
"text": "Each team will be assigned a mentor.",
|
||||
"number": "03",
|
||||
"col": "1",
|
||||
"position": "bottom-0"
|
||||
},
|
||||
{
|
||||
"text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
|
||||
"number": "04",
|
||||
"col": "2",
|
||||
"position": "bottom-0 right-[2%] "
|
||||
},
|
||||
{
|
||||
"text": "Winning teams will walk away with prizes!",
|
||||
"number": "05",
|
||||
"col": "1",
|
||||
"position": "top-0 right-[5%]",
|
||||
"width": "col-span-1"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
safelist: ["col-span-1", "col-span-2", "col-span-3", "col-span-4"],
|
||||
theme: {
|
||||
extend: {
|
||||
boxShadow: {
|
||||
'glow': '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
|
||||
glow: "0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)",
|
||||
},
|
||||
colors: {
|
||||
ieee: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue