Skip to content

Commit 21c5b10

Browse files
transcentaltranscental
authored
Merge pull request #25 from Revolution-Hacks/mini
mini
2 parents 4577a53 + f486aeb commit 21c5b10

File tree

6 files changed

+238
-13
lines changed

6 files changed

+238
-13
lines changed

‎src/lib/components/EmailLanding.svelte‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,4 @@
3737
form {
3838
margin: 1em 0;
3939
}
40-
41-
button {
42-
height: 3em;
43-
padding: 0 2em;
44-
color: rgb(var(--fg));
45-
font-weight: 500;
46-
background: none;
47-
48-
@include style.hover;
49-
@include style.box-texture('$lib/textures/inputbox.svg');
50-
}
5140
</style>

‎src/lib/components/Page.svelte‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<script lang="ts">
2-
let { title, children } = $props();
2+
let { title, children, inverted = false } = $props();
33
</script>
44

55
<svelte:head>
66
<title>{title} | Revolution</title>
77
</svelte:head>
88

9-
<main>
9+
<main class:inverted={inverted}>
1010
<div class="content">
1111
{@render children?.()}
1212
</div>
1313
</main>
1414

1515
<style lang="scss">
16+
@use 'src/lib/style';
17+
1618
.content {
1719
margin: auto;
1820
padding: 4em 2em;
@@ -22,4 +24,25 @@
2224
flex-direction: column;
2325
gap: 0.5em;
2426
}
27+
28+
.inverted {
29+
filter: #{"grayscale(50%) invert()"};
30+
}
31+
32+
main :global(button), main :global(.style-button) {
33+
display: block;
34+
text-decoration: none;
35+
font-weight: bold;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
height: 3em;
40+
width: 16em;
41+
padding: 0 2em;
42+
color: rgb(var(--fg));
43+
background: none;
44+
45+
@include style.hover;
46+
@include style.box-texture('$lib/textures/inputbox.svg');
47+
}
2548
</style>

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<a class="header" href="/">Revolution</a>
2323
<div class="content">
2424
<ul>
25+
<li><a href="/mini">Revolution (mini)</a></li>
2526
<li><a href="https://hackclub.com/slack/">Hack Club Slack (talk to us!)</a></li>
2627
<li><a href="https://github.com/Revolution-Hacks/revolution">Source code</a></li>
2728
<li><a href="https://hcb.hackclub.com/revolution">Financials</a></li>

