diff --git a/.gitignore b/.gitignore index f945a558..9bcbcee9 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,7 @@ exampleSite/content/de /resources/ /exampleSite/resources/ /exampleSite/data/sprites/ +/public/ VERSION # hugo diff --git a/i18n/de.yaml b/i18n/de.yaml index fa888765..ccb5f1d1 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -54,3 +54,36 @@ pagination_page_state: "{{ .PageNumber }}/{{ .TotalPages }}" custom_product_of_cybertec: Ein Produkt von CYBERTEC custom_support_button: Support + +# Taxonomy Terms +taxonomy_terms_count: + one: "{{ . }} Begriff" + other: "{{ . }} Begriffe" +taxonomy_terms_view_all_pages: "Alle Seiten für {{ . }} anzeigen" +taxonomy_terms_no_description: Keine Beschreibung verfügbar +taxonomy_terms_page_count: + one: "{{ . }} Seite" + other: "{{ . }} Seiten" +taxonomy_terms_latest_prefix: 'Neueste:' +taxonomy_terms_empty_title: Keine Begriffe gefunden +taxonomy_terms_empty_description: "Derzeit sind keine {{ . }} verfügbar." + +# Taxonomy Links +taxonomy_links_browse_by_topic: "Dokumentation nach Thema durchsuchen:" +taxonomy_links_all_tags: Alle Tags +taxonomy_links_all_categories: Alle Kategorien +taxonomy_links_all_features: Alle Features + +# Taxonomy Meta +taxonomy_meta_tags: Tags +taxonomy_meta_categories: Kategorien +taxonomy_meta_features: Features +taxonomy_meta_view_tagged: "Alle Seiten mit Tag '{{ . }}' anzeigen" +taxonomy_meta_view_category: "Alle Seiten in Kategorie '{{ . }}' anzeigen" +taxonomy_meta_view_feature: "Alle Seiten für Feature '{{ . }}' anzeigen" + +# Accessibility & UI +skip_to_main_content: Zum Hauptinhalt springen + +# Shortcodes +shortcode_expand_default: Erweitern diff --git a/i18n/en.yaml b/i18n/en.yaml index 4db73349..f178e775 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -54,3 +54,36 @@ pagination_page_state: "{{ .PageNumber }}/{{ .TotalPages }}" custom_product_of_cybertec: A product of CYBERTEC custom_support_button: Support + +# Taxonomy Terms +taxonomy_terms_count: + one: "{{ . }} term" + other: "{{ . }} terms" +taxonomy_terms_view_all_pages: "View all pages for {{ . }}" +taxonomy_terms_no_description: No description available +taxonomy_terms_page_count: + one: "{{ . }} page" + other: "{{ . }} pages" +taxonomy_terms_latest_prefix: 'Latest:' +taxonomy_terms_empty_title: No terms found +taxonomy_terms_empty_description: "There are currently no {{ . }} available." + +# Taxonomy Links +taxonomy_links_browse_by_topic: "Browse Documentation by Topic:" +taxonomy_links_all_tags: All Tags +taxonomy_links_all_categories: All Categories +taxonomy_links_all_features: All Features + +# Taxonomy Meta +taxonomy_meta_tags: Tags +taxonomy_meta_categories: Categories +taxonomy_meta_features: Features +taxonomy_meta_view_tagged: "View all pages tagged with {{ . }}" +taxonomy_meta_view_category: "View all pages in category {{ . }}" +taxonomy_meta_view_feature: "View all pages for feature {{ . }}" + +# Accessibility & UI +skip_to_main_content: Skip to main content + +# Shortcodes +shortcode_expand_default: Expand diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b429b6f8..c253ec6a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -23,7 +23,7 @@
- Skip to main content + {{ i18n "skip_to_main_content" }}
{{ partial "svg-icon-symbols" . }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 51dd7cad..dfd1f7e5 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -9,6 +9,12 @@

{{ partial "utils/title" . }}

class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}" id="main-content" tabindex="-1" > + {{ partial "page-metadata" . }} + + {{- partial "taxonomy-meta" . -}} + {{ partial "utils/content" . }} + + {{- partial "taxonomy-links" . -}} {{ end }} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index 8f4de6fd..14aed698 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -15,12 +15,14 @@

