themes/default/layouts/partials/profile-tabs: Anchor tabs

Add absolute scroll target offset if browser supports it

1 files changed, 25 insertions, 2 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 804966b..38585b1 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -537,6 +537,10 @@ diagram-container {
   display: block;
 }
 
+main {
+  min-height: 35rem;
+}
+
 summary::-webkit-details-marker {
   display: none;
 }
@@ -973,7 +977,8 @@ column-base[position="middle"] {
 }
 
 micro-card,
-micro-tags {
+micro-tags,
+nav + micro-header {
   display: block;
 }
 
@@ -1457,6 +1462,18 @@ tab-bar nav a:hover {
   text-decoration: underline;
 }
 
+tab-bar nav a span[data-scroll] {
+  position: absolute;
+  top: -4.75rem;
+  left: 200%;
+  width: 0;
+  height: 0;
+}
+
+tab-bar nav a:nth-child(-n + 3) span[data-scroll] {
+  left: -200%;
+}
+
 column-base[position="middle"] > nav:first-child {
   align-items: center;
   background-color: #fefefe;
@@ -1493,11 +1510,12 @@ column-base[position="middle"] > nav:first-child section {
 }
 
 column-base[position="middle"] > footer:last-child {
-  margin: 1rem 0.25rem;
+  margin: 1rem 0.25rem 3rem 0.25rem;
 }
 
 column-base[position="middle"] main > footer:last-child {
   margin: 2rem 0 1rem 0;
+  min-height: 100vh;
 }
 
 icon-button,
@@ -2487,6 +2505,11 @@ text-animation[vibrate] span {
 }
 
 main > * {
+  animation: paint ease-in 0.3s;
+}
+
+tab-bar,
+nav + micro-header {
   animation: paint ease-in 0.25s;
 }