mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

about page table of contents sidebar

This commit is contained in:
f0x 2024-07-28 22:54:31 +02:00
parent e98b3e2021
commit a44cdf0782
3 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/assets/static-pages/about.html
View File

@ -36,23 +36,23 @@
<aside>home to <span class="count">4</span> users who wrote <span class="count">20</span> posts, federating with
<span class="count">2</span> other instances</aside>
</header>
<div class="page-content">
<main class="single-page">
<div class="page-content with-sidebar">
<nav class="sidebar" aria-labelledby="toc">
<h2 id="toc">Table of Contents</h2>
<div>
<ol>
<li><a href="#about">About GoToSocial Testrig Instance</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#languages">Languages</a></li>
<li><a href="#signup">Register an Account on GoToSocial Testrig Instance</li>
<li><a href="#signup">Register an Account</li>
<li><a href="#rules">Rules</a></li>
<li><a href="#terms">Terms and Conditions</a></li>
<li><a href="#moderated-servers">Moderated Servers</a></li>
</ol>
</div>
</nav>
<main class="single-page">
<section role="region" aria-labelledby="about">
<h2 id="about">About GoToSocial Testrig Instance</h2>
<div>

6
web/source/css/base/main.css
View File

@ -27,6 +27,12 @@ html, body {
scrollbar-color: $orange1 $gray3;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
line-height: 1.5em;
position: relative;

41
web/source/css/layout/page.css
View File

@ -81,6 +81,47 @@
.page-content {
grid-column: 2;
align-self: start;
&.with-sidebar {
grid-column: 1 / span 2;
display: grid;
grid-template-columns: 1fr minmax(auto, 50rem);
grid-template-columns: 1fr min(92%, 50rem);
.sidebar {
align-self: start;
position: sticky;
top: 0;
padding: 0 1.5rem;
h2 {
margin-top: 1.5rem;
}
}
}
}
@media screen and (max-width: 80rem) {
.page-content.with-sidebar {
grid-column: 2;
display: flex;
flex-direction: column;
background: $bg-accent;
box-shadow: $boxshadow;
border: $boxshadow-border;
border-radius: $br;
.sidebar {
position: static;
}
main.single-page {
background: initial;
box-shadow: initial;
border: initial;
border-radius: initial;
}
}
}
.page-footer {