Skip to content

Commit af715a6

Browse files
mptouzelmptouzel
authored
Merge pull request #81 from ComplexData-MILA/new-reading-group
better mobile and linking behaviour
2 parents 0a9dedc + a109bda commit af715a6

File tree

2 files changed

+96
-70
lines changed

2 files changed

+96
-70
lines changed

‎stamina/css/plain-style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,77 @@ border: 3px solid gray;
1111
background-color: #F8F8F8;
1212
font-size: 18pt;
1313
}
14+
15+
.header-banner {
16+
position: relative;
17+
width: 100%;
18+
max-width: 730px; /* matches Bootstrap col-sm-8 container width */
19+
margin: 0 auto; /* centers it */
20+
min-height: 300px;
21+
background-image: url('../images/delphi.png');
22+
background-size: cover;
23+
background-position: center;
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
}
28+
29+
.header-title {
30+
color: white;
31+
font-weight: bold;
32+
text-align: center;
33+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
34+
padding: 40px 20px;
35+
}
36+
37+
.header-title h1,
38+
.header-title h4 {
39+
text-align: center;
40+
}
41+
42+
/* Tooltip styles */
43+
.tooltip-container {
44+
position: absolute;
45+
bottom: 8px;
46+
right: 8px;
47+
}
48+
49+
.tooltip-trigger {
50+
width: 24px;
51+
height: 24px;
52+
border-radius: 50%;
53+
border: 1.5px solid rgba(255, 255, 255, 0.7);
54+
background: transparent;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
text-decoration: none;
59+
color: rgba(255, 255, 255, 0.8);
60+
font-size: 14px;
61+
font-weight: bold;
62+
}
63+
64+
.tooltip-box {
65+
position: absolute;
66+
bottom: 32px;
67+
right: 0;
68+
background: rgba(0, 0, 0, 0.85);
69+
color: white;
70+
padding: 10px 14px;
71+
border-radius: 6px;
72+
font-size: 13px;
73+
width: 200px;
74+
opacity: 0;
75+
visibility: hidden;
76+
transition: opacity 0.2s, visibility 0.2s;
77+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
78+
}
79+
80+
/* Responsive adjustments */
81+
@media (max-width: 768px){
82+
.header-banner {
83+
min-height: 250px;
84+
margin-left: 15px;
85+
margin-right: 15px;
86+
}
87+
}

‎stamina/index.html‎

Lines changed: 22 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -62,72 +62,24 @@
6262
<!-- ============================================================
6363
HEADER / HERO IMAGE
6464
============================================================ -->
65-
<section id="header" class="some-section">
66-
<div class="container">
67-
<div class="row">
68-
<div class="col-sm-2"></div>
69-
<div class="col-sm-8">
70-
<div class="listing" style="clear:both;">
71-
<div style="width: 100%; margin: 0 auto;">
72-
<div style="position: relative; display: inline-block; width: 100%;">
73-
74-
<!-- Background Image -->
75-
<img src="images/delphi.png" alt="STAMINA header" style="width: 100%; display: block;" />
76-
77-
<!-- Overlay Title -->
78-
<div style="position: absolute;
79-
top: 50%;
80-
left: 50%;
81-
transform: translate(-50%, -50%);
82-
color: white;
83-
font-size: 24px;
84-
font-weight: bold;
85-
text-align: center;
86-
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
87-
<h1 style="text-align:center"><b>STAMINA</b> <br> Working Group</h1>
88-
<h4 style="text-align:center">
89-
<b>S</b>ocial <b>T</b>ech <b>A</b>nd <b>M</b>odell<b>I</b>ng <br> for k<b>N</b>owledge & <b>A</b>ction
90-
</h4>
91-
</div>
65+
<div class="header-banner">
66+
<!-- Overlay Title -->
67+
<div class="header-title">
68+
<h1><b>STAMINA</b> <br> Working Group</h1>
69+
<h4>
70+
<b>S</b>ocial <b>T</b>ech <b>A</b>nd <b>M</b>odell<b>I</b>ng <br> for k<b>N</b>owledge & <b>A</b>ction
71+
</h4>
72+
</div>
9273

93-
<!-- Info Tooltip (bottom-right) -->
94-
<div class="tooltip-container" style="position: absolute; bottom: 8px; right: 8px;">
95-
<a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s"
96-
style="width: 24px;
97-
height: 24px;
98-
border-radius: 50%;
99-
border: 1.5px solid rgba(255,255,255,0.7);
100-
background: transparent;
101-
display: flex;
102-
align-items: center;
103-
justify-content: center;
104-
text-decoration: none;
105-
color: rgba(255,255,255,0.8);
106-
font-size: 14px;
107-
font-weight: bold;">?</a>
108-
<div class="tooltip-box" style="position: absolute;
109-
bottom: 32px;
110-
right: 0;
111-
background: rgba(0,0,0,0.85);
112-
color: white;
113-
padding: 10px 14px;
114-
border-radius: 6px;
115-
font-size: 13px;
116-
width: 200px;
117-
opacity: 0;
118-
visibility: hidden;
119-
transition: opacity 0.2s, visibility 0.2s;
120-
box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
121-
Learn about STAMINA in the About section below. Interested in the background image?
122-
It's from the short film <a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s">Delphi</a>.
123-
</div>
124-
</div>
125-
</div>
126-
</div>
127-
</div>
74+
<!-- Info Tooltip (bottom-right) -->
75+
<div class="tooltip-container">
76+
<a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s" class="tooltip-trigger">?</a>
77+
<div class="tooltip-box">
78+
Learn about STAMINA in the About section below. Interested in the background image?
79+
It's from the short film <a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s">Delphi</a>.
12880
</div>
12981
</div>
130-
</section>
82+
</div>
13183

