Skip to content

Commit 17f363f

Browse files
Rembo-FWRembo-FW
authored
Add announcement and shop (#75)
2 parents 70be1a0 + 61e9504 commit 17f363f

3 files changed

Lines changed: 89 additions & 23 deletions

File tree

‎src/components/Announcement.astro‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
3+
---
4+
5+
<div class="announcement-bar">
6+
<span class="announcement-badge">NOUVEAU</span>
7+
<a href="https://www.helloasso.com/associations/bde-sigma/boutiques/t-shirt-hacklab-esgi" class="announcement-link">
8+
Le HackLab ESGI lance sa collection été : 3 modèles au design cœur — t-shirt à 10 € !
9+
</a>
10+
<span style="margin-left:auto;">
11+
<iframe
12+
id="haWidget"
13+
allowtransparency="true"
14+
src="https://www.helloasso.com/associations/bde-sigma/boutiques/t-shirt-hacklab-esgi/widget-bouton"
15+
style="width: 140px; height: 66px; border: none; vertical-align: middle; background: #f8fafc;"
16+
onload="window.addEventListener('message', e => { const dataHeight = e.data.height; const haWidgetElement = document.getElementById('haWidget'); if (dataHeight && haWidgetElement) haWidgetElement.height = dataHeight + 'px'; })"
17+
></iframe>
18+
</span>
19+
</div>

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import '../styles/reset.css';
66
import Background from '../components/Background.astro';
77
import Navbar from '../components/Navbar.astro';
88
import LayoutGrid from '../components/LayoutGrid.astro';
9+
import Announcement from '../components/Announcement.astro';
910
import { name, themeColor, twitterHandle } from 'spectre:globals';
1011
1112
interface Props {
@@ -63,6 +64,7 @@ const { title, description, image, pagefindIgnore, article } = Astro.props;
6364
{description && <meta name="twitter:description" content={description} />}
6465
</head>
6566
<body>
67+
<Announcement />
6668
<Navbar />
6769
<main data-pagefind-ignore={pagefindIgnore}>
6870
<LayoutGrid>

‎src/styles/globals.css‎

Lines changed: 68 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
@font-face {
2-
font-family: 'ConsolasWeb';
3-
src: url('/fonts/Consolas.woff2') format('woff2'),
4-
url('/fonts/Consolas.ttf') format('truetype');
2+
font-family: "ConsolasWeb";
3+
src: url("/fonts/Consolas.woff2") format("woff2"),
4+
url("/fonts/Consolas.ttf") format("truetype");
55
font-display: swap;
66
font-weight: normal;
77
font-style: normal;
88
}
99

1010
:root {
11-
--font-sans: 'ConsolasWeb', Consolas, sans-serif;
12-
--font-heading: 'ConsolasWeb', Consolas, monospace;
11+
--font-sans: "ConsolasWeb", Consolas, sans-serif;
12+
--font-heading: "ConsolasWeb", Consolas, monospace;
1313
--primary: #095496;
1414
--primary-rgb: 9, 84, 150;
1515
--primary-light: #045b83;
1616
--primary-lightest: #0ac9e0;
1717
}
1818

1919
body {
20-
-webkit-font-smoothing: antialiased;
20+
-webkit-font-smoothing: antialiased;
2121
font-family: var(--font-sans);
2222
}
2323

@@ -28,11 +28,13 @@ h4,
2828
h5,
2929
h6,
3030
code {
31-
overflow-wrap: anywhere;
32-
font-family: var(--font-heading);
31+
overflow-wrap: anywhere;
32+
font-family: var(--font-heading);
3333
}
3434

35-
pre, pre *, code {
35+
pre,
36+
pre *,
37+
code {
3638
font-family: var(--font-heading);
3739
line-height: 1;
3840
}
@@ -41,6 +43,50 @@ html {
4143
height: 100%;
4244
}
4345

46+
.announcement-bar {
47+
display: flex;
48+
align-items: center;
49+
gap: 0.5rem;
50+
background: white; /* clair */
51+
color: #222;
52+
border-bottom: 1px solid #e2e8f0;
53+
padding: 0.5rem 1rem;
54+
font-size: 0.95rem;
55+
position: relative;
56+
z-index: 1001;
57+
}
58+
59+
.announcement-badge {
60+
background: #2563eb;
61+
color: #fff;
62+
font-weight: bold;
63+
padding: 0.15em 0.6em;
64+
border-radius: 0.25em;
65+
font-size: 0.8em;
66+
margin-right: 0.5em;
67+
}
68+
69+
.announcement-link {
70+
color: #222;
71+
text-decoration: none;
72+
font-weight: 500;
73+
transition: color 0.2s;
74+
}
75+
76+
.announcement-link:hover {
77+
text-decoration: underline;
78+
color: #2563eb;
79+
}
80+
81+
.announcement-stars {
82+
margin-left: auto;
83+
width: 5.6rem;
84+
height: 1.25rem;
85+
background: url("https://img.shields.io/github/stars/onwidget/astrowind.svg?style=social&label=Stars&maxAge=86400")
86+
no-repeat center/contain;
87+
display: inline-block;
88+
}
89+
4490
/* Icône RSS dans la navbar */
4591
.nav-rss-icon {
4692
transform: scale(0.75); /* réduit visuellement l'icône à ~18x18 */
@@ -56,8 +102,6 @@ html {
56102
opacity: 1;
57103
}
58104

59-
60-
61105
body {
62106
margin: 0;
63107
padding: 0;
@@ -76,8 +120,8 @@ body {
76120
display: flex;
77121
flex-direction: row;
78122
align-items: center;
79-
gap: .75rem;
80-
margin-bottom: .75rem;
123+
gap: 0.75rem;
124+
margin-bottom: 0.75rem;
81125
}
82126

83127
.overview-list li:last-of-type {
@@ -87,7 +131,7 @@ body {
87131
a {
88132
color: var(--primary-light);
89133
text-decoration: none;
90-
transition: color .15s ease;
134+
transition: color 0.15s ease;
91135
}
92136

93137
a:hover {
@@ -167,11 +211,12 @@ main {
167211
border: 1px solid #353535;
168212
color: #ffffff;
169213
text-decoration: none;
170-
transition: background-color .15s ease, border .15s ease;
214+
transition: background-color 0.15s ease, border 0.15s ease;
171215
}
172216

173-
.post-container:hover, .post-container:focus-visible {
174-
background-color: rgba(var(--primary-rgb), .125);
217+
.post-container:hover,
218+
.post-container:focus-visible {
219+
background-color: rgba(var(--primary-rgb), 0.125);
175220
border: 1px solid var(--primary);
176221
color: white;
177222
text-decoration: none;
@@ -220,10 +265,11 @@ main {
220265

221266
.block-link {
222267
color: white;
223-
padding: .25rem .5rem;
268+
padding: 0.25rem 0.5rem;
224269
}
225270

226-
.block-link:hover, .block-link:focus-visible {
271+
.block-link:hover,
272+
.block-link:focus-visible {
227273
color: white;
228274
background-color: var(--primary);
229275
text-decoration: none;
@@ -237,7 +283,6 @@ main {
237283
}
238284

239285
@media screen and (max-width: 640px) {
240-
241286
main {
242287
padding: 0;
243288
gap: 1rem;
@@ -246,17 +291,17 @@ main {
246291

247292
.post-header {
248293
flex-direction: column;
249-
gap: .5rem;
294+
gap: 0.5rem;
250295
}
251296

252297
.post-info {
253298
flex-direction: column;
254-
gap: .5rem;
299+
gap: 0.5rem;
255300
}
256301
}
257302

258303
.content-container {
259304
display: flex;
260305
flex-direction: column;
261306
gap: 1rem;
262-
}
307+
}

0 commit comments

Comments
 (0)