Restyle glossary page

Match the theme more closely, and use SCSS to define the styling.
kubernetes · Aug 14, 2024 · 0249aca · 0249aca
1 parent 5a283be
commit 0249aca
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 76 deletions.
diff --git a/assets/css/glossary.css b/assets/css/glossary.css
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -626,6 +626,141 @@ body.td-home #deprecation-warning {
     margin-right: auto;
 }
 
+body.glossary {
+  main {
+    ul.glossary-terms > li {
+      list-style-type: none;
+      padding: 0.5em;
+      padding-bottom: calc(min(1em, 0.25em + 0.25vh ));
+      margin: 0;
+      margin-top: calc(min(1.5em, 0.2em + 1vh ));
+    }
+    ul.glossary-terms > li.hide {
+      display: none;
+    }
+    ul.glossary-terms > li:has(.term-anchor:target) {
+      border-left: 0.3em solid $blue;
+      background: rgba(#999999, 0.2);
+    }
+    #tag-container {
+      float: left;
+      max-width: calc(max(80%, 100em));
+      border-top: 1px solid #999999;
+      border-bottom: 1px solid #999999;
+      padding-top: 0.5em 0;
+      margin: 2em 0;
+      > p {
+        display: inline-block;
+        padding-top: 0.2em;
+      }
+      .hide {
+        display: none;
+      }
+      .tag-option {
+        border-radius: 0.33em;
+        padding: 0.5em;
+        padding-left: 0.6em;
+        padding-right: 0.75em;
+        margin: 0.75em;
+        margin-top: 0.1em;
+        float: left;
+        font-weight: bold;
+        font-size: 0.925em;
+      }
+      .tag-option:not(.canonical-tag):hover {
+        outline: 1.5px solid $blue;
+      }
+      .tag-description {
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0.2em;
+        padding-bottom: 0.8em;
+        text-align: center;
+      }
+      .canonical-tag {
+        color: white;
+        background-color: #999999;
+      }
+      .canonical-tag a {
+        color: inherit;
+        background: transparent;
+        text-decoration: none !important;
+      }
+      .active-tag {
+        color: $white;
+        background-color: $blue;
+      }
+      // darken on hover
+      .canonical-tag:hover {
+        background: darken(#999999, 15%)
+      }
+      .canonical-tag.active-tag:hover {
+        background: darken($blue, 15%)
+      }
+    }
+    .term-anchor:target + .term-name > span {
+      color: $blue;
+    }
+    .term-anchor:target {
+      visibility: initial;
+    }
+    .glossary-term-name {
+      font-weight: bold;
+      display: inline-block;
+      padding-left: 0.25em;
+      padding-right: 0.25em;
+    }
+    .glossary-aka {
+      display: inline-block;
+      padding-left: 0.25em;
+      padding-right: 0.25em;
+      padding-bottom: 0.25em;
+    }
+    #glossary-details-before {
+       margin-top: 3em;
+       font-style: italic;
+       clear: both;
+    }
+    .preview-text {
+      display: inline-block;
+      margin-bottom: 0.2em;
+    }
+    .preview-text + * {
+      margin-top: 0.2em;
+    }
+    .term-definition {
+       margin-left: calc(min(2em, 0.5em + 0.75vw));
+       .hide {
+          display: none;
+       }
+    }
+    .glossary-aka {
+      font-style: italic;
+    }
+    .preview-text p {
+      display: inline;
+    }
+    .permalink {
+      display: inline-block;
+      width: 0.9em;
+      height: 0.9em;
+      padding-left: 0.1em;
+      &.hide {
+        visibility: hidden;
+      }
+    }
+    .term-anchor {
+      display: block;
+      position: relative;
+      top: -4rem; // adjust scrolling to target
+      visibility: hidden;
+    }
+    .invisible {
+      visibility: hidden;
+    }
+  }
+}
+
 #caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning, body.cid-community > #deprecation-warning {
     display: inline-block;
     vertical-align: top;

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
   <head{{- if hugo.IsProduction}} class="live-site"{{- end -}}>
     {{ partial "head.html" . }}
   </head>
-  <body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
+  <body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
     <header>
       {{ partial "navbar.html" . }}
       {{ block "announcement" . }}

diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -7,7 +7,7 @@
     {{ partial "head.html" . }}
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
   </head>
