Search by Tags

.github/settings.yml

@@ -35,6 +35,9 @@ collaborators:
 
   - username: iamNoah1
     permission: maintain  
+
+  - username: thetwopct
+    permission: push
 
   - username: thetwopct
     permission: push

assets/scss/_search.scss

@@ -8,7 +8,7 @@
 		padding-top: 0.5rem !important;
 		padding-left: 1.5rem;
 		padding-right: 1rem;
-		padding-bottom: 1rem;
+		padding-bottom: 5px;
 	}
 	@media (min-width: 1300px) {
 		padding-left: 2.5rem;
@@ -74,5 +74,29 @@
 				border-bottom: $black 2px solid;
 			}
 		}
+	}	
+}
+
+.search-by-tag {
+	position: relative;
+	width: 100%;
+	font-size: 12px;
+	text-align: right;
+	@media (max-width: 767px) {
+		display: none;
+	}
+	@media (min-width: 768px) {
+		width: calc(100% - 20px);
 	}
+	padding-left: calc(20px + 20px);
+	@media (min-width: 768px) {
+		padding-left: 30px;
+	}
+	@media (min-width: 992px) {
+		padding-left: 35px;
+	}
+	@media (min-width: 1100px) {
+		padding-left: calc(20px + 20px);
+	}
+
 }

assets/scss/_styles_project.scss

@@ -15,6 +15,7 @@
 @import 'footer';
 @import 'header';
 @import 'cookie-banner';
+@import 'tag-search';
 @import 'main';
 @import 'search';
 @import 'sidebar-left';

assets/scss/_tag-search.scss

@@ -0,0 +1,124 @@
+// Hide the sidebar on Taxonomy Search/Browse page.
+.td-taxonomy .td-sidebar-toc {
+    display: none !important;
+}
+
+// Adding padding to bottom of Taxonomy Browse page.
+.td-taxonomy .td-main main {
+    padding-bottom: 6rem;
+}
+
+// Tags container.
+.canonical-tag-container {
+    margin-top: 1.5625rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+    gap: 20px;
+    @media (min-width: 768px) {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 3rem;
+    }
+    @media (max-width: 767px) {
+        > span {
+            display: flex;
+            align-items: center;
+            align-content: center;
+            justify-content: center;
+        }
+    }
+}
+
+// Tag item. Default gray.
+.canonical-tag {
+    // button reset
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    // button sizing.
+    min-width: 96px;
+    // style to match _taxonomy/.tax-term
+    display: block;
+    background: #efefef;
+    color: black;
+    border-radius: 50px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-left: 18px;
+    padding-right: 18px;
+    font-weight: 600;
+    font-size: 10px;
+    line-height: 120%;
+    text-align: center;
+    letter-spacing: 0.02em;
+    // Turn pink when selected is-active.
+    &.is-active {
+        background-color: $link-color;
+        color: white;
+        @media (hover: hover) {
+            &:hover {
+                background-color: $link-color;
+                color: white;
+            }
+        }
+    }
+    @media (hover: hover) {
+        // Hover default state.
+        &:hover {
+            background-color: #d2d2d2;
+        }
+    }
+}
+
+// Reset buttons to look like text.
+.button-reset-to-text {
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    padding: 0;
+    cursor: pointer;
+    display: block;
+    margin-left: initial;
+    margin-right: initial;
+    width: unset;
+    // styling.
+    font-size: 10px;
+    line-height: 120%;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: black;
+    &:active {
+        color: inherit;
+    }
+    &:hover {
+        color: $link-color;
+    }
+}
+
+// Results
+#terms-by-tag {
+    margin-top: 1rem;
+    > div {
+        margin-top: 2.5rem;
+    }
+    h3 {
+        margin-top: 2.5rem;
+        margin-bottom: 1rem;
+        a {
+            color: black;
+            &:hover {
+                color: $link-color;
+            }
+        }
+    }
+}
+
+// Tag results.
+.invisible {
+    visibility: hidden;
+}
+
+.hide {
+    display: none;
+}

assets/scss/_taxonomy.scss

@@ -1,35 +1,39 @@
-// Container for Taxonomy items.
 .article-meta {
 	margin-bottom: 3rem;
 }
 
+.taxonomy-terms {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 13px;
+}
+
 .tax-term {
+	display: block;
+	color: $white;
 	background-color: $link-color;
 	border-radius: 50px;
-	font-weight: 500;
+	padding-top: 7px;
+	padding-bottom: 7px;
+	padding-left: 15px;
+	padding-right: 15px;
+	font-weight: 600;
 	font-size: 10px;
-	line-height: 140%;
+	line-height: 120%;
 	text-align: center;
 	letter-spacing: 0.02em;
-	color: $white;
-	padding: 5px 12px;
-	margin-right: 8px;
 	&:hover {
 		color: $white;
 		text-decoration: none;
 		background-color: $primary-300;
 	}
 }
 
-.taxonomy-terms {
-	list-style: none;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	flex-wrap: wrap;
-}
-
+// Used in Tax Terms Cloud
 .tax-terms {
 	list-style: none;
 	margin: 60px 0;
@@ -39,6 +43,7 @@
 	}
 }
 
+// Used in Tax Terms Cloud
 .taxonomy-count {
 	padding-left: 0;
 	margin-left: 0;

i18n/bn.toml

@@ -25,7 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
-
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/de.toml

@@ -25,7 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
-
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/en.toml

@@ -25,6 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/es.toml

@@ -25,7 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
-
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/hi.toml

@@ -25,6 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/it.toml

@@ -25,7 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
-
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/ko.toml

@@ -25,6 +25,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]

i18n/pt-br.toml

@@ -23,6 +23,16 @@ other = "See all tags"
 other = "Tag"
 [ui_tags]
 other = "Tags"
+[ui_search_by_tags]
+other = "Browse by Tags"
+[ui_tags_intro]
+other = "We've categorized the glossary terms. Use the filters to browse terms by tag."
+[ui_or_search_by_tags]
+other = "...or browse by tag"
+[ui_select_all]
+other = "Select All"
+[ui_deselect_all]
+other = "Deselect All"
 
 # Footer text
 [footer_all_rights_reserved]