13284
<!-- ============================================================
13385
MEETING INFO (edit placeholders below)
@@ -141,10 +93,10 @@ <h5 style="text-align:center">Follow us on Twitter <a href="[TWITTER_LINK]">@sta
14193
<h5 style="text-align:center">Follow us on Bluesky <a href="[BLUESKY_LINK]">@stamina_rg.bsky.social</a></h5>
14294
<h5 style="text-align:center">Join our Slack: <a href="[SLACK_INVITE]">here</a></h5>
14395
-->
144-
<h5 style="text-align:center">Sign up to the mailing list to receive announcements about STAMINA activities: <a href="https://docs.google.com/forms/d/e/1FAIpQLSe2_x4mGANiUu0j6L9S5Wjk26Kk6q1vdQqsccaoM4Cfb-GMlg/viewform?usp=dialog"><img src="https://img.shields.io/badge/signup%20form-8A2BE2"></a></h5>
145-
<h5 style="text-align:center">Suggest a speaker (yourself or others) to give a talk in our seminar series: <a href="https://docs.google.com/forms/d/e/1FAIpQLScNYXPRqVu7WRfRRcpOP2LwrdhRxumckq7uIuZ7J3HO7EdNKQ/viewform?usp=publish-editor"><img src="https://img.shields.io/badge/suggest%20form-8A2BE2"></a></h5>
96+
<h5 style="text-align:center">Sign up to the mailing list to receive announcements about STAMINA activities: <a href="https://docs.google.com/forms/d/e/1FAIpQLSe2_x4mGANiUu0j6L9S5Wjk26Kk6q1vdQqsccaoM4Cfb-GMlg/viewform?usp=dialog" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/signup%20form-8A2BE2"></a></h5>
97+
<h5 style="text-align:center">Suggest a speaker (yourself or others) to give a talk in our seminar series: <a href="https://docs.google.com/forms/d/e/1FAIpQLScNYXPRqVu7WRfRRcpOP2LwrdhRxumckq7uIuZ7J3HO7EdNKQ/viewform?usp=publish-editor" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/suggest%20form-8A2BE2"></a></h5>
14698
<!-- <h5 style="text-align:center">Register the event in your <a href="[GOOGLE_CALENDAR]">Google Calendar</a>.</h5> -->
147-
<h5 style="text-align:center"> Visit our Youtube Channel for past event recordings: <a href="https://www.youtube.com/@ComplexDataLab/"><img src="https://img.shields.io/badge/Youtube-Recording-orange"></a> </h5>
99+
<h5 style="text-align:center"> Visit our Youtube Channel for past event recordings: <a href="https://www.youtube.com/@ComplexDataLab/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/Youtube-Recording-orange"></a> </h5>
148100

149101
</div>
150102
</div>
@@ -182,7 +134,7 @@ <h3 style="text-align:center">About STAMINA</h3>
182134
</p>
183135

184136
<p style="text-align:justify; font-size:16px; line-height:1.6;">
185-
This Working Group emerged from the <a href="https://sites.google.com/view/social-sims-with-llms">LLM-based Social Simulation Workshop</a> at <a href="https://colmweb.org/">COLM</a> in Montreal.
137+
This Working Group emerged from the <a href="https://sites.google.com/view/social-sims-with-llms" target="_blank" rel="noopener noreferrer">LLM-based Social Simulation Workshop</a> at <a href="https://colmweb.org/">COLM</a> in Montreal.
186138
</p>
187139
</div>
188140
</div>
@@ -375,13 +327,13 @@ <h3 style="text-align:center">With Support From:</h3>
375327
<div class="container">
376328
<div class="row">
377329
<div class="col-sm-3">
378-
<a href="https://mila.quebec/"><img src="images/milalogowebcoulrgb.png" width="85%" alt="Mila" class="img-rounded"/></a>
330+
<a href="https://mila.quebec/" target="_blank" rel="noopener noreferrer"><img src="images/milalogowebcoulrgb.png" width="85%" alt="Mila" class="img-rounded"/></a>
379331
</div>
380332
<div class="col-sm-3">
381-
<a href="https://ivado.ca/"><img src="images/ivado-rgb_logo-full-degrade.png" width="85%" alt="ivado" class="img-rounded"/></a>
333+
<a href="https://ivado.ca/" target="_blank" rel="noopener noreferrer"><img src="images/ivado-rgb_logo-full-degrade.png" width="85%" alt="ivado" class="img-rounded"/></a>
382334
</div>
383335
<div class="col-sm-3">
384-
<a href="https://futureoflife.org/"><img src="images/fli_logo_white-300x204.png" width="55%" alt="fli" class="img-rounded"/></a>
336+
<a href="https://futureoflife.org/" target="_blank" rel="noopener noreferrer"><img src="images/fli_logo_white-300x204.png" width="55%" alt="fli" class="img-rounded"/></a>
385337
</div>
386338
</div>
387339
</div>

0 commit comments

Comments
 (0)