File tree Expand file tree Collapse file tree 4 files changed +84
-1
lines changed
src/components/activities Expand file tree Collapse file tree 4 files changed +84
-1
lines changed Original file line number Diff line number Diff line change 1- 2025.rustnl .org
1+ 2025.rustweek .org
Original file line number Diff line number Diff line change 1+ ---
2+
3+ interface Props {
4+ title: string ;
5+ day: string ;
6+ img: string ;
7+ }
8+
9+ const {
10+ title,
11+ day,
12+ img,
13+ }: Props = Astro .props ;
14+
15+ ---
16+
17+ <div class =" activity item red" >
18+ <div class =" header" >
19+ <h3 >{ title } </h3 >
20+ <span class =" day" >{ day } </span >
21+ </div >
22+
23+ <div class =" image" >
24+ <img src =`/images/activities/${img }` />
25+ </div >
26+ <p >
27+ <slot />
28+ </p >
29+ </div >
30+
31+ <style lang =" scss" >
32+ @use '../../styles/variables.scss';
33+
34+ .activity {
35+ border-radius: 0.25em;
36+ box-sizing: border-box;
37+
38+ .header {
39+ display: flex;
40+ direction: row;
41+ justify-content: space-between;
42+ align-items: center;
43+
44+ h3 {
45+ margin: 0;
46+ }
47+
48+ .day {
49+ font-size: variables.$font-size-sm;
50+ font-weight: 500;
51+ background: var(--color-two);
52+ color: white;
53+ padding: 0.5em 0.5em;
54+ top: 0;
55+ right: 0;
56+ border-radius: 0.5em;
57+ min-width: 9em;
58+
59+ display: flex;
60+ align-items: center;
61+ justify-content: center;
62+ }
63+ }
64+
65+ .image {
66+ margin-top: 1em;
67+ aspect-ratio: 16/9;
68+ height: auto;
69+ vertical-align: middle;
70+ width: 100%;
71+
72+ img {
73+ background: variables.$color-yellow-400;
74+ border-radius: 0.5em;
75+
76+ width: 100%;
77+ height: 100%;
78+
79+ object-fit: fill;
80+ }
81+ }
82+ }
83+ </style >
You can’t perform that action at this time.
0 commit comments