mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project pages: move membership CTA into the ToC sidebar (Proxify-style) 

Add a compact "Like what we do?" CTA box directly below the table of contents
in the left sidebar. The ToC already scrolls internally when long, so the box
stays pinned in the same visual field. The full-width bottom CTA is hidden on
desktop where a sidebar CTA exists (via :has()) and remains the mobile fallback.

Applied to the 4 project pages that have a ToC sidebar; the others (all MK/SI +
3 EN) have no sidebar and keep the bottom CTA.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-08-05 17:55:27 +02:00
parent d75dbc1edd
commit 7c52f30e3b
5 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/pages/_article.css
View File

@ -746,3 +746,31 @@
.article-page--prose .article-layout-container { display: block; }
.article-page--prose .article-container { max-width: 760px; margin: 0 auto; }
.article-page--prose .mobile-article-header { display: none; }
/* ---- Sidebar CTA: sits under the table of contents (Proxify-style) ---- */
.sidebar-cta {
flex-shrink: 0;
margin-top: 18px;
background: linear-gradient(160deg, #21596E 0%, #143240 100%);
border-radius: 16px;
padding: 20px 18px;
text-align: center;
color: #FFFFFF;
}
.sidebar-cta-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 14px; }
.sidebar-cta-btn {
display: block; background: #FA7850; color: #FFFFFF; font-weight: 600; font-size: 14px;
padding: 11px 14px; border-radius: 10px; text-decoration: none;
transition: background 0.18s ease;
}
.sidebar-cta-btn:hover { background: #E8613B; }
.sidebar-cta-note { font-size: 12px; line-height: 17px; color: rgba(255,255,255,0.78); margin: 12px 0 0; }
.sidebar-cta-note a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
/* Where a page has the sidebar CTA (i.e. it has a ToC), the desktop bottom CTA is
redundant, so hide it above the mobile breakpoint. Pages without a ToC sidebar
keep the bottom CTA on every screen. On mobile the sidebar is hidden, so the
bottom CTA always shows. */
@media (min-width: 769px) {
.article-page:has(.sidebar-cta) .article-support-cta { display: none; }
}

5
en/projects/macedonian-student-night-in-ljubljana/index.html
View File

@ -219,6 +219,11 @@
<li><a href="#a-beginning">A Beginning to Remember</a></li>
</ul>
</nav>
<div class="sidebar-cta">
<p class="sidebar-cta-title">Like what we do?</p>
<a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
<p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
</div>
</aside>
<article class="article-container">

5
en/projects/meet-student-slovenia-2023/index.html
View File

@ -222,6 +222,11 @@
<li><a href="#see-you">See you in Slovenia!</a></li>
</ul>
</nav>
<div class="sidebar-cta">
<p class="sidebar-cta-title">Like what we do?</p>
<a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
<p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
</div>
</aside>
<article class="article-container">

5
en/projects/meet-student-slovenia-2024/index.html
View File

@ -221,6 +221,11 @@
<li><a href="#see-you">See you in Slovenia!</a></li>
</ul>
</nav>
<div class="sidebar-cta">
<p class="sidebar-cta-title">Like what we do?</p>
<a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
<p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
</div>
</aside>
<article class="article-container">

5
en/projects/morning-coffee-in-front-of-ctk/index.html
View File

@ -219,6 +219,11 @@
<li><a href="#coffee-and-burek">Coffee and Burek as motivation</a></li>
</ul>
</nav>
<div class="sidebar-cta">
<p class="sidebar-cta-title">Like what we do?</p>
<a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
<p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
</div>
</aside>
<article class="article-container">