Skip to content

Commit c94b2db

Browse files
ThatNerdSquaredThatNerdSquared
committed
feat: implement hiring banner
1 parent af9f9de commit c94b2db

File tree

3 files changed

+76
-3
lines changed

3 files changed

+76
-3
lines changed

‎src/components/HiringBanner.astro‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<div id="hiring-banner">
2+
<a href="https://hiring.ubcigem.com/" target="_blank">
3+
interested in joining? check out our hiring package!
4+
</a>
5+
<button>×</button>
6+
</div>
7+
8+
<script>
9+
const closeHiringBanner = () => {
10+
document.documentElement.style.setProperty("--hiring-banner-height", "0")
11+
document.getElementById("hiring-banner").remove()
12+
}
13+
14+
document
15+
.getElementById("hiring-banner")
16+
.addEventListener("click", closeHiringBanner)
17+
</script>
18+
19+
<style>
20+
:root {
21+
--hiring-banner-height: 2rem;
22+
}
23+
24+
#hiring-banner {
25+
display: grid;
26+
grid-template-columns: 2rem auto 2rem;
27+
position: fixed;
28+
top: 0;
29+
padding: 0 0.5rem;
30+
height: var(--hiring-banner-height);
31+
width: 100%;
32+
background-color: var(--color-secondary-red);
33+
}
34+
35+
a {
36+
grid-column: 2;
37+
justify-content: center;
38+
color: #ffffff;
39+
text-decoration: underline;
40+
text-transform: uppercase;
41+
}
42+
43+
button {
44+
grid-column: 3;
45+
background: none;
46+
border: none;
47+
font-size: 1.5rem;
48+
color: #ffffff;
49+
}
50+
51+
@media (max-width: 1000px) {
52+
#hiring-banner {
53+
top: auto;
54+
bottom: var(--navigation-height);
55+
}
56+
}
57+
58+
@media (max-width: 534px) {
59+
:root {
60+
--hiring-banner-height: 4rem;
61+
}
62+
}
63+
64+
@media (max-width: 322px) {
65+
:root {
66+
--hiring-banner-height: 5rem;
67+
}
68+
}
69+
</style>

‎src/components/Navigation.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,17 @@
3636
}
3737

3838
html body {
39-
padding-top: var(--navigation-height);
39+
/* --hiring-banner-height is only set when HiringBanner.astro is in use */
40+
padding-top: calc(var(--navigation-height) + var(--hiring-banner-height, 0px));
4041
}
4142

4243
nav {
4344
display: flex;
4445
position: fixed;
4546
width: 100%;
4647
height: var(--navigation-height);
47-
top: 0;
48+
/* --hiring-banner-height is only set when HiringBanner.astro is in use */
49+
top: var(--hiring-banner-height, 0);
4850
padding: 0 calc(var(--page-inline-inset) / 4);
4951
background-color: var(--background-color);
5052
border-bottom: var(--black-border);

‎src/layouts/Layout.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import Navigation from '../components/Navigation.astro'
33
import Footer from '../components/Footer.astro'
4+
import HiringBanner from '../components/HiringBanner.astro'
45
56
interface Props {
67
title: string;
@@ -21,6 +22,7 @@ const { title } = Astro.props
2122
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet" />
2223
</head>
2324
<body>
25+
<HiringBanner />
2426
<Navigation />
2527
<main>
2628
<slot />
@@ -45,7 +47,7 @@ const { title } = Astro.props
4547
--color-secondary-green: #d8f0e2;
4648
--color-secondary-orange: #fff0e2;
4749
--color-secondary-purple: #e4e6fc;
48-
--color-secondary-red: #fff6f5;
50+
--color-secondary-red: #ba4943;
4951
--color-secondary-blue: #ebf3fe;
5052
--color-secondary-peach: #fdf2e9;
5153

0 commit comments

Comments
 (0)