{{ if .Truncated }} {{ i18n "posts_read_more" }} - gdoc_arrow_right_alt + {{ end }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 03926224..605d6f81 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -1,34 +1,103 @@ {{ define "main" }} -
- {{ range .Paginator.Pages.ByTitle }} -
-
-

- {{ partial "utils/title" . }} -

-
+
+ {{- /* Page Header Section */ -}} +
+

{{ partial "utils/title" . }}

+ {{- if .Description -}} +

{{ .Description }}

+ {{- end -}} + {{- if gt (len .Pages) 0 -}} +

+ {{- $total := len .Pages -}} + {{- i18n "taxonomy_terms_count" $total -}} +

+ {{- end -}} +
- -
- {{ end }} +
+ {{- if .Description -}} +

{{ .Description | truncate 120 }}

+ {{- else if $latest -}} +

{{ $latest.Summary | plainify | truncate 120 }}

+ {{- else -}} +

+ {{ i18n "taxonomy_terms_no_description" }} +

+ {{- end -}} +
+ +
+
+ + + + {{- i18n "taxonomy_terms_page_count" $pageCount -}} + + + + {{- if $latest -}} + + + + {{ i18n "taxonomy_terms_latest_prefix" }} + + {{- partial "utils/title" $latest | truncate 40 -}} + + + + {{- end -}} +
+
+ + + {{- end -}} +
+ + {{- /* Pagination */ -}} + {{- if gt .Paginator.TotalPages 1 -}} + {{- partial "pagination.html" . -}} + {{- end -}} + {{- else -}} + {{- /* Empty State */ -}} +
+ +

{{ i18n "taxonomy_terms_empty_title" }}

+

+ {{ i18n "taxonomy_terms_empty_description" .Data.Plural }} +

+
+ {{- end -}} - {{ partial "pagination.html" . }} {{ end }} diff --git a/layouts/partials/posts/metadata.html b/layouts/partials/posts/metadata.html index bf9d8452..3756100d 100644 --- a/layouts/partials/posts/metadata.html +++ b/layouts/partials/posts/metadata.html @@ -1,48 +1,81 @@ - - +{{- /* Date Display - Use Lastmod if available, fallback to Date */ -}} +{{- $displayDate := .Lastmod -}} +{{- if $displayDate.IsZero -}} + {{- $displayDate = .Date -}} +{{- end -}} + +{{- /* Check if page was updated after original publish date */ -}} +{{- $isUpdated := false -}} +{{- if and (not .Date.IsZero) (not .Lastmod.IsZero) -}} + {{- $isUpdated = .Lastmod.After (.Date.AddDate 0 0 1) -}} +{{- end -}} + +{{- /* Format datetime attribute - RFC3339/ISO8601 format for proper parsing */ -}} +{{- $datetimeISO := $displayDate.Format "RFC3339" -}} + +{{- /* Format human-readable date - use localized format if available */ -}} +{{- $dateFormat := "Jan 2, 2006" -}} +{{- $dateDisplay := $displayDate.Format $dateFormat -}} + +{{- if not $displayDate.IsZero -}} + + - +{{- end -}} - - +{{- /* Reading Time */ -}} +{{- if gt .ReadingTime 0 -}} + + {{ i18n "posts_read_time" .ReadingTime }} +{{- end -}} -{{ $tc := 0 }} -{{ with .Params.tags }} - {{ range sort . }} - {{ $name := . }} - {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }} - {{ if eq $tc 0 }} +{{- /* Tags Display */ -}} +{{- $tagCount := 0 -}} +{{- with .Params.tags -}} + {{- range sort . -}} + {{- $tagName := . -}} + {{- with $.Site.GetPage (printf "/tags/%s" ($tagName | urlize)) -}} + {{- if eq $tagCount 0 -}} - - {{ template "post-tag" dict "name" $name "page" . }} + + {{- template "post-tag" dict "name" $tagName "page" . -}} - {{ else }} + {{- else -}} - {{ template "post-tag" dict "name" $name "page" . }} + {{- template "post-tag" dict "name" $tagName "page" . -}} - {{ end }} - {{ end }} - {{ $tc = (add $tc 1) }} - {{ end }} -{{ end }} + {{- end -}} + {{- end -}} + {{- $tagCount = (add $tagCount 1) -}} + {{- end -}} +{{- end -}} -{{ define "post-tag" }} - - - {{ .name }} - - -{{ end }} +{{- /* Post Tag Template */ -}} +{{- define "post-tag" -}} + + + {{ .name }} + + +{{- end -}} diff --git a/layouts/partials/taxonomy-links.html b/layouts/partials/taxonomy-links.html new file mode 100644 index 00000000..f65d32e9 --- /dev/null +++ b/layouts/partials/taxonomy-links.html @@ -0,0 +1,28 @@ +{{- /* + Partial: taxonomy-links + Displays navigation links to taxonomy index pages + Usage: {{ partial "taxonomy-links.html" . }} +*/ -}} +{{- if or .Site.Taxonomies.tags .Site.Taxonomies.categories .Site.Taxonomies.features -}} +
+

{{ i18n "taxonomy_links_browse_by_topic" }}

+
+ {{- if .Site.Taxonomies.tags -}} + + {{ i18n "taxonomy_links_all_tags" }} + + {{- end -}} + {{- if .Site.Taxonomies.categories -}} + + {{ i18n "taxonomy_links_all_categories" }} + + {{- end -}} + {{- if .Site.Taxonomies.features -}} + + {{ i18n "taxonomy_links_all_features" }} + + {{- end -}} +
+
+{{- end -}} + diff --git a/layouts/partials/taxonomy-meta.html b/layouts/partials/taxonomy-meta.html new file mode 100644 index 00000000..7378e115 --- /dev/null +++ b/layouts/partials/taxonomy-meta.html @@ -0,0 +1,52 @@ +{{- $hasTaxonomy := or .Params.tags .Params.categories .Params.features -}} +{{- if $hasTaxonomy -}} +
+
+ {{- if .Params.tags -}} +
+ {{ i18n "taxonomy_meta_tags" }} +
+ {{- range .Params.tags -}} + + {{ . }} + + {{- end -}} +
+
+ {{- end -}} + + {{- if .Params.categories -}} +
+ {{ i18n "taxonomy_meta_categories" }} +
+ {{- range .Params.categories -}} + + {{ . }} + + {{- end -}} +
+
+ {{- end -}} + + {{- if .Params.features -}} +
+ {{ i18n "taxonomy_meta_features" }} +
+ {{- range .Params.features -}} + + {{ . }} + + {{- end -}} +
+
+ {{- end -}} +
+
+{{- end -}} + diff --git a/layouts/posts/list.html b/layouts/posts/list.html index c3ede06a..f9c77c76 100644 --- a/layouts/posts/list.html +++ b/layouts/posts/list.html @@ -13,12 +13,14 @@

