plugin-category-cloud (a README Experience)

+++
title = "Cloud"
description = "A category cloud weighted by posts per category."
type = "cloud"

[menu.main]
name = 'Cloud'
title = 'Cloud'
identifier = 'cloud'
url = '/cloud/'
weight = 110
+++
{{< plugin-category-cloud >}}

+++
title = "Cloud"
description = "A category cloud weighted by posts per category."
type = "cloud"
+++
{{< plugin-category-cloud >}}

{{ if templates.Exists "partials/plugin-category-cloud/category-cloud.html" }}
{{ partial "plugin-category-cloud/category-cloud.html" . }}
{{ end }}

# Debug and build related parameters.
#####################################

# Theme version, printed to HTML comment when the plugin loads.
#
Version = '6.0.9'

# Whether to print HTML comments for debugging purposes.
#
DebugPrint = false

# Whether to provide subresource integrity by generating a 
# base64-encoded cryptographic hash and attaching a .Data.Integrity
# property containing an integrity string, which is made up of the
# name of the hash function, one hyphen and the base64-encoded hash sum.
#
Fingerprint = true

# Output style for /assets/sass/category-cloud.scss. 
# Valid options are nested, expanded, compact and compressed
#
SassOutput = 'compact'

# The relative paths of pages that should link to the stylesheet.
# The stylesheet  is always linked for the page generated at /cloud/. 
# If you want to remove the generated page from the menu and/or insert 
# the cloud elsewhere you can enter the relative page path(s) here to
# ensure the stylesheet is linked for pages wherein you've inserted 
# an invocation of the partial
# (i.e. {{ partial "plugin-category-cloud/category-cloud.html" . }}).
# 
# For example, the relative path of the home page would be '/'. The
# relative path for a page like https://my.blog/archive/ would be '/archive/'.
# The relative path for a page like https://my.blog/some/random/page.html would
# be '/some/random/page.html'
#
PagePaths = []

# Configuring the way the cloud displays category names.
########################################################

# Category names are fetched in their anchorized form.
# Setting this parameter to true will convert anchorized
# forms into capitalized and spaced forms.
#
#   my-category → My Category
#
Humanize = true

# The default path to a category page takes the form:
#  /categories/my-anchorized-category
# 
# If the category has been lifted into the main menu,
# and its path has been altered (perhaps by dropping /categories)
# the plugin can try to match a category to its menu item and
# use the URL value of the menu item.
#
MenuItemMatching = true

# List of categories to exclude from the category cloud.
#
# For example: ['Pinned', 'Temporary']
#
ExclusionList = [ ]

# The plugin fetches the category names in anchorized form.
# The 'Humanize' parameter will return the category names
# to their capitalized and spaced form. The DisplayNames
# parameter allows for direct control over how a category
# name will be displayed
#
[DisplayNames]

# To define exactly how to display a specific category name 
# enter its value below with its anchorized form as the key.
# My use case for this option is this category:
#
# stream-of-consciousness = 'Stream of Conscioussness'
#

# Parameters for styling the cloud.
###################################

# ID to set on the wrapper.
#
WrapperID = 'category-cloud'

# Sass (or CSS) to apply to the wrapper.
#
Wrapper = ''

# Sass (or CSS) to apply to links.
#
Link = ''

# Max font size to use in the cloud in rem units.
#
MaxSize = 2.34

# Min font size to use in the cloud in rem units.
#
MinSize = 0.9

# Max font weight to use in the cloud.
#
MaxWeight = 800

# Min font weight to use in the cloud.
#
MinWeigth = 200

# Whether to display parenthesized page counts along
# with the category names.
#
DisplayPageCounts = false

# Whether to wrap category links with <nobr>
#
UnbreakableLinks = true

@import "vendor/rfs";

#category-cloud { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: baseline;
  @include rfs(10px, gap);
  @include padding(0 20px);
  @include margin(40px auto);
  /* Wrapper */
  
  a {
    line-height: 1;
    padding: 0;
    margin: 0;
    /* Link */
    
    span {
      display: none;
    }
    
    @for $i from 1 through /* TotalSteps */ {
      
      &.step-#{$i} {
        @include font-size((/* MinSize */rem + $i * /* SizeIncrement */rem));
        font-weight: /* MinWeight */ + $i * 100;
      }
      
    }
    
  }
  
}