edit topbar + doc margins

This commit is contained in:
acon 2025-05-10 17:49:24 -04:00
parent 380dbaa790
commit e1744f0c5c
6 changed files with 26 additions and 19 deletions

View file

@ -62,7 +62,7 @@
<div class="my-24 flex flex-col justify-center items-center mx-auto p-10">
<p class="text-4xl md:text-6xl justify-center text-center font-bold mx-5">Choose Your Track</p>
<p class="text-4xl md:text-6xl justify-center text-center font-bold mx-5 font-dystopian">Choose Your Track</p>
<p class="text-center text-lg md:text-xl mx-5"><i>Make as many projects as you want, as long as you finish designing your previous one!</i></p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-8">
@ -83,7 +83,7 @@
<div class="flex flex-col justify-center text-center p-10">
<div class="justify-center text-center">
<p class="text-4xl md:text-6xl font-bold">Starter Projects</p>
<p class="text-4xl md:text-6xl font-bold font-dystopian">Starter Projects</p>
<p class="text-lg md:text-xl mt-2">If you're intimidated by the possibilites and unsure what to build - try one of our tutorials + get a kit to build it!</p>
<p class="text-lg md:text-xl">Plus, we'll also give you the tools - like a soldering iron - to build it with!</p>
</div>
@ -146,8 +146,8 @@
<div class="mt-8 flex flex-col justify-center items-center mx-8">
<p class="justify-center text-center font-bold text-6xl">FAQ</p>
<div class="grid grid-cols-[minmax(33%, 1fr) gap-4 mx-24 mt-8 mx-auto">
<p class="justify-center text-center font-bold text-6xl font-dystopian">FAQ</p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mx-24 mt-8 mx-auto">
<%= render partial: "card", locals: { title: "Eligibility", content: "Anyone 18 or below in high school is welcome! If you're in middle school or a gap year student, check in with us at [email]. You will need to verify with ID when we send you your grant!" } %>
<%= render partial: "card", locals: { title: "Are teams allowed for Highway projects?", content: "You are free to make the hardware project with a friend! However, you both need to make posts, and the grant will be shared between you two." } %>
<%= render partial: "card", locals: { title: "Who's running this?", content: "A group of ~15 teenagers around the world! We're funded by Hack Club, a [503 non-profit who have had donations from x, y, z]." } %>

View file

@ -1,4 +1,4 @@
<div class="p-8 md:p-12">
<div class="p-8 md:p-12 mt-16">
<p class="text-4xl font-bold mb-4">Starter projects</p>
<p>Don't know what to make? Want to dip your toes in? Choose one of these projects to start your adventure with hardware!</p>

View file

@ -25,13 +25,13 @@
<body>
<main class="">
<div class = "grid grid-cols-5">
<div class = "col-span-full md:col-span-1 inline md:sticky md:h-screen top-0">
<div class = "col-span-full md:col-span-1 inline md:sticky md:h-screen top-0 mt-12">
<%= render partial: "overview/sidebar" %>
</div>
<div class="max-md:order-first col-span-full md:col-span-4 ">
<div class = "flex flex-col h-[100vh]">
<div><%= render "shared/topbar", class: "sticky top-0" %></div>
<div class = "p-8 md:p-12 overflow-y-auto">
<div class = "p-8 md:p-12 overflow-y-auto mt-14">
<%= yield %>
</div>
</div>

View file

@ -1,4 +1,4 @@
<div class="border-t-4 md:border-t-0 md:border-r-4 border-[#2E2A54] text-white h-full flex flex-col gap-4 justify-start">
<div class="border-t-4 md:border-t-0 md:border-r-4 border-[#2E2A54] text-white h-full flex flex-col gap-4 justify-start mt-8">
<div class="flex flex-col justify-start p-8">
<div class="text-center grid grid-cols-1 gap-2 text-xl font-dystopian">
<%# link_to "Projects", projects_path, class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>

View file

@ -1 +1,4 @@
<%= raw @content %>
<div>
<%= raw @content %>
</div>

View file

@ -1,10 +1,12 @@
<div x-data="{ open: false }" class="w-full bg-[#302C61] text-white px-8 flex items-center shadow-md sticky top-0 left-0 z-50">
<div class="flex items-center space-x-4">
<%= link_to root_path do %>
<%= image_tag "logo.png", alt: "Logo", class: "max-h-[80px]" %>
<% end %>
</div>
<div x-data="{ open: false }" class="w-full bg-[#302C61] text-white px-8 shadow-md fixed top-0 left-0 z-50">
<div class="flex items-center justify-between md:justify-start">
<div class="flex items-center space-x-4">
<%= link_to root_path do %>
<%= image_tag "logo.png", alt: "Logo", class: "max-h-[80px]" %>
<% end %>
</div>
<!-- mobile (closed) -->
<button @click="open = !open" class="md:hidden text-white focus:outline-none">
@ -26,7 +28,8 @@
<%= link_to "Starter projects", launchpad_path %>
<%= link_to "Resources", root_path %>
</div>
</div>
</div>
<!-- mobile (open) -->
<div
x-show="open"
@ -36,9 +39,10 @@
x-transition:leave="transition ease-out duration-100"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
class="md:hidden mt-4 space-y-4 pb-5 *:font-dystopian *:uppercase *:hover:underline *:text-2xl"
class="md:hidden mt-4 space-y-4 pb-5 *:font-dystopian *:uppercase *:hover:underline *:text-2xl flex flex-col"
>
<%= link_to "Getting started", "/overview" %>
<%= link_to "Starter projects", launchpad_path %>
<%= link_to "Resources", root_path %>
</div>
</div>
</div>