Landing/About/guide polish + Proxify-style category filter bar #15
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue