Skip to content

better mobile and linking behaviour #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mptouzel merged 2 commits into from
Feb 1, 2026
Merged

better mobile and linking behaviour #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d9f65f
fix sizing on mobile
mptouzel Feb 1, 2026
a109bda
better link follow behaviour
mptouzel Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions stamina/css/plain-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,77 @@ border: 3px solid gray;
background-color: #F8F8F8;
font-size: 18pt;
}

.header-banner {
position: relative;
width: 100%;
max-width: 730px; /* matches Bootstrap col-sm-8 container width */
margin: 0 auto; /* centers it */
min-height: 300px;
background-image: url('../images/delphi.png');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}

.header-title {
color: white;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
padding: 40px 20px;
}

.header-title h1,
.header-title h4 {
text-align: center;
}

/* Tooltip styles */
.tooltip-container {
position: absolute;
bottom: 8px;
right: 8px;
}

.tooltip-trigger {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.7);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: bold;
}

.tooltip-box {
position: absolute;
bottom: 32px;
right: 0;
background: rgba(0, 0, 0, 0.85);
color: white;
padding: 10px 14px;
border-radius: 6px;
font-size: 13px;
width: 200px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px){
.header-banner {
min-height: 250px;
margin-left: 15px;
margin-right: 15px;
}
}
92 changes: 22 additions & 70 deletions stamina/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,72 +62,24 @@
<!-- ============================================================
HEADER / HERO IMAGE
============================================================ -->
<section id="header" class="some-section">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="listing" style="clear:both;">
<div style="width: 100%; margin: 0 auto;">
<div style="position: relative; display: inline-block; width: 100%;">

<!-- Background Image -->
<img src="images/delphi.png" alt="STAMINA header" style="width: 100%; display: block;" />

<!-- Overlay Title -->
<div style="position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
<h1 style="text-align:center"><b>STAMINA</b> <br> Working Group</h1>
<h4 style="text-align:center">
<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
</h4>
</div>
<div class="header-banner">
<!-- Overlay Title -->
<div class="header-title">
<h1><b>STAMINA</b> <br> Working Group</h1>
<h4>
<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
</h4>
</div>

<!-- Info Tooltip (bottom-right) -->
<div class="tooltip-container" style="position: absolute; bottom: 8px; right: 8px;">
<a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s"
style="width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.7);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: rgba(255,255,255,0.8);
font-size: 14px;
font-weight: bold;">?</a>
<div class="tooltip-box" style="position: absolute;
bottom: 32px;
right: 0;
background: rgba(0,0,0,0.85);
color: white;
padding: 10px 14px;
border-radius: 6px;
font-size: 13px;
width: 200px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
Learn about STAMINA in the About section below. Interested in the background image?
It's from the short film <a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s">Delphi</a>.
</div>
</div>
</div>
</div>
</div>
<!-- Info Tooltip (bottom-right) -->
<div class="tooltip-container">
<a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s" class="tooltip-trigger">?</a>
<div class="tooltip-box">
Learn about STAMINA in the About section below. Interested in the background image?
It's from the short film <a href="https://vimeo.com/244171658?fl=pl&fe=cm#t=20m15s">Delphi</a>.
</div>
</div>
</section>
</div>

<!-- ============================================================
MEETING INFO (edit placeholders below)
Expand All @@ -141,10 +93,10 @@ <h5 style="text-align:center">Follow us on Twitter <a href="[TWITTER_LINK]">@sta
<h5 style="text-align:center">Follow us on Bluesky <a href="[BLUESKY_LINK]">@stamina_rg.bsky.social</a></h5>
<h5 style="text-align:center">Join our Slack: <a href="[SLACK_INVITE]">here</a></h5>
-->
<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>
<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>
<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>
<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>
<!-- <h5 style="text-align:center">Register the event in your <a href="[GOOGLE_CALENDAR]">Google Calendar</a>.</h5> -->
<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>
<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>

</div>
</div>
Expand Down Expand Up @@ -182,7 +134,7 @@ <h3 style="text-align:center">About STAMINA</h3>
</p>

<p style="text-align:justify; font-size:16px; line-height:1.6;">
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.
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.
</p>
</div>
</div>
Expand Down Expand Up @@ -375,13 +327,13 @@ <h3 style="text-align:center">With Support From:</h3>
<div class="container">
<div class="row">
<div class="col-sm-3">
<a href="https://mila.quebec/"><img src="images/milalogowebcoulrgb.png" width="85%" alt="Mila" class="img-rounded"/></a>
<a href="https://mila.quebec/" target="_blank" rel="noopener noreferrer"><img src="images/milalogowebcoulrgb.png" width="85%" alt="Mila" class="img-rounded"/></a>
</div>
<div class="col-sm-3">
<a href="https://ivado.ca/"><img src="images/ivado-rgb_logo-full-degrade.png" width="85%" alt="ivado" class="img-rounded"/></a>
<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>
</div>
<div class="col-sm-3">
<a href="https://futureoflife.org/"><img src="images/fli_logo_white-300x204.png" width="55%" alt="fli" class="img-rounded"/></a>
<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>
</div>
</div>
</div>
Expand Down