-  <body class="td-{{ .Kind }} td-blog">
+  <body class="td-{{ .Kind }} td-blog {{- with .Page.Params.body_class }} {{ . }}{{ end }}">
     <header>
       {{ partial "navbar.html" . }}
       {{ partial "announcement.html" . }}

diff --git a/layouts/case-studies/single-baseof.html b/layouts/case-studies/single-baseof.html
@@ -3,7 +3,7 @@
 	<head>
 		{{ partial "head.html" . }}
 	</head>
-	<body>
+        <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
 		{{ partial "navbar.html" . }}
 		{{ partial "deprecation-warning.html" . }}
 		<div data-pagefind-body>

diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -4,7 +4,7 @@
     {{ partial "head.html" . }}
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
   </head>
-  <body class="td-{{ .Kind }} td-documentation">
+  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
     <header>
       {{ partial "navbar.html" . }}
       {{ partial "announcement.html" . }}

diff --git a/layouts/docs/glossary.html b/layouts/docs/glossary.html
@@ -1,19 +1,16 @@
 {{ define "side-menu" }}
-{{ partial "docs/side-menu.html" . }}
+    {{ partial "docs/side-menu.html" . }}
 {{ end }}
 
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
-{{- with resources.Get "css/glossary.css" -}}
-<link href="{{ .RelPermalink }}" rel="stylesheet">
-{{- end -}}
 <p>{{ T "layouts_docs_glossary_description" }}</p>
 <div id="tag-container">
-	<p>{{ T "layouts_docs_glossary_filter" }}</p>
+	<p><em>{{ T "layouts_docs_glossary_filter" }}</em></p>
 	<div class="tag-description invisible" id="placeholder">.</div>
 	{{ range (index site.Data "canonical-tags") }}
 	<div class="tag-description hide" id="{{ printf "tag-%s-description" .id  }}">
-		<i>{{ T (printf "layout_docs_glossary_%s_description" .id) }}</i>
+		{{ T (printf "layout_docs_glossary_%s_description" .id) }}
 	</div>
 	{{ end }}
 	{{ $sorted_tags := sort (index site.Data "canonical-tags") "id" }}
@@ -26,12 +23,12 @@ <h1>{{ .Title }}</h1>
 	<span class="tag-option"><a id="select-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_select_all" }}</a></span>
 	<span class="tag-option"><a id="deselect-all-tags" href="javascript:void(0)">{{ T "layouts_docs_glossary_deselect_all" }}</a></span>
 </div>
-<p>{{ T "layouts_docs_glossary_click_details_before" }} <a href="javascript:void(0)" class="no-underline">[+]</a> {{ T "layouts_docs_glossary_click_details_after" }}</p>
+<p id="glossary-details-before">{{ T "layouts_docs_glossary_click_details_before" }} <a href="javascript:void(0)" class="no-underline">[+]</a> {{ T "layouts_docs_glossary_click_details_after" }}</p>
 {{ partial "docs/glossary-terms.html" . }}
 {{ $glossary_items := $.Scratch.Get "glossary_items" }}
 {{ with $glossary_items }}
 {{ $glossary_terms := sort . "Title" "asc" }}
-<ul>
+<ul class="glossary-terms">
 	{{ range $glossary_terms }}
 	{{ $.Scratch.Set "tag_classes" "" }}
 	{{ range .Params.tags }}
@@ -41,11 +38,15 @@ <h1>{{ .Title }}</h1>
 
 	<li class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
 		<div id="{{ $term_identifier }}" class="term-anchor"></div>
-		<div>
-			<div class="term-name" term="{{ .Title}}" data-pagefind-index-attrs="term"><b>{{ .Title }}</b><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">LINK</a></div>
+		<div class="term-name" data-pagefind-index-attrs="term"><span class="glossary-term-name">{{ .Title }}</span><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">
+		{{- with resources.Get "icons/link.svg" -}}
+		{{- .Content | safeHTML -}}
+		{{- end -}}
+		</a></div>
+		<div class="term-definition">
 			{{ with .Params.aka }}
-			{{ T "layouts_docs_glossary_aka" }}: <i>{{ delimit . ", " }}</i>
-			<br>
+                        {{ T "layouts_docs_glossary_aka" }}: <span class="glossary-aka">{{ delimit . ", " }}</span>
+			<br />
 			{{ end }}
 			<span class="preview-text">{{ .Summary }} <a href="javascript:void(0)" class="click-controller no-underline" data-target="{{ .Params.id }}">[+]</a></span>
 			<div id="{{ .Params.id }}" class="hide">