documentation update

hugo/content/_index.md

@@ -1,5 +1,5 @@
 +++
-title = 'bulma-horizontal-card'
+title = 'Home'
 date = "2023-04-22"
 +++
 ![](hcard.png)
@@ -8,11 +8,10 @@ date = "2023-04-22"
 # bulma-horizontal-card
 {.has-text-centered}
 
-[![npm](https://img.shields.io/npm/v/@telophase/bulma-horizontal-card)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card) [![npm downloads](https://img.shields.io/npm/dw/@telophase/bulma-horizontal-card)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card) [![support development](https://img.shields.io/static/v1?label=support&color=blueviolet&message=@%20ko-fi&logo=ko-fi)](https://ko-fi.com/gimon)
+[![npm](https://img.shields.io/npm/v/@telophase/bulma-horizontal-card?logo=npm)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card) [![](https://img.shields.io/npm/dependency-version/@telophase/bulma-horizontal-card/bulma?label=bulma%20version&logo=bulma)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card?activeTab=dependencies) [![npm downloads](https://img.shields.io/npm/dw/@telophase/bulma-horizontal-card?logo=npm)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card) ![](https://img.shields.io/github/last-commit/telophase/bulma-horizontal-card?label=last%20commit&logo=github) [![](https://img.shields.io/npm/l/@telophase/bulma-horizontal-card)](https://www.npmjs.com/package/@telophase/bulma-horizontal-card) [![support development](https://img.shields.io/static/v1?label=support&color=blueviolet&message=@%20ko-fi&logo=ko-fi)](https://ko-fi.com/gimon)
 {.has-text-centered}
 
-A [Bulma CSS](https://github.com/jgthms/bulma) extension to support horizontal cards. Built for the latest version of Bulma (0.9.4)! You'll need it in order for this code to work.
-{.has-text-centered}
+An extension for [Bulma CSS framework](https://github.com/jgthms/bulma)  to support responsive horizontal cards, since [the project owner is not interested in maintaining the feature](https://github.com/jgthms/bulma/pull/1596#issuecomment-429735282).  The syntax and classes of vanilla ("normal") cards are reused and preserved, so you can still use headers and footers! It is also highly customizable; horizontal cards can be styled independently of normal ones via distinct SASS variables.
 
 
 ## notices
@@ -26,14 +25,15 @@ So, this extension includes an additional utility class that can force the `.car
 {{% /message %}}
 
 ## contributing
-Contributions to this extension are always welcome!
+Contributions to this extension are always welcome, be they new code, small fixes, or edits to the documentation!
 
-Though this project officially lives at [dev.gimon.zone](https://dev.gimon.zone/bulma-horizontal-card/~files), there is a [mirror on Github](https://github.com/telophase/bulma-horizontal-card) that accepts contributions. 
+Though this project officially lives at [my OneDev instance](https://dev.gimon.zone/bulma-horizontal-card/~files) for local CI jobs, [the main mirror on Github](https://github.com/telophase/bulma-horizontal-card) accepts contributions.  Any changes are synced between the two repos via CI.
 
-Fork this project on Github and file a pull request, and I'll merge it back into main. :)
+Fork this project on Github and file a pull request (or simply file an issue), and I'll merge it back into main.
 
 ## license
-&#169; [Alex H.](https://gimon.zone) 2023-present. <br> MIT License.
+&#169; [Alex H.](https://gimon.zone) ([@telophase](https://github.com/telophase)) 2023-present.
+MIT License.
 
 Initial code and CSS class syntax based on the work/input of contributors in [this Bulma pull request](https://github.com/jgthms/bulma/pull/1596). Thank you!
 

hugo/content/customize.md

@@ -4,15 +4,15 @@ title = "Customize Extension"
 
 How to customize the extension and use it in your Bulma project.
 
-## Install Bulma
+# Install Bulma
 If you don't already have Bulma installed, it should have been installed when you installed [`bulma-horizontal-card` via NPM](../install/#via-npm-for-bulma-sass) as it is a dependency.
 
 You can install Bulma manually with:
 ```sh
 npm i bulma
 ```
 
-## Import into your SASS/CSS
+# Import into your SASS/CSS
 After you've installed [`bulma-horizontal-card` via NPM](../install/#via-npm-for-bulma-sass) into your Bulma project directory, you can integrate it into your SCSS/SASS by adding the following line. Place this line *after* the line(s) that import Bulma (or at minimum, Bulma's `components/card.sass`)
 
 ```scss
@@ -28,7 +28,7 @@ After you've installed [`bulma-horizontal-card` via NPM](../install/#via-npm-for
 
 `bulma-horizontal-card` should now be built into your SASS and any compiled CSS from it.
 
-## Edit SASS from NPM
+# Edit SASS from NPM
 Depedening on your `NODE_ENV` settings, development dependencies for `bulma-horizontal-card` may not have been installed. Run the following code to install them explicitly. This will install Bulma and [Dart SASS](https://www.npmjs.com/package/sass).
 
 ```sh
@@ -42,9 +42,9 @@ You can find the raw SASS at `../node_modules/@telophase/bulma-horizontal-card/s
 **NOTE**: Node-SASS has been deprecated. The included scripts use Dart SASS command syntax in order to compile CSS. If you wish to use node-SASS anyway, you'll need to edit the scripts in `package.json`.
 {{% /message %}}
 
-## Variables
+# Variables
 
-### General Variables
+## General Variables
 To provide room to style or tweak horizontal cards separately from "normal" vertical cards, horizontal cards use unique variables for colors, radii, etc.
 
 By default, these are mapped to the [same variables that normal cards use](https://bulma.io/documentation/components/card/#variables) (the "Equivalent" column in this chart).
@@ -63,13 +63,16 @@ By default, these are mapped to the [same variables that normal cards use](https
 | `$hcard-content-background-color`| Card content background color. | `$card-content-background-color`| `transparent` |
 | `$hcard-content-padding` |  Padding for internal card contents. | `$card-content-padding` | `transparent` |
 | `$hcard-footer-background-color` | Background color for the card footer. | `$card-footer-background-color` | `transparent`|
-| `$hcard-footer-border-top` | Definition of the card footer top border | `$card-footer-border-top` |`1px solid $border-light`|
+| `$hcard-footer-border-top` | Definition of the card footer top border. | `$card-footer-border-top` |`1px solid $border-light`|
 | `$hcard-footer-padding` | Padding around card footers. | `$card-footer-padding` | `0.75rem` |
-| `$hcard-media-margin` | Margin around card media | `$card-media-margin` | `$block-spacing` |
+| `$hcard-media-margin` | Margin around card media. | `$card-media-margin` | `$block-spacing` |
 
-### Unique to `bulma-horizontal-card`
+## Unique to `bulma-horizontal-card`
 These variables are used by horizontal cards only and are not shared with/inherited by normal cards.
 
 | Name | Description | Default Value |
 | --- | ----------- | ---- |
-| `$hcard-image-default-size` | Width of the `.card-image` in horizontal cards | `12.5%` |
+| `$hcard-image-small-size` | Width of the `.card-image` in horizontal cards using `.is-small` | `$hcard-image-default-size * 0.5` |
+| `$hcard-image-default-size` | Width of the `.card-image` in horizontal cards without modifiers or using `.is-normal` | `12.5%` |
+| `$hcard-image-medium-size` | Width of the `.card-image` in horizontal cards using `.is-medium` | `$hcard-image-default-size * 1.5` |
+| `$hcard-image-large-size` | Width of the `.card-image` in horizontal cards using `.is-large` | `$hcard-image-default-size * 2.5` |

hugo/content/usage.md

@@ -23,6 +23,22 @@ By default, the `.card-image` element is aligned to the left. The `.card-image`
 This is a card with a right card image.
 {{% /card %}}
 
+## Image Size
+The size of `.card-image` can be controlled by adding the classes `.is-small`, `is-normal` (default), `is-medium`, or `is-large` to the `.card-image` element.
+{{% card image-classes="is-small" %}}
+This card image is small using class `.is-small`.
+{{% /card %}}
+{{% card image-classes="is-normal" %}}
+If you do not include a image size class, the card image will be this size. You can force it with the `.is-normal` class.
+{{% /card %}}
+{{% card image-classes="is-medium" %}}
+This card image is medium using class `.is-medium`.
+{{% /card %}}
+{{% card image-classes="is-large" %}}
+This card image is large using class `.is-large`.
+{{% /card %}}
+
+
 ## Headers and Footers
 Horizontal cards fully support the use of card header (`header.card-header`) and card footer (`footer.card-footer`) elements. Depending on where they are placed inside the `.card` div element, they will render as *inline* or *block*. You can mix and match inline and block headers/footers on the same card.
 
@@ -45,7 +61,7 @@ The removal of the bottom border radius on the `.card-image` when a block footer
 To counteract this, special class `.is-radiusless-bottom` can be added to the `.card-image`. 
 
 {{% message color="info" %}}
-It is strongly recommended to add this class to all horizontal cards with block footers to ensure they display correctly on Firefox and other Gecko-powered browsers.
+It is strongly recommended to add this class to all horizontal cards with block footers to ensure they display correctly on Firefox and other derived browsers.
 {{% /message %}}
 
 {{% card outline-footer="yes" %}}
@@ -66,22 +82,20 @@ This card has an inline header and an inline footer.
 #### Special Class `.is-forced-bottom`
 If your card is too tall, the `.card-footer` may appear to float inside the card. You can add the class `.is-force-bottom` to your `.card-footer`; this will cause it to stick to the bottom of the card. However, because this uses `position: absolute;`, the forced inline card footer will ignore internal margins and may appear too close to your other `.card-content`. 
 
+The sticky effect of the class `.is-forced-bottom` is only active *after* the tablet breakpoint. It will not apply any unique styles or have a sticky effect on collapsed horizontal cards, even on forced cards with class `.is-collapsed`.
+
 See the examples below. Check card behaviour per screen size before using this class.
 
 {{% card-compare %}}
 
-{{% message color="primary" %}}
-**TO-DO**: Improve responsiveness of `.is-forced-bottom`.
-{{% /message %}}
-
 ----
 
 # Use with Image Ratio Classes
 Bulma has several [responsive image aspect ratio classes (ratio modifiers)](https://bulma.io/documentation/elements/image/#responsive-images-with-ratios) that define how images are displayed responsively based only on dimensional ratio. 
 
 By default, very long or very wide images may appear too large/small as `.card-image`. For horizontal `.card-image`s, these classes alter the apparent height without altering the image's actual dimensions (ie. no distortion).
 
-These classes can be used to manipulate the height of the `.card-image`. Simply apply these classes to the `figure.image` element inside the `.card-image` div element.
+These classes can be used to manipulate the height of the `.card-image`. Simply apply these classes to the `figure.image` element inside the `.card-image` div element. (See below)
 
 ```
 <div class="card-image">
@@ -93,9 +107,7 @@ These classes can be used to manipulate the height of the `.card-image`. Simply
 
 {{% card-compare-imageratios %}}
 
-# Notes on Responsiveness
-Horizontal cards are based on CSS flexboxes, just like the rest of Bulma.
+# Responsiveness
+Horizontal cards are based on CSS flexboxes, just like the rest of Bulma. Horizontal cards try to follow Bulma's vertical-first philosophy, and so on smaller screens (below the tablet breakpoint) horizontal cards collapse back into "vertical" cards. 
 
-{{% message color="primary" %}}
-**TO-DO**: Fine-tune horizontal card responsiveness.
-{{% /message %}}
+Horizontal cards do not have interchangable syntax with normal cards. Dedicated CSS classes are used to maintain the different structure of horizontal cards while making them look just like normal vertical cards when collapsed. If you are using Javascript to toggle a horizontal card between vertical and horizontal orientations, **DO NOT remove the `.is-horizontal` class!**