themes/default/layouts/partials/profile-tabs: Avoid layout shift

7 files changed, 17 insertions, 10 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 6445123..2fe00c4 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1446,6 +1446,17 @@ tab-bar nav a[data-draft] {
   color: var(--danger);
 }
 
+tab-bar nav a:after {
+  content: attr(data-label);
+  display: block;
+  font-weight: 700;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
 tab-bar nav a:hover {
   text-decoration: underline;
 }
diff --git a/themes/default/layouts/_default/section.drafts.html b/themes/default/layouts/_default/section.drafts.html
index 5578676..0da61a3 100644
--- a/themes/default/layouts/_default/section.drafts.html
+++ b/themes/default/layouts/_default/section.drafts.html
@@ -7,7 +7,6 @@
   tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/drafts/"] {
     color: #111;
     color: var(--foreground);
-    display: inherit;
     font-weight: 700;
     text-decoration-color: #014cc6;
     text-decoration-color: var(--link);
diff --git a/themes/default/layouts/_default/section.feeds.html b/themes/default/layouts/_default/section.feeds.html
index f71d41c..2bebe2b 100644
--- a/themes/default/layouts/_default/section.feeds.html
+++ b/themes/default/layouts/_default/section.feeds.html
@@ -7,7 +7,6 @@
   tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/feeds/"] {
     color: #111;
     color: var(--foreground);
-    display: inherit;
     font-weight: 700;
     text-decoration-color: #014cc6;
     text-decoration-color: var(--link);
diff --git a/themes/default/layouts/_default/section.html b/themes/default/layouts/_default/section.html
index 6df8a4a..c926839 100644
--- a/themes/default/layouts/_default/section.html
+++ b/themes/default/layouts/_default/section.html
@@ -6,7 +6,6 @@
   tab-bar a[href="{{ strings.TrimRight "/" .CurrentSection.Permalink }}"] {
     color: #111;
     color: var(--foreground);
-    display: inherit;
     font-weight: 700;
     text-decoration-color: #014cc6;
     text-decoration-color: var(--link);
diff --git a/themes/default/layouts/_default/section.likes.html b/themes/default/layouts/_default/section.likes.html
index c65db5d..13320a2 100644
--- a/themes/default/layouts/_default/section.likes.html
+++ b/themes/default/layouts/_default/section.likes.html
@@ -7,7 +7,6 @@
   tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/likes/"] {
     color: #111;
     color: var(--foreground);
-    display: inherit;
     font-weight: 700;
     text-decoration-color: #014cc6;
     text-decoration-color: var(--link);
diff --git a/themes/default/layouts/_default/section.media.html b/themes/default/layouts/_default/section.media.html
index 274a6ab..475fc81 100644
--- a/themes/default/layouts/_default/section.media.html
+++ b/themes/default/layouts/_default/section.media.html
@@ -7,7 +7,6 @@
   tab-bar a[href="{{ .Site.BaseURL }}/{{ $author }}/media/"] {
     color: #111;
     color: var(--foreground);
-    display: inherit;
     font-weight: 700;
     text-decoration-color: #014cc6;
     text-decoration-color: var(--link);
diff --git a/themes/default/layouts/partials/profile-tabs.html b/themes/default/layouts/partials/profile-tabs.html
index e5c0385..e665855 100644
--- a/themes/default/layouts/partials/profile-tabs.html
+++ b/themes/default/layouts/partials/profile-tabs.html
@@ -1,13 +1,14 @@
 {{- $author := partial "function-authors-data.html" . -}}
+{{- $label := "" -}}
 
 <tab-bar>
   <nav>
-    <a href="{{ .Site.BaseURL }}/{{ $author.user }}">Messages</a>
-    <a href="{{ .Site.BaseURL }}/{{ $author.user }}/feeds/">Feeds</a>
-    <a href="{{ .Site.BaseURL }}/{{ $author.user }}/media/">Media</a>
-    <a href="{{ .Site.BaseURL }}/{{ $author.user }}/likes/">Likes</a>
+    <a data-label="{{ $label = "Messages" }}{{ $label }}" href="{{ .Site.BaseURL }}/{{ $author.user }}/">{{ $label }}</a>
+    <a data-label="{{ $label = "Feeds" }}{{ $label }}"    href="{{ .Site.BaseURL }}/{{ $author.user }}/feeds/">{{ $label }}</a>
+    <a data-label="{{ $label = "Media" }}{{ $label }}"    href="{{ .Site.BaseURL }}/{{ $author.user }}/media/">{{ $label }}</a>
+    <a data-label="{{ $label = "Likes" }}{{ $label }}"    href="{{ .Site.BaseURL }}/{{ $author.user }}/likes/">{{ $label }}</a>
     {{- if .Site.BuildDrafts }}
-    <a data-draft href="{{ .Site.BaseURL }}/{{ $author.user }}/drafts/">Drafts</a>
+    <a data-label="{{ $label = "Drafts" }}{{ $label }}"   href="{{ .Site.BaseURL }}/{{ $author.user }}/drafts/" data-draft="" >{{ $label }}</a>
     {{- end }}
   </nav>
 </tab-bar>