diff options
author | RichieEscarez <rescarez@google.com> | 2021-06-12 02:10:50 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-12 02:10:50 +0300 |
commit | 0fbaa0655c737ee3087c69843651ac40658f4b09 (patch) | |
tree | 8ac967807f10434ab011cdbad4e57c5499e35248 /assets | |
parent | 35ddb820c99801c0cfdb723f8e40428a80769ef7 (diff) | |
parent | 6e6061b5d583874f3bc66f37f6b114a42be735d5 (diff) |
Merge branch 'master' into foldable-sidebar
Diffstat (limited to 'assets')
-rw-r--r-- | assets/scss/_sidebar-toc.scss | 19 | ||||
-rw-r--r-- | assets/scss/_sidebar-tree.scss | 6 | ||||
-rw-r--r-- | assets/scss/_taxonomy.scss | 332 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 1 | ||||
-rw-r--r-- | assets/scss/main.scss | 1 |
5 files changed, 349 insertions, 10 deletions
diff --git a/assets/scss/_sidebar-toc.scss b/assets/scss/_sidebar-toc.scss index 96e7abb..a752729 100644 --- a/assets/scss/_sidebar-toc.scss +++ b/assets/scss/_sidebar-toc.scss @@ -1,7 +1,7 @@ // // Right side toc // -.td-toc { +.td-sidebar-toc { border-left: 1px solid $border-color; @supports (position: sticky) { @@ -16,6 +16,17 @@ padding-bottom: 1.5rem; vertical-align: top; +} + +.td-page-meta { + a { + display: block; + font-weight: $font-weight-medium; + } +} + +.td-toc { + a { display: block; font-weight: $font-weight-light; @@ -31,12 +42,6 @@ margin-left: 0.5rem; } - .td-page-meta { - a { - font-weight: $font-weight-medium; - } - } - #TableOfContents { // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries. > ul > li > ul > li > a {} diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss index d76b79f..a459b94 100644 --- a/assets/scss/_sidebar-tree.scss +++ b/assets/scss/_sidebar-tree.scss @@ -99,8 +99,8 @@ .td-sidebar-link.tree-root{ font-weight: $font-weight-bold; - color: $primary; - border-bottom: 1px $primary solid; + color: $td-sidebar-tree-root-color; + border-bottom: 1px $td-sidebar-tree-root-color solid; margin-bottom: 1rem; } } @@ -159,4 +159,4 @@ #content-desktop {display: none;} #content-mobile {display: block;} } -}
\ No newline at end of file +} diff --git a/assets/scss/_taxonomy.scss b/assets/scss/_taxonomy.scss new file mode 100644 index 0000000..5380140 --- /dev/null +++ b/assets/scss/_taxonomy.scss @@ -0,0 +1,332 @@ +// Taxonomies - e.g. Tags, Categories, ... + +.taxonomy-terms-article { + width: 100%; + clear: both; + font-size: 0.8rem; + + .taxonomy-title { + display: inline; + font-size: 1.25em; + height: 1em; + line-height: 1em; + margin-right: 0.5em; + padding: 0; + } +} + +.taxonomy-terms-cloud { + width: 100%; + clear: both; + font-size: 0.8rem; + + .taxonomy-title { + display: inline-block; + width: 100%; + font-size: 1rem; + font-weight: 700; + color: $primary; + border-bottom: 1px $primary solid; + margin-bottom: 1em; + padding-bottom: 0.375rem; + margin-top: 1em; + } +} + +.taxonomy-terms-page { + max-width: 800px; + margin: auto; + + h1 { + margin-bottom: 1em; + } + + .taxonomy-terms-cloud { + font-size: 1em; + + li { + display: block; + } + } + + .taxo-text-tags { + + li + li::before { + content: none; + } + } + + .taxo-fruits { + + .taxonomy-count, + .taxonomy-label { + display: inherit; + font-size: 1rem; + margin: 0; + padding: 0; + padding-right: 0.5em; + } + + .taxonomy-count::before { + content: "("; + } + .taxonomy-count::after { + content: ")"; + } + } +} + +.taxonomy-terms { + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; + display: inline; + + li { + // https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td + display: inline; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; + } +} + +.taxonomy-count { + font-size: 0.8em; + line-height: 1.25em; + display: inline-block; + padding-left: 0.6em; + padding-right: 0.6em; + margin-left: 0.6em; + text-align: center; + border-radius: 1em; + background-color: $white; +} + +.taxonomy-term { + background: $gray-200; + border-width: 0; + border-radius: 0 3px 3px 0; + color: $gray-600; + display: inline-block; + font-size: 1em; + line-height: 1.5em; + min-height: 1.5em; + max-width: 100%; + padding: 0 0.5em 0 1em; + position: relative; + margin: 0 0.5em 0.2em 0; + text-decoration: none; + -webkit-transition: color 0.2s; + -webkit-clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0); + clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0); + + &:hover { + background-color: $primary; + color: $white; + + .taxonomy-count{ + color: $dark!important; + } + } + + &:hover::before { + background: $primary; + } +} + +// Example for simple tags layout +.taxo-text-tags { + + .taxonomy-term { + background: none; + border-width: 0; + border-radius: 0; + color: $gray-600; + font-size: 1em; + line-height: 1.5em; + min-height: 1.5em; + max-width: 100%; + padding: 0; + position: relative; + margin: 0; + text-decoration: none; + -webkit-clip-path: none; + clip-path: none; + + &:hover { + background: none; + color: $link-color; + + .taxonomy-count{ + color: $dark!important; + } + } + + &:hover::before { + background: none; + } + } + + li + li::before { + content: "|"; + color: $gray-600; + margin-right: 0.2em; + } + + .taxonomy-count { + font-size: 1em; + line-height: 1.25em; + display: inline-block; + padding: 0; + margin: 0; + text-align: center; + border-radius: 0; + background: none; + vertical-align: super; + font-size: 0.75em; + } + + .taxonomy-term:hover .taxonomy-count { + color: $link-color !important; + } +} + +// Example for icon tags +.taxo-fruits { + + .taxonomy-term[data-taxonomy-term]::before { + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + // font-weight: 900; + padding-right: 0.5em; + font-size: 2em; + min-width: 1.5em; + display: inline-block; + } + + .taxonomy-term[data-taxonomy-term="apple"]::before { + content: "\f5d1"; + color: red; + } + + .taxonomy-term[data-taxonomy-term="carrot"]::before { + content: "\f787"; + color: orange; + } + + .taxonomy-term[data-taxonomy-term="lemon"]::before { + content: "\f094"; + color: limegreen; + } + + .taxonomy-term[data-taxonomy-term="pepper"]::before { + content: "\f816"; + color: darkred; + } + + .taxonomy-term { + background: none; + border-width: 0; + border-radius: 0; + color: $gray-600; + font-size: 1em; + line-height: 2.5em; + max-width: 100%; + padding: 0; + position: relative; + margin: 0; + text-decoration: none; + -webkit-clip-path: none; + clip-path: none; + + &:hover { + background: none; + color: $link-color; + + .taxonomy-count{ + color: $dark!important; + } + } + + &:hover::before { + background: none; + text-shadow: 0 0 3px $gray-900; + } + } + + .taxonomy-count, + .taxonomy-label { + display: none; + } + + &.taxonomy-terms-article { + margin-bottom: 1rem; + + .taxonomy-title { + display: none; + } + } +} + +.taxonomy-taxonomy-page { + max-width: 800px; + margin: auto; + + h1 { + margin-bottom: 1em; + } +} + +.article-meta { + margin-bottom: 1.5rem; +} + +.article-teaser.article-type-docs h3 a:before { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + content: "\f02d"; + padding-right: 0.5em; +} + +.article-teaser.article-type-blog h3 a:before { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + content: "\f781"; + padding-right: 0.5em; +} + +.all-taxonomy-terms { + font-weight: 500; + line-height: 1.2; + font-size: 1.5rem; + + &:before { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Free"; + content: "\f122"; + padding-right: 0.5em; + } +}
\ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 9a55b53..224419d 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -46,6 +46,7 @@ $code-color: darken($secondary, 20%) !default; // UI element colors $border-color: $gray-300 !default; +$td-sidebar-tree-root-color: $primary !default; $td-sidebar-bg-color: rgba($primary, 0.03) !default; $td-sidebar-border-color: $border-color !default; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 1992c27..cca86aa 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -26,6 +26,7 @@ @import "blocks/blocks"; @import "section-index"; @import "pageinfo"; +@import "taxonomy"; @if $td-enable-google-fonts { @import url($web-font-path); |