Sticky menu in account settings

account/template.ftl

@@ -56,7 +56,7 @@
   </div>
   <main class="ps-main--page ps-page">
     <header class="ps-page--header ps-header">
-        <h1 class="ps-header--title">pub.solar ID</h1>
+        <a href="https://pub.solar/" class="ps-homelink">pub.solar/</a>
         <nav class="ps-header--nav" role="navigation">
             <ul class="ps-header--nav-list">
                 <#if realm.internationalizationEnabled>

common/resources/css/index.css

@@ -98,6 +98,31 @@ html {
   .ps-form-group .ps-button {
     align-self: flex-start; }
 
+.ps-homelink {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  pointer-events: all;
+  color: var(--foreground);
+  background: white;
+  text-decoration: none;
+  text-align: center;
+  font-weight: 900;
+  font-size: 24px;
+  padding: 8px;
+  line-height: 1em;
+  text-shadow: 0.15vw 0px 0px white;
+  transition: text-shadow 0.1s ease;
+  border: 12px solid black;
+  border-top: 0;
+  border-left: 0; }
+  .ps-homelink:hover {
+    text-shadow: 0.3vw 0px 0px var(--accent); }
+  @media screen and (min-width: 1200px) {
+    .ps-homelink {
+      font-size: 32px;
+      padding: 12px; } }
 .ps-main {
   display: flex;
   flex-direction: column;
@@ -121,6 +146,8 @@ html {
     z-index: 1; }
   .ps-main_full {
     padding: 0; }
+  .ps-main_full .ps-main--page {
+    overflow: hidden; }
 
 .ps-header {
   display: flex;
@@ -204,7 +231,8 @@ html {
       max-width: unset;
       width: calc(100% - 8rem);
       margin: 4rem;
-      min-height: calc(100vh - 8rem); }
+      height: calc(100vh - 8rem);
+      overflow: auto; }
     .ps-page--section a {
       color: var(--accent);
       border-bottom: 1px solid white;
@@ -253,16 +281,25 @@ html {
 .ps-section-nav {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap; }
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--background);
+  border-bottom: 2px solid var(--foreground); }
   .ps-section-nav--list {
     list-style: none;
     display: flex;
     position: sticky;
     margin: 0 -0.5rem; }
   .ps-section-nav--link {
-    margin: 0.5rem; }
+    display: flex; }
+    .ps-section-nav--link a {
+      padding: 1rem 0.5rem; }
     .ps-section-nav--link_active a {
-      color: var(--foreground); }
+      color: var(--foreground);
+      border-bottom: 4px solid var(--foreground); }
       .ps-section-nav--link_active a:hover {
         border-color: var(--foreground); }
 

common/resources/scss/index.scss

@@ -36,6 +36,7 @@ html {
 @import './input';
 @import './form-group';
 
+@import './homelink';
 @import './main';
 @import './header';
 @import './page';

common/resources/scss/main.scss

@@ -27,4 +27,8 @@
   &_full {
     padding: 0;
   }
+
+  &_full &--page {
+    overflow: hidden;
+  }
 }

common/resources/scss/page.scss

@@ -54,7 +54,8 @@
       max-width: unset;
       width: calc(100% - 8rem);
       margin: 4rem;
-      min-height: calc(100vh - 8rem);
+      height: calc(100vh - 8rem);
+      overflow: auto;
     }
 
     a {

common/resources/scss/section-nav.scss

@@ -2,6 +2,12 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--background);
+  border-bottom: 2px solid var(--foreground);
 
   &--list {
     list-style: none;
@@ -11,13 +17,20 @@
   }
 
   &--link {
-    margin: 0.5rem;
+    display: flex;
 
-    &_active a {
-      color: var(--foreground);
+    a {
+      padding: 1rem 0.5rem;
+    }
 
-      &:hover {
-        border-color: var(--foreground);
+    &_active {
+      a {
+        color: var(--foreground);
+        border-bottom: 4px solid var(--foreground);
+
+        &:hover {
+          border-color: var(--foreground);
+        }
       }
     }
   }