{{ if .Truncated }} {{ i18n "posts_read_more" }} - gdoc_arrow_right_alt + {{ end }}
diff --git a/layouts/shortcodes/expand.html b/layouts/shortcodes/expand.html index 0ab3d2a3..db87cf9b 100644 --- a/layouts/shortcodes/expand.html +++ b/layouts/shortcodes/expand.html @@ -1,7 +1,7 @@ {{ $id := substr (sha1 .Inner) 0 8 }}
diff --git a/package-lock.json b/package-lock.json index 9d3a4846..7a869409 100644 --- a/package-lock.json +++ b/package-lock.json @@ -90,7 +90,6 @@ "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6.9.0" } @@ -152,7 +151,6 @@ "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", @@ -170,7 +168,6 @@ "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/compat-data": "^7.27.2", "@babel/helper-validator-option": "^7.27.1", @@ -188,7 +185,6 @@ "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6.9.0" } @@ -199,7 +195,6 @@ "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" @@ -214,7 +209,6 @@ "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", @@ -233,7 +227,6 @@ "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6.9.0" } @@ -254,7 +247,6 @@ "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6.9.0" } @@ -265,7 +257,6 @@ "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.4" @@ -280,7 +271,6 @@ "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/types": "^7.28.5" }, @@ -297,7 +287,6 @@ "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", @@ -313,7 +302,6 @@ "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -333,7 +321,6 @@ "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" @@ -1130,7 +1117,6 @@ "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" @@ -2174,6 +2160,7 @@ "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -2506,6 +2493,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2672,7 +2660,6 @@ "dev": true, "license": "ISC", "optional": true, - "peer": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -2688,7 +2675,6 @@ "dev": true, "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=8.6" }, @@ -2811,7 +2797,6 @@ "dev": true, "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=8" }, @@ -2880,6 +2865,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", @@ -3290,6 +3276,7 @@ "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -3639,8 +3626,7 @@ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/copy-webpack-plugin": { "version": "13.0.1", @@ -3869,6 +3855,7 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10" } @@ -4278,6 +4265,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -4715,6 +4703,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -4775,6 +4764,7 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -5200,6 +5190,7 @@ "integrity": "sha512-k/2rVBRIRzOeom3wI9jBPaSEvoTSQEW4iM0EveBmBBKFxO8mSyyRWtDlfC3VnEfu0avmjrMzy8/ZFPSe6F71Hw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "escape-html": "^1.0.3", "sharp": "^0.33.1", @@ -5493,7 +5484,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } @@ -5514,7 +5504,6 @@ "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=6.9.0" } @@ -5765,6 +5754,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -6081,7 +6071,6 @@ "dev": true, "license": "MIT", "optional": true, - "peer": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -6255,6 +6244,7 @@ "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "jiti": "lib/jiti-cli.mjs" } @@ -6285,7 +6275,6 @@ "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", "dev": true, "license": "MIT", - "peer": true, "bin": { "jsesc": "bin/jsesc" }, @@ -6327,7 +6316,6 @@ "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "json5": "lib/cli.js" }, @@ -6626,7 +6614,6 @@ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", "dev": true, "license": "ISC", - "peer": true, "dependencies": { "yallist": "^3.0.2" } @@ -7838,6 +7825,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -7984,6 +7972,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -8138,6 +8127,7 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -8621,6 +8611,7 @@ "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -8710,6 +8701,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -9557,32 +9549,6 @@ } } }, - "node_modules/svgtofont/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/svgtofont/node_modules/commander": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", @@ -9726,7 +9692,6 @@ "dev": true, "license": "ISC", "optional": true, - "peer": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -9774,7 +9739,6 @@ "dev": true, "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=8.6" }, @@ -9789,7 +9753,6 @@ "dev": true, "license": "MIT", "optional": true, - "peer": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -10417,6 +10380,7 @@ "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -10466,6 +10430,7 @@ "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.6.1", "@webpack-cli/configtest": "^3.0.1", @@ -10856,8 +10821,7 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true, - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/yaml": { "version": "2.8.1", diff --git a/src/static/custom.css b/src/static/custom.css index 42bdbbe3..466b7c92 100644 --- a/src/static/custom.css +++ b/src/static/custom.css @@ -4,9 +4,9 @@ --ci-color-secondary: #4ec1ec; --ci-color-tertiary: #3880ad; --ci-color-text: #40424a; - --ci-color-success: #006600; + --ci-color-success: #009688; + --ci-color-warning: #ffb300; --ci-color-error1: #cc3333; - --ci-color-error2: #f52222; --ci-lightest-of-blues: #eaf4ff; --ci-color-white: #ffffff; @@ -18,6 +18,32 @@ --custom-header-margin: 2rem; --custom-link-color: var(--ci-color-tertiary); --custom-paper-color: #ffffff; + + /* Taxonomy Design System - Using CI Colors */ + --taxonomy-tag-color: var(--ci-color-secondary); + --taxonomy-category-color: var(--ci-color-success); + --taxonomy-feature-color: var(--ci-color-warning); + + /* Taxonomy Spacing System */ + --taxonomy-spacing-xs: 0.25rem; + --taxonomy-spacing-sm: 0.5rem; + --taxonomy-spacing-md: 1rem; + --taxonomy-spacing-lg: 1.5rem; + --taxonomy-spacing-xl: 2rem; + + /* Taxonomy Border Radius */ + --taxonomy-radius-md: 3px; + --taxonomy-radius-full: 9999px; + + /* Taxonomy Transitions */ + --taxonomy-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); + --taxonomy-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + + /* Taxonomy Shadows */ + --taxonomy-shadow-xs: 0 1px 2px rgba(64, 66, 74, 0.1); + --taxonomy-shadow-sm: 0 2px 4px rgba(64, 66, 74, 0.12); + --taxonomy-shadow-md: 0 2px 20px -10px rgba(64, 66, 74, 0.2); + --taxonomy-shadow-lg: 0 4px 24px -12px rgba(64, 66, 74, 0.25); } /* Light mode (modify both object at the same time) */ @@ -31,6 +57,25 @@ --custom-paper-color: var(--ci-color-white); --footer-background: var(--ci-color-primary); --header-background: var(--ci-color-primary); + + /* Taxonomy Light Mode Colors */ + --taxonomy-bg-tag: rgba(78, 193, 236, 0.1); + --taxonomy-bg-category: rgba(0, 150, 136, 0.1); + --taxonomy-bg-feature: rgba(255, 179, 0, 0.1); + --taxonomy-bg-card: var(--custom-paper-color); + --taxonomy-text-primary: var(--body-font-color); + --taxonomy-text-secondary: #283340; + --taxonomy-text-muted: #6c757d; + --taxonomy-text-light: var(--ci-color-white); + --taxonomy-border-tag: rgba(78, 193, 236, 0.25); + --taxonomy-border-category: rgba(0, 150, 136, 0.25); + --taxonomy-border-feature: rgba(255, 179, 0, 0.25); + --taxonomy-border-light: rgba(64, 66, 74, 0.08); + --taxonomy-border-accent: var(--ci-color-secondary); + --taxonomy-border-card: var(--custom-paper-color); + --taxonomy-heading-primary: var(--custom-color-heading-color); + --taxonomy-link-color: var(--custom-link-color); + --taxonomy-meta-filter-brightness: 0.96; } @media (prefers-color-scheme: light) { @@ -44,7 +89,26 @@ --custom-paper-color: var(--ci-color-white); --footer-background: var(--ci-color-primary); --header-background: var(--ci-color-primary); - } + + /* Taxonomy Light Mode Colors */ + --taxonomy-bg-tag: rgba(78, 193, 236, 0.1); + --taxonomy-bg-category: rgba(0, 150, 136, 0.1); + --taxonomy-bg-feature: rgba(255, 179, 0, 0.1); + --taxonomy-bg-card: var(--custom-paper-color); + --taxonomy-text-primary: var(--body-font-color); + --taxonomy-text-secondary: #283340; + --taxonomy-text-muted: #6c757d; + --taxonomy-text-light: var(--ci-color-white); + --taxonomy-border-tag: rgba(78, 193, 236, 0.25); + --taxonomy-border-category: rgba(0, 150, 136, 0.25); + --taxonomy-border-feature: rgba(255, 179, 0, 0.25); + --taxonomy-border-light: rgba(64, 66, 74, 0.08); + --taxonomy-border-accent: var(--ci-color-secondary); + --taxonomy-border-card: var(--custom-paper-color); + --taxonomy-heading-primary: var(--custom-color-heading-color); + --taxonomy-link-color: var(--custom-link-color); + --taxonomy-meta-filter-brightness: 0.96; +} } @@ -56,6 +120,30 @@ --custom-color-heading-color: var(--ci-color-white); --custom-paper-color: #181a1b; --header-background: var(--ci-color-primary); + + /* Taxonomy Dark Mode Colors */ + --taxonomy-bg-tag: rgba(78, 193, 236, 0.15); + --taxonomy-bg-category: rgba(0, 150, 136, 0.15); + --taxonomy-bg-feature: rgba(255, 179, 0, 0.15); + --taxonomy-bg-card: var(--custom-paper-color); + --taxonomy-text-primary: #e0e0e0; + --taxonomy-text-secondary: #b0b0b0; + --taxonomy-text-muted: #888888; + --taxonomy-text-light: var(--ci-color-white); + --taxonomy-border-tag: rgba(78, 193, 236, 0.3); + --taxonomy-border-category: rgba(0, 150, 136, 0.3); + --taxonomy-border-feature: rgba(255, 179, 0, 0.3); + --taxonomy-border-light: rgba(255, 255, 255, 0.05); + --taxonomy-border-accent: var(--ci-color-secondary); + --taxonomy-border-card: rgba(255, 255, 255, 0.1); + --taxonomy-heading-primary: var(--custom-color-heading-color); + --taxonomy-link-color: var(--ci-color-secondary); + --taxonomy-meta-filter-brightness: 1.2; + --taxonomy-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); + --taxonomy-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); + --taxonomy-shadow-md: 0 2px 20px -10px rgba(0, 0, 0, 0.5); + --taxonomy-shadow-lg: 0 4px 24px -12px rgba(0, 0, 0, 0.6); + /* Fix the $$ highlighting */ .chroma .err { color: inherit; @@ -71,6 +159,30 @@ --custom-color-heading-color: var(--ci-color-white); --custom-paper-color: #181a1b; --header-background: var(--ci-color-primary); + + /* Taxonomy Dark Mode Colors */ + --taxonomy-bg-tag: rgba(78, 193, 236, 0.15); + --taxonomy-bg-category: rgba(0, 150, 136, 0.15); + --taxonomy-bg-feature: rgba(255, 179, 0, 0.15); + --taxonomy-bg-card: var(--custom-paper-color); + --taxonomy-text-primary: #e0e0e0; + --taxonomy-text-secondary: #b0b0b0; + --taxonomy-text-muted: #888888; + --taxonomy-text-light: var(--ci-color-white); + --taxonomy-border-tag: rgba(78, 193, 236, 0.3); + --taxonomy-border-category: rgba(0, 150, 136, 0.3); + --taxonomy-border-feature: rgba(255, 179, 0, 0.3); + --taxonomy-border-light: rgba(255, 255, 255, 0.05); + --taxonomy-border-accent: var(--ci-color-secondary); + --taxonomy-border-card: rgba(255, 255, 255, 0.1); + --taxonomy-heading-primary: var(--custom-color-heading-color); + --taxonomy-link-color: var(--ci-color-secondary); + --taxonomy-meta-filter-brightness: 1.2; + --taxonomy-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); + --taxonomy-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); + --taxonomy-shadow-md: 0 2px 20px -10px rgba(0, 0, 0, 0.5); + --taxonomy-shadow-lg: 0 4px 24px -12px rgba(0, 0, 0, 0.6); + /* Fix the $$ highlighting */ .chroma .err { color: inherit; @@ -291,6 +403,686 @@ h6 { color: #888; } +/* ============================================ + TAXONOMY DISPLAY SYSTEM + Professional UI/UX design with CI color integration + ============================================ */ + +/* Taxonomy Badges - Interactive, accessible, beautiful */ +.taxonomy-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--taxonomy-spacing-sm) 0.875rem; + border-radius: var(--taxonomy-radius-full); + font-size: 0.8125rem; + font-weight: 600; + line-height: 1.2; + text-decoration: none; + transition: var(--taxonomy-transition); + border: 1.5px solid; + position: relative; + overflow: hidden; + white-space: nowrap; + letter-spacing: 0.01em; + cursor: pointer; + user-select: none; + font-family: inherit; +} + +.taxonomy-badge::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; +} + +.taxonomy-badge:hover::before { + left: 100%; +} + +.taxonomy-badge:hover { + transform: translateY(-2px) scale(1.02); + box-shadow: var(--taxonomy-shadow-md); +} + +.taxonomy-badge:active { + transform: translateY(0) scale(0.98); +} + +.taxonomy-badge:focus { + outline: 2px solid var(--taxonomy-border-accent); + outline-offset: 2px; +} + +.taxonomy-badge-tag { + color: var(--taxonomy-tag-color); + background: var(--taxonomy-bg-tag); + border-color: var(--taxonomy-border-tag); + box-shadow: var(--taxonomy-shadow-xs); +} + +.taxonomy-badge-tag:hover { + background: var(--taxonomy-tag-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-tag-color); + box-shadow: 0 4px 12px rgba(78, 193, 236, 0.4); +} + +.taxonomy-badge-category { + color: var(--taxonomy-category-color); + background: var(--taxonomy-bg-category); + border-color: var(--taxonomy-border-category); + box-shadow: var(--taxonomy-shadow-xs); +} + +.taxonomy-badge-category:hover { + background: var(--taxonomy-category-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-category-color); + box-shadow: 0 4px 12px rgba(0, 150, 136, 0.4); +} + +.taxonomy-badge-feature { + color: var(--taxonomy-feature-color); + background: var(--taxonomy-bg-feature); + border-color: var(--taxonomy-border-feature); + box-shadow: var(--taxonomy-shadow-xs); +} + +.taxonomy-badge-feature:hover { + background: var(--taxonomy-feature-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-feature-color); + box-shadow: 0 4px 12px rgba(255, 179, 0, 0.4); +} + +/* Taxonomy Meta Container - Matches .gdoc-markdown styling */ +.geekdoc-taxonomy-meta { + margin: var(--taxonomy-spacing-xl) 0; + padding: 0.5rem 2rem 0.5rem 2rem; + background-color: color-mix(in srgb, var(--custom-paper-color) 95%, white 5%); + color: var(--body-font-color); + border-radius: var(--custom-border-radius); + border: 1px solid var(--custom-paper-color); + box-shadow: 0 2px 20px -5px rgba(64, 66, 74, 0.2); + position: relative; + overflow: hidden; + filter: brightness(var(--taxonomy-meta-filter-brightness)); +} + +.geekdoc-taxonomy-meta::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--taxonomy-border-accent); + z-index: 1; +} + +.geekdoc-taxonomy-meta > div { + display: flex; + flex-wrap: wrap; + gap: 1.25rem; + align-items: flex-start; + position: relative; + z-index: 2; +} + +.geekdoc-taxonomy-meta strong { + color: var(--taxonomy-heading-primary); + font-size: 0.875rem; + font-weight: 700; + letter-spacing: 0.02em; + text-transform: uppercase; + min-width: fit-content; + display: inline-block; + margin-right: var(--taxonomy-spacing-sm); +} + +.taxonomy-group { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; + flex: 1; + min-width: 200px; +} + +.taxonomy-badges { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; + align-items: center; +} + +/* Taxonomy Links Container */ +.taxonomy-links-container { + margin: var(--taxonomy-spacing-xl) 0; + padding: 0 2rem 0.5rem 2rem; + background-color: color-mix(in srgb, var(--custom-paper-color) 95%, white 5%); + color: var(--taxonomy-text-primary); + border-radius: var(--custom-border-radius); + border: 1px solid var(--custom-paper-color); + box-shadow: 0 2px 20px -5px rgba(64, 66, 74, 0.2); + position: relative; + overflow: hidden; + filter: brightness(var(--taxonomy-meta-filter-brightness)); +} + +.taxonomy-links-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--taxonomy-heading-primary); + z-index: 1; +} + +.taxonomy-links-container p { + color: var(--taxonomy-heading-primary); + font-size: 0.9375rem; + margin-bottom: var(--taxonomy-spacing-md); + font-weight: 700; + letter-spacing: 0.01em; + position: relative; + z-index: 2; +} + +.taxonomy-links { + display: flex; + flex-wrap: wrap; + gap: 0.875rem; + align-items: center; + position: relative; + z-index: 2; +} + +.taxonomy-link { + text-decoration: none; + padding: 0.625rem 1.25rem; + border-radius: var(--custom-border-radius); + font-size: 0.875rem; + font-weight: 600; + border: 1.5px solid; + transition: var(--taxonomy-transition); + display: inline-flex; + align-items: center; + gap: var(--taxonomy-spacing-sm); + position: relative; + overflow: hidden; + letter-spacing: 0.01em; + font-family: inherit; + color: inherit; +} + +.taxonomy-link::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); + transition: left 0.5s ease; +} + +:root[color-theme="dark"] .taxonomy-link::before { + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); +} + +@media (prefers-color-scheme: dark) { + .taxonomy-link::before { + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); + } +} + +.taxonomy-link:hover::before { + left: 100%; +} + +.taxonomy-link:hover { + transform: translateY(-2px); + box-shadow: 0 2px 20px -10px rgba(64, 66, 74, 0.2); +} + +.taxonomy-link:focus { + outline: 2px solid var(--taxonomy-border-accent); + outline-offset: 2px; +} + +.taxonomy-link-tags { + color: var(--taxonomy-tag-color); + background-color: var(--taxonomy-bg-tag); + border-color: var(--taxonomy-border-tag); + box-shadow: 0 1px 2px rgba(64, 66, 74, 0.1); +} + +.taxonomy-link-tags:hover { + background-color: var(--taxonomy-tag-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-tag-color); + box-shadow: 0 2px 20px -10px rgba(78, 193, 236, 0.3); +} + +.taxonomy-link-categories { + color: var(--taxonomy-category-color); + background-color: var(--taxonomy-bg-category); + border-color: var(--taxonomy-border-category); + box-shadow: 0 1px 2px rgba(64, 66, 74, 0.1); +} + +.taxonomy-link-categories:hover { + background-color: var(--taxonomy-category-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-category-color); + box-shadow: 0 2px 20px -10px rgba(0, 150, 136, 0.3); +} + +.taxonomy-link-features { + color: var(--taxonomy-feature-color); + background-color: var(--taxonomy-bg-feature); + border-color: var(--taxonomy-border-feature); + box-shadow: 0 1px 2px rgba(64, 66, 74, 0.1); +} + +.taxonomy-link-features:hover { + background-color: var(--taxonomy-feature-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-feature-color); + box-shadow: 0 2px 20px -10px rgba(255, 179, 0, 0.3); +} + +.taxonomy-link-readmore { + color: var(--taxonomy-tag-color); + background-color: var(--taxonomy-bg-tag); + border-color: var(--taxonomy-border-tag); + box-shadow: 0 1px 2px rgba(64, 66, 74, 0.1); +} + +.taxonomy-link-readmore:hover { + background-color: var(--taxonomy-tag-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-tag-color); + box-shadow: 0 2px 20px -10px rgba(78, 193, 236, 0.3); +} + +.taxonomy-link-readmore .gdoc-icon { + width: 18px; + height: 18px; + fill: currentColor; + transition: transform var(--taxonomy-transition-fast); +} + +.taxonomy-link-readmore:hover .gdoc-icon { + transform: translateX(2px); +} + +/* Read More Link Container */ +.gdoc-post__readmore { + margin-top: var(--taxonomy-spacing-md); + padding-top: var(--taxonomy-spacing-md); +} + +.gdoc-post__readmore .taxonomy-link-readmore { + margin-top: 0; +} + +/* Taxonomy Content Cards */ +.taxonomy-content-card { + padding: 1rem 2rem 1rem 2rem; + background-color: var(--taxonomy-bg-card); + color: var(--taxonomy-text-primary); + border-radius: var(--custom-border-radius); + border: 1px solid var(--custom-paper-color); + border-left: 4px solid var(--taxonomy-border-accent); + transition: var(--taxonomy-transition); + box-shadow: 0 2px 20px -10px rgba(64, 66, 74, 0.2); + position: relative; + overflow: hidden; + margin-bottom: var(--taxonomy-spacing-lg); +} + +.taxonomy-content-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--taxonomy-border-accent); + z-index: 1; +} + +.taxonomy-content-card:hover { + border-color: var(--taxonomy-border-accent); + box-shadow: 0 4px 24px -12px rgba(64, 66, 74, 0.3); +} + +.taxonomy-content-card h3 { + margin: 0 0 0.75rem 0; + line-height: 1.3; + position: relative; + z-index: 2; +} + +.taxonomy-content-card h3 a { + color: var(--taxonomy-heading-primary); + text-decoration: none; + font-size: 1.125rem; + font-weight: 700; + transition: var(--taxonomy-transition); + display: inline-block; + letter-spacing: -0.01em; +} + +.taxonomy-content-card h3 a:hover { + color: var(--taxonomy-link-color); + transform: translateX(2px); +} + +.taxonomy-content-card p { + color: var(--taxonomy-text-primary); + font-size: 0.9375rem; + margin: 0.75rem 0 0 0; + line-height: 1.6; + letter-spacing: 0.01em; + position: relative; + z-index: 2; +} + +.taxonomy-content-card .badges { + margin-top: var(--taxonomy-spacing-md); + display: flex; + gap: var(--taxonomy-spacing-sm); + flex-wrap: wrap; + align-items: center; + position: relative; + z-index: 2; +} + +.taxonomy-content-card .badge-small { + font-size: 0.75rem; + padding: 0.375rem 0.625rem; + border-radius: var(--taxonomy-radius-full); + font-weight: 600; + letter-spacing: 0.01em; + display: inline-block; +} + +.badge-small-tag { + color: var(--taxonomy-tag-color); + background: var(--taxonomy-bg-tag); + border: 1px solid var(--taxonomy-border-tag); +} + +.badge-small-category { + color: var(--taxonomy-category-color); + background: var(--taxonomy-bg-category); + border: 1px solid var(--taxonomy-border-category); +} + +/* Taxonomy Terms Grid */ +.taxonomy-terms-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.25rem; + margin-top: var(--taxonomy-spacing-xl); +} + +.taxonomy-term-card { + display: block; + padding: 1rem 2rem 1rem 2rem; + background-color: var(--taxonomy-bg-card); + color: var(--taxonomy-text-primary); + border-radius: var(--custom-border-radius); + border: 1px solid var(--custom-paper-color); + border-left: 4px solid var(--taxonomy-border-accent); + text-decoration: none; + transition: var(--taxonomy-transition); + box-shadow: 0 2px 20px -10px rgba(64, 66, 74, 0.2); + position: relative; + overflow: hidden; +} + +.taxonomy-term-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--taxonomy-border-accent); + z-index: 1; +} + +.taxonomy-term-card:hover { + border-color: var(--taxonomy-border-accent); + transform: translateY(-2px); + box-shadow: 0 4px 24px -12px rgba(64, 66, 74, 0.3); +} + +.taxonomy-term-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 0.75rem; + gap: var(--taxonomy-spacing-md); + position: relative; + z-index: 2; +} + +.taxonomy-term-card h3 { + margin: 0; + color: var(--taxonomy-heading-primary); + font-size: 1.0625rem; + font-weight: 700; + line-height: 1.3; + letter-spacing: -0.01em; + flex: 1; + position: relative; + z-index: 2; +} + +.taxonomy-term-card-count { + color: var(--taxonomy-tag-color); + font-size: 0.8125rem; + font-weight: 700; + background: var(--taxonomy-bg-tag); + padding: 0.375rem 0.75rem; + border-radius: var(--taxonomy-radius-full); + border: 1px solid var(--taxonomy-border-tag); + white-space: nowrap; + box-shadow: 0 1px 2px rgba(64, 66, 74, 0.1); + flex-shrink: 0; + position: relative; + z-index: 2; +} + +.taxonomy-term-card p { + margin: 0; + color: var(--taxonomy-text-muted); + font-size: 0.875rem; + line-height: 1.5; + letter-spacing: 0.01em; + position: relative; + z-index: 2; +} + +/* Taxonomy Section Dividers */ +.taxonomy-section-divider { + margin-top: 3rem; + padding-top: var(--taxonomy-spacing-xl); + border-top: 2px solid var(--taxonomy-border-light); + position: relative; +} + +.taxonomy-section-divider::before { + content: ""; + position: absolute; + top: -2px; + left: 0; + width: 60px; + height: 2px; + background: linear-gradient(90deg, var(--taxonomy-border-accent) 0%, transparent 100%); +} + +.taxonomy-section-divider h3 { + color: var(--taxonomy-heading-primary); + font-size: 1.125rem; + margin-bottom: 1.25rem; + font-weight: 700; + letter-spacing: -0.01em; +} + +/* Taxonomy Empty State */ +.taxonomy-empty-state { + padding: 3rem var(--taxonomy-spacing-xl); + text-align: center; + color: var(--taxonomy-text-primary); + background-color: var(--taxonomy-bg-card); + border-radius: var(--custom-border-radius); + border: 1px solid var(--custom-paper-color); + box-shadow: 0 2px 20px -10px rgba(64, 66, 74, 0.2); +} + +.taxonomy-empty-state p { + font-size: 1.125rem; + margin-bottom: var(--taxonomy-spacing-lg); + color: var(--taxonomy-text-secondary); + font-weight: 500; +} + +.taxonomy-empty-state a { + color: var(--taxonomy-link-color); + text-decoration: none; + font-weight: 600; + transition: var(--taxonomy-transition); + display: inline-block; + padding: var(--taxonomy-spacing-sm) var(--taxonomy-spacing-md); + border-radius: var(--taxonomy-radius-md); + border: 1.5px solid var(--taxonomy-border-tag); + background-color: var(--taxonomy-bg-tag); +} + +.taxonomy-empty-state a:hover { + background-color: var(--taxonomy-tag-color); + color: var(--taxonomy-text-light); + border-color: var(--taxonomy-tag-color); + transform: translateY(-2px); + box-shadow: var(--taxonomy-shadow-sm); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .taxonomy-terms-grid { + grid-template-columns: 1fr; + gap: var(--taxonomy-spacing-md); + } + + .geekdoc-taxonomy-meta, + .taxonomy-links-container, + .taxonomy-content-card, + .taxonomy-term-card { + padding: 2rem 1.25rem; + } + + .geekdoc-taxonomy-meta > div { + flex-direction: column; + gap: var(--taxonomy-spacing-md); + } + + .geekdoc-taxonomy-meta .taxonomy-group { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .geekdoc-taxonomy-meta strong { + margin-bottom: var(--taxonomy-spacing-sm); + } + + .taxonomy-links { + flex-direction: column; + gap: 0.75rem; + } + + .taxonomy-link { + width: 100%; + justify-content: center; + text-align: center; + } + + .taxonomy-term-card-header { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } +} + +@media (max-width: 480px) { + .taxonomy-badge { + font-size: 0.75rem; + padding: 0.4375rem 0.75rem; + } + + .geekdoc-taxonomy-meta, + .taxonomy-links-container, + .taxonomy-content-card, + .taxonomy-term-card { + padding: var(--taxonomy-spacing-md); + } +} + +/* Accessibility Enhancements */ +@media (prefers-reduced-motion: reduce) { + .taxonomy-badge, + .taxonomy-link, + .taxonomy-content-card, + .taxonomy-term-card { + transition: none; + } + + .taxonomy-badge:hover, + .taxonomy-link:hover, + .taxonomy-content-card:hover, + .taxonomy-term-card:hover { + transform: none; + } + + .taxonomy-badge::before, + .taxonomy-link::before { + display: none; + } +} + +@media (prefers-contrast: high) { + .taxonomy-badge, + .taxonomy-link { + border-width: 2px; + } + + .geekdoc-taxonomy-meta, + .taxonomy-content-card, + .taxonomy-term-card { + border-left-width: 5px; + } +} + +.taxonomy-badge:focus-visible, +.taxonomy-link:focus-visible { + outline: 3px solid var(--taxonomy-border-accent); + outline-offset: 3px; +} + /* Customize the footer */ .gdoc-footer { display: flex; @@ -340,3 +1132,366 @@ h6 { } } + +/* ============================================ + TAXONOMY TERM CARDS (Features/Tags/Categories) + Professional card-based layout for taxonomy term pages + Following UI/UX best practices: accessibility, visual hierarchy, interaction design + ============================================ */ + +.taxonomy-terms-page { + max-width: 100%; +} + +/* Page Header */ +.taxonomy-terms-header { + margin-bottom: var(--taxonomy-spacing-xl); + padding-bottom: var(--taxonomy-spacing-lg); + border-bottom: 2px solid rgba(64, 66, 74, 0.1); +} + +.taxonomy-terms-title { + font-size: 2rem; + font-weight: 700; + line-height: 1.2; + margin: 0 0 var(--taxonomy-spacing-md) 0; + color: var(--taxonomy-heading-primary); +} + +.taxonomy-terms-description { + font-size: 1.125rem; + line-height: 1.6; + color: var(--taxonomy-text-secondary); + margin: 0 0 var(--taxonomy-spacing-sm) 0; + max-width: 65ch; +} + +.taxonomy-terms-count { + font-size: 0.9375rem; + color: var(--taxonomy-text-secondary); + margin: 0; + font-weight: 500; +} + +/* Grid Layout */ +.taxonomy-terms-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); + gap: var(--taxonomy-spacing-lg); + margin: var(--taxonomy-spacing-xl) 0; +} + +/* Card Container */ +.taxonomy-term-card { + background: var(--taxonomy-bg-card); + border: 1.5px solid var(--taxonomy-border-card); + border-radius: var(--taxonomy-radius-md); + box-shadow: var(--taxonomy-shadow-sm); + display: flex; + flex-direction: column; + transition: var(--taxonomy-transition); + overflow: hidden; + position: relative; + height: 100%; + min-height: 200px; +} + +/* Accent Border Indicator */ +.taxonomy-term-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--taxonomy-border-accent); + opacity: 0; + transition: var(--taxonomy-transition); + z-index: 1; +} + +/* Card Hover States */ +.taxonomy-term-card:hover { + transform: translateY(-4px); + box-shadow: var(--taxonomy-shadow-lg); + border-color: var(--taxonomy-border-accent); +} + +.taxonomy-term-card:hover::before { + opacity: 1; +} + +/* Focus States for Accessibility */ +.taxonomy-term-card:focus-within { + outline: 2px solid var(--taxonomy-border-accent); + outline-offset: 2px; +} + +/* Entire Card is Clickable Link */ +.taxonomy-term-card__link { + display: flex; + flex-direction: column; + height: 100%; + text-decoration: none; + color: inherit; + transition: var(--taxonomy-transition-fast); +} + +.taxonomy-term-card__link:focus { + outline: none; +} + +.taxonomy-term-card__link:focus-visible { + outline: 2px solid var(--taxonomy-border-accent); + outline-offset: -2px; + border-radius: var(--taxonomy-radius-md); +} + +/* Card Header */ +.taxonomy-term-card__header { + padding: var(--taxonomy-spacing-md) var(--taxonomy-spacing-md) var(--taxonomy-spacing-sm); + border-bottom: 1px solid rgba(64, 66, 74, 0.08); + position: relative; + z-index: 2; +} + +.taxonomy-term-card__title { + margin: 0; + font-size: 1.375rem; + font-weight: 700; + line-height: 1.3; + color: var(--taxonomy-heading-primary); + transition: var(--taxonomy-transition-fast); +} + +.taxonomy-term-card:hover .taxonomy-term-card__title { + color: var(--taxonomy-border-accent); +} + +/* Card Body */ +.taxonomy-term-card__body { + padding: var(--taxonomy-spacing-md); + flex: 1; + display: flex; + align-items: flex-start; + position: relative; + z-index: 2; +} + +.taxonomy-term-card__description { + margin: 0; + color: var(--taxonomy-text-secondary); + font-size: 0.9375rem; + line-height: 1.6; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.taxonomy-term-card__description--empty { + color: var(--taxonomy-text-secondary); + font-style: italic; + opacity: 0.7; +} + +/* Card Footer */ +.taxonomy-term-card__footer { + padding: var(--taxonomy-spacing-md); + border-top: 1px solid rgba(64, 66, 74, 0.08); + background: linear-gradient(to bottom, rgba(64, 66, 74, 0.02), rgba(64, 66, 74, 0.04)); + position: relative; + z-index: 2; +} + +.taxonomy-term-card__meta { + display: flex; + flex-direction: column; + gap: var(--taxonomy-spacing-sm); + font-size: 0.875rem; +} + +.taxonomy-term-card__count, +.taxonomy-term-card__latest { + display: flex; + align-items: center; + gap: 0.625rem; + color: var(--taxonomy-text-secondary); + line-height: 1.4; +} + +.taxonomy-term-card__count .gdoc-icon, +.taxonomy-term-card__latest .gdoc-icon { + width: 18px; + height: 18px; + fill: var(--taxonomy-text-secondary); + flex-shrink: 0; + opacity: 0.8; +} + +.taxonomy-term-card__count-text { + display: inline-flex; + align-items: baseline; + gap: 0.25rem; + font-weight: 600; +} + +.taxonomy-term-card__count-label { + font-weight: 400; + opacity: 0.8; +} + +.taxonomy-term-card__latest-text { + display: flex; + align-items: center; + gap: 0.375rem; + flex-wrap: wrap; +} + +.taxonomy-term-card__latest-title { + font-weight: 500; + color: var(--taxonomy-text-primary); + transition: var(--taxonomy-transition-fast); +} + +.taxonomy-term-card:hover .taxonomy-term-card__latest-title { + color: var(--taxonomy-border-accent); +} + +/* Empty State */ +.taxonomy-terms-empty { + text-align: center; + padding: var(--taxonomy-spacing-xl) var(--taxonomy-spacing-md); + margin: var(--taxonomy-spacing-xl) 0; +} + +.taxonomy-terms-empty__icon { + width: 64px; + height: 64px; + fill: var(--taxonomy-text-secondary); + opacity: 0.4; + margin: 0 auto var(--taxonomy-spacing-md); + display: block; +} + +.taxonomy-terms-empty__title { + font-size: 1.5rem; + font-weight: 600; + color: var(--taxonomy-heading-primary); + margin: 0 0 var(--taxonomy-spacing-sm) 0; +} + +.taxonomy-terms-empty__description { + font-size: 1rem; + color: var(--taxonomy-text-secondary); + margin: 0; +} + +/* Responsive Design - Mobile First Approach */ +@media (max-width: 45rem) { + .taxonomy-terms-header { + margin-bottom: var(--taxonomy-spacing-lg); + padding-bottom: var(--taxonomy-spacing-md); + } + + .taxonomy-terms-title { + font-size: 1.75rem; + } + + .taxonomy-terms-description { + font-size: 1rem; + } + + .taxonomy-terms-grid { + grid-template-columns: 1fr; + gap: var(--taxonomy-spacing-md); + margin: var(--taxonomy-spacing-lg) 0; + } + + .taxonomy-term-card { + min-height: auto; + } + + .taxonomy-term-card__header { + padding: var(--taxonomy-spacing-sm) var(--taxonomy-spacing-sm) var(--taxonomy-spacing-xs); + } + + .taxonomy-term-card__title { + font-size: 1.25rem; + } + + .taxonomy-term-card__body { + padding: var(--taxonomy-spacing-sm); + } + + .taxonomy-term-card__footer { + padding: var(--taxonomy-spacing-sm); + } + + .taxonomy-term-card__meta { + gap: var(--taxonomy-spacing-xs); + } + + .taxonomy-term-card__count, + .taxonomy-term-card__latest { + font-size: 0.8125rem; + } +} + +/* Tablet Adjustments */ +@media (min-width: 45.01rem) and (max-width: 75rem) { + .taxonomy-terms-grid { + grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); + gap: var(--taxonomy-spacing-md); + } +} + +/* Large Screen Optimizations */ +@media (min-width: 120rem) { + .taxonomy-terms-grid { + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + } +} + +/* Dark mode support */ +:root[color-theme="dark"] .taxonomy-term-card { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); +} + +:root[color-theme="dark"] .taxonomy-term-card__header, +:root[color-theme="dark"] .taxonomy-term-card__footer { + border-color: rgba(255, 255, 255, 0.1); +} + +:root[color-theme="dark"] .taxonomy-term-card__footer { + background: rgba(255, 255, 255, 0.02); +} + +/* Dark mode: Slightly different background for taxonomy-links-container */ +:root[color-theme="dark"] .taxonomy-links-container { + background-color: color-mix(in srgb, var(--custom-paper-color) 95%, white 5%); +} + +@media (prefers-color-scheme: dark) { + .taxonomy-term-card { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); + } + + .taxonomy-term-card__header, + .taxonomy-term-card__footer { + border-color: rgba(255, 255, 255, 0.1); + } + + .taxonomy-term-card__footer { + background: rgba(255, 255, 255, 0.02); + } + + /* Dark mode: Slightly different background for taxonomy-links-container */ + .taxonomy-links-container { + background-color: color-mix(in srgb, var(--custom-paper-color) 95%, white 5%); + } +}