‎src/routes/+page.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
to see you there!
4747
</p>
4848
<br />
49+
<div class="info-card top-info">
50+
<h2>Interested in Revolution?</h2>
51+
You should come to our latest event, <a href="/mini">mini</a>! Sign ups close at the end of the year, UK time.
52+
</div>
53+
<br />
4954
<p class="email-title">Find out when sign-ups open:</p>
5055
{@render email()}
5156
</div>
@@ -101,6 +106,15 @@
101106
position: relative;
102107
min-height: 100vh;
103108
overflow-x: clip;
109+
110+
.top-info {
111+
width: 100%;
112+
padding: 1.5em;
113+
114+
h2 {
115+
font-size: 1em;
116+
}
117+
}
104118
105119
.track-container {
106120
display: flex;

‎src/routes/mini/+page.svelte‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<script>
2+
import Page from '$lib/components/Page.svelte';
3+
import DoubleArrow from '$lib/images/doublearrow.svg?component';
4+
import Gear from '$lib/images/gear.svg?component';
5+
</script>
6+
7+
<Page title="mini" inverted>
8+
<div class="first-screen">
9+
<div class="first-screen-content">
10+
<DoubleArrow class="logo" />
11+
<h1 class="header">Revolution<br /><span class="mini">mini</span></h1>
12+
13+
<div class="content">
14+
<p class="hero">We're hosting a small hackathon in London on <strong>January 4th</strong></p>
15+
<br />
16+
<a href="https://revolution.fillout.com/mini" class="style-button">Sign up</a>
17+
</div>
18+
</div>
19+
20+
<div class="gear first">
21+
<Gear />
22+
</div>
23+
<div class="gear second">
24+
<Gear />
25+
</div>
26+
</div>
27+
28+
<div class="info-container">
29+
<div class="info-card">
30+
<h2>Where is it?</h2>
31+
<p>We don't know yet, but we're looking at venues in London Zones 1-3. We'll let you know as soon as we have a confirmed venue.</p>
32+
</div>
33+
<div class="info-card">
34+
<h2>When is it?</h2>
35+
<p>January 4th, 2025. The exact times will depend on the venue, but will be roughly 9am-5pm.</p>
36+
</div>
37+
<div class="info-card">
38+
<h2>What can I build?</h2>
39+
<p>Anything! As long as it follows the theme that is.</p>
40+
</div>
41+
<div class="info-card">
42+
<h2>What do I need to bring?</h2>
43+
<p>Yourself, a photo ID (student ID card is fine!), a smile, and your laptop! Food and drink will be provided.</p>
44+
</div>
45+
<div class="info-card">
46+
<h2>How much does it cost?</h2>
47+
<p>Revolution (mini) is free to attend! You will need to pay for transport though.</p>
48+
</div>
49+
<div class="info-card">
50+
<h2>What about allergies?</h2>
51+
<p>If you have allergies or other medical conditions, let us know on the signup form and we'll do our best to accomodate them.</p>
52+
</div>
53+
<div class="info-card">
54+
<h2>What is the theme?</h2>
55+
<p>You'll find out on the day! We're not spoiling it for you, but it may be somewhat related to the Industrial Revolution. 👀</p>
56+
</div>
57+
</div>
58+
</Page>
59+
60+
<style lang="scss">
61+
@use 'src/lib/style';
62+
63+
.first-screen {
64+
z-index: 0;
65+
66+
.gear {
67+
position: absolute;
68+
animation: 120s linear infinite rotate;
69+
height: 24em;
70+
aspect-ratio: 1;
71+
72+
:global(svg) {
73+
width: 100%;
74+
height: 100%;
75+
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.2));
76+
}
77+
78+
:global(path) {
79+
fill: rgb(var(--extra-dim));
80+
}
81+
82+
&.first {
83+
top: 70%;
84+
right: calc(0% - 4em);
85+
--transform: translate(50%, -100%);
86+
}
87+
88+
&.second {
89+
bottom: 20%;
90+
left: 0%;
91+
--transform: translate(-50%, 25%);
92+
}
93+
94+
@media (prefers-reduced-motion) {
95+
animation: none;
96+
}
97+
}
98+
99+
.first-screen-content {
100+
position: relative;
101+
z-index: 100;
102+
display: grid;
103+
grid-template-columns: auto min-content;
104+
grid-template-rows: min-content min-content;
105+
justify-content: center;
106+
align-content: center;
107+
padding: 8em 4em;
108+
margin: auto;
109+
gap: 1em;
110+
111+
:global(.logo) {
112+
/* I'm not sure why this is needed. Maybe because it's another component */
113+
grid-area: 1 / 1 / 1 / 1;
114+
width: 3em;
115+
height: 3em;
116+
align-self: center;
117+
}
118+
119+
.header {
120+
grid-area: 1 / 2 / 1 / 2;
121+
font-size: 3em;
122+
line-height: 1em;
123+
min-width: max-content;
124+
125+
.mini {
126+
display: block;
127+
text-align: left;
128+
line-height: 0.7em;
129+
font-size: 0.5em;
130+
}
131+
}
132+
133+
.content {
134+
display: grid;
135+
grid-area: 2 / 1 / 2 / end;
136+
137+
.hero {
138+
font-size: 1.5em;
139+
line-height: 1.2em;
140+
}
141+
}
142+
143+
@media (min-width: style.$size_sm) {
144+
:global(.logo) {
145+
width: 6em;
146+
height: 6em;
147+
}
148+
149+
.header {
150+
grid-area: 1 / 2 / 1 / 2;
151+
font-size: 6em;
152+
min-width: max-content;
153+
padding-right: 4rem;
154+
}
155+
156+
.content {
157+
display: grid;
158+
grid-area: 2 / 2 / 2 / 2;
159+
}
160+
}
161+
}
162+
}
163+
164+
.info-container {
165+
display: flex;
166+
flex-flow: wrap;
167+
gap: 1em;
168+
z-index: 5;
169+
170+
.info-card {
171+
flex: auto;
172+
flex-basis: 16em;
173+
margin: auto;
174+
max-width: calc(100vw - 4em);
175+
width: 64em;
176+
padding: 2em 2em;
177+
box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.2);
178+
height: 16em;
179+
180+
@include style.box-texture('$lib/textures/containerbox.svg');
181+
}
182+
}
183+
</style>

‎wak.toml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# https://github.com/iamawatermelo/wakapi-anyide v0.6.7
2+
3+
[meta]
4+
version = 1
5+
watchers = ['files']
6+
7+
[files]
8+
include = ["*"] # files to include in tracking
9+
exclude = [] # files to exclude in tracking
10+
exclude_files = [".gitignore"] # files whose contents will be used to exclude other files from tracking
11+
exclude_binary_files = true # whether to ignore binary files
12+
# language_mapping = {".kicad_sch" = "Kicad Schematic"} # custom language mapping
13+
14+
[project]
15+
name = "revolution" # your project name

0 commit comments

Comments
 (0)