72b9c1f footer: Split into fixed elements — radicle.xyz

rad:z371PVmDHdjJucejRoRYJcDEvD5pp

Radicle website including documentation and guides

footer: Split into fixed elements

Lorenz Leutgeb committed 7 days ago

commit 72b9c1fa7343cdf9474ec804c08f6517d5258cb1
parent 472940f

8 files changed +19 -14

added _includes/fixed.html

@@ -0,0 +1,4 @@

 <a href="/">
   <img id="logo" src="/assets/images/radicle.svg" width="32" height="32" />
 </a>
 <button class="toggle" id="toggle-theme"><!-- Set by script --></button>

deleted _includes/footer.html

@@ -1,7 +0,0 @@

 <footer>
   <a href="/">
     <img id="logo" src="/assets/images/radicle.svg" width="32" height="32" style="margin-top: 4px"/>
   </a>
   <span><small>© <span class="desktop">2018–{{ 'now' | date: "%Y" }}</span> The Radicle Team</small></span>
   <span><button class="toggle" id="toggle-theme"><!-- Set by script --></button></span>
 </footer>

modified _layouts/blog.html

@@ -31,7 +31,7 @@

       {{ content }}
     </main>
     <footer>
       <p>&copy; The Radicle Team</p>
       <span><small>© <span class="desktop">2018–{{ 'now' | date: "%Y" }}</span> The Radicle Team</small></span>
     </footer>
     <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
   </body>

modified _layouts/guide.html

@@ -25,7 +25,7 @@

       {{ content }}
     </main>
     <footer>
       <p>&copy; The Radicle Team</p>
       <span><small>© <span class="desktop">2018–{{ 'now' | date: "%Y" }}</span> The Radicle Team</small></span>
     </footer>
     <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
   </body>

modified _layouts/index.html

@@ -32,7 +32,7 @@

     </nav>
     {{ content }}
   </main>
   {% include footer.html %}
   {% include fixed.html %}
   <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
   <script>
     const copyButton = document.getElementById("install");

modified _layouts/page.html

@@ -9,7 +9,7 @@

   <main>
     {{ content }}
   </main>
   {% include footer.html %}
   {% include fixed.html %}
   <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
 </body>
 </html>

modified _layouts/post.html

@@ -22,7 +22,7 @@

       <p><strong>Contribute</strong> to Radicle as a 🌱 <a href="/guides/seeder">seeder</a>, 🧙 <a href="{{ 'rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5' | explore }}">developer</a> or by 🪞 <a href="/guides/user/#git-going-with-repositories">mirroring</a> your repositories on the Radicle network.</p>
       <p><strong>Join</strong> our community on 💬 <a href="https://radicle.zulipchat.com">Zulip</a> and discuss your ideas to improve Radicle.</p>
     </aside>
     {% include footer.html %}
     {% include fixed.html %}
     <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>
   </body>
 </html>

modified assets/css/page.css

@@ -274,7 +274,6 @@ body > header {

 body > footer {
   display: flex;
   color: var(--color-fg-dim);
   border-top: 1px solid var(--color-border-hint);
   padding: 0 0.5rem;
   white-space: nowrap;
   width: 100%;

@@ -322,11 +321,19 @@ nav .cta {

 }
 #logo {
   position: absolute;
   position: fixed;
   top: 0.5rem;
   left: 0.5rem;
   z-index: 99;
 }
 .toggle {
   position: fixed;
   bottom: 0.5rem;
   right: 0.5rem;
   z-index: 99;
 }
 #ribbon {
   position: absolute;
   float: right;

@@ -393,6 +400,7 @@ img.banner {

 @media (max-width: 800px) {
   body > main {
     padding: 1rem;
     padding-top: 2.5rem; /* Make space for #logo */
   }
   nav {
     display: block;