diff --git a/assets/css/glossary.css b/assets/css/glossary.css deleted file mode 100644 index 0588575cc8..0000000000 --- a/assets/css/glossary.css +++ /dev/null @@ -1,60 +0,0 @@ -.preview-text p { - display: inline; -} - -.permalink { - background-image: url(../images/link.png); - background-repeat: no-repeat; - display: inline-block; - vertical-align: middle; - font-size: 0; - color: transparent; - width: 17px; - height: 17px; - margin-left: 10px; -} - -.term-anchor { - display: block; - position: relative; - top: -90px; - visibility: hidden; -} - -.tag-option { - padding: 5px; - margin: 10px; - float:left; -} - -.canonical-tag { - color: white; - background-color: #b7c8e8; -} - -.canonical-tag a { - color: inherit; - text-decoration: none !important; -} - -.active-tag { - background-color: #326ce5; -} - -.invisible { - visibility: hidden; -} - -#tag-container { - float: left; - width: 100%; - border-top: 1px solid #8c8c8c; - border-bottom: 1px solid #8c8c8c; - padding: 7px 0px; - margin: 25px 0px; -} - -.tag-description { - text-align: center; - margin: 5px 0px; -} diff --git a/assets/js/glossary.js b/assets/js/glossary.js index 3b79560391..decd031932 100644 --- a/assets/js/glossary.js +++ b/assets/js/glossary.js @@ -149,16 +149,6 @@ $( document ).ready(function() { } }); }); - - // Shows permalink when term name is hovered over - $(".term-name").each(function() { - var permalink = $($(this).parent().find(".permalink")[0]); - $(this).mouseenter(function(){ - permalink.removeClass("hide"); - }).mouseleave(function(){ - permalink.addClass("hide"); - }); - }); }; function initActiveTags() { diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index aee302bd6d..0c8f57f4b6 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -626,6 +626,147 @@ 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(0.5em, 0.25em + 0.15vh )); + margin: 0; + margin-top: calc(min(1.0em, 0.25em + 0.15vh )); + } + 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; + background-image: url(../images/link.png); + background-repeat: no-repeat; + background-size: contain; + width: 1em; + height: 1em; + padding-left: 0.1em; + } + .term-name:hover { + color: $blue; + } + .term-name:not(:hover) > .permalink { + 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 index 03432dd727..d18d5209ff 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ partial "head.html" . }} - +
{{ partial "navbar.html" . }} {{ block "announcement" . }} diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index de45d440e4..01a9052fd9 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -7,7 +7,7 @@ {{ partial "head.html" . }} {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }} - +
{{ partial "navbar.html" . }} {{ partial "announcement.html" . }} diff --git a/layouts/case-studies/single-baseof.html b/layouts/case-studies/single-baseof.html index ec4745169e..fab187c63b 100644 --- a/layouts/case-studies/single-baseof.html +++ b/layouts/case-studies/single-baseof.html @@ -3,7 +3,7 @@ {{ partial "head.html" . }} - + {{ partial "navbar.html" . }} {{ partial "deprecation-warning.html" . }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 40c80fc21f..4398d0a2b4 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -4,7 +4,7 @@ {{ partial "head.html" . }} {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }} - +
{{ partial "navbar.html" . }} {{ partial "announcement.html" . }} diff --git a/layouts/docs/glossary.html b/layouts/docs/glossary.html index 1688201d25..147870bfa7 100644 --- 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" }}

{{ .Title }}

-{{- with resources.Get "css/glossary.css" -}} - -{{- end -}}

{{ T "layouts_docs_glossary_description" }}

-

{{ T "layouts_docs_glossary_filter" }}

+

{{ T "layouts_docs_glossary_filter" }}

{{ range (index site.Data "canonical-tags") }}
- {{ T (printf "layout_docs_glossary_%s_description" .id) }} + {{ T (printf "layout_docs_glossary_%s_description" .id) }}
{{ end }} {{ $sorted_tags := sort (index site.Data "canonical-tags") "id" }} @@ -26,12 +23,12 @@ {{ T "layouts_docs_glossary_select_all" }} {{ T "layouts_docs_glossary_deselect_all" }}
-

{{ T "layouts_docs_glossary_click_details_before" }} [+] {{ T "layouts_docs_glossary_click_details_after" }}

+

{{ T "layouts_docs_glossary_click_details_before" }} [+] {{ T "layouts_docs_glossary_click_details_after" }}

{{ partial "docs/glossary-terms.html" . }} {{ $glossary_items := $.Scratch.Get "glossary_items" }} {{ with $glossary_items }} {{ $glossary_terms := sort . "Title" "asc" }} -