Landing/About/guide polish + Proxify-style category filter bar #15

Merged
popovskik merged 25 commits from kristijan-dev into develop 2026-08-05 20:31:40 +00:00
5 changed files with 48 additions and 0 deletions
Showing only changes of commit 7c52f30e3b - Show all commits

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; }
}

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">

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">

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">

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">