Skip to content

Commit

Permalink
[73] Create docs for Skeleton Crew card type
Browse files Browse the repository at this point in the history
  • Loading branch information
CollinHeist committed Jan 7, 2025
1 parent 219a59f commit 1a44edc
Show file tree
Hide file tree
Showing 16 changed files with 171 additions and 1 deletion.
Binary file added docs/card_types/assets/skeleton_crew.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added docs/card_types/assets/skeleton_crew/mask.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1 change: 1 addition & 0 deletions docs/card_types/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ TitleCardMaker currently has the following built-in card types:
| [Roman Numeral](./roman_numeral.md) | <img src="./assets/roman_numeral.webp" width="350"> |
| [Score](./score.md) | <img src="./assets/score.webp" width="350"> |
| [Shape](./shape.md) | <img src="./assets/shape.webp" width="350"> |
| [Skeleton Crew](./skeleton_crew.md) | <img src="./assets/skeleton_crew.webp" width="350"> |
| [Star Wars](./star_wars.md) | <img src="./assets/star_wars.webp" width="350"> |
| [Standard](./standard.md) | <img src="./assets/standard.webp" width="350"> |
| [Striped](./striped.md) | <img src="./assets/striped.webp" width="350"> |
Expand Down
163 changes: 163 additions & 0 deletions docs/card_types/skeleton_crew.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
---
title: Skeleton Crew Card Type
description: >
An overview of the built-in Skeleton Crew card type.
---

<link rel="stylesheet" type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
<script src="../../javascripts/imageCompare.js" defer></script>

# Skeleton Crew Card Type

This card design was created by [Supremicus](https://github.com/Supremicus),
and the design was inspired by the official logo for _Star Wars: Skeleton Crew_.

Cards of this style feature a centered title element with a rounded rectangular
border around the text. The color and vertical position of the text elements can
all be changed with extras.

<figure markdown="span" style="max-width: 70%">
![Example Skeleton Crew Card](./assets/skeleton_crew.webp)
</figure>

??? note "Labeled Card Elements"

![Labeled Skeleton Crew Card Elements](./assets/skeleton_crew/labeled.webp)

## Episode Text

Unless explicitly stated otherwise, all of the following extras will refer to
both the season _and_ episode text. "Episode text" is used for brevity.

### Coloring

The color of the episode text can be adjusted with the _Episode Text Color_
extra. By default, this is set to `transparent`, which just cuts out the text
from the border box.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="50"
data-left-label="black"
data-right-label="transparent">
<img src="../assets/skeleton_crew/episode_text_color.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

### Size

The size of the season and episode text can be adjusted with the
_Episode Text Font Size_ extra. Like all font sizes, values greater than
`#!yaml 1.0` will increase the size of the text, and values less than
`#!yaml 1.0` will decrease it.

This will also adjust the size of the _Alternate Text_.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="50"
data-left-label="1.4"
data-right-label="1.0">
<img src="../assets/skeleton_crew/episode_text_font_size.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

## Outline

### Color

The color of the outline can be adjusted with the _Outline Color_. If
unspecified, this defaults to matching the color of the title text.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="50"
data-left-label="gold1"
data-right-label="white">
<img src="../assets/skeleton_crew/outline_color.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

### Width

The width of the outline (at least the portion which does not surround the
[Episode Text](#episode-text)) can be changed with the _Outline Width_ extra.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="33"
data-left-label="8"
data-right-label="16">
<img src="../assets/skeleton_crew/outline_width.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

## Position

The position of all text elements can be adjusted with the _Text Vertical
Position_ extra. This can be either `top`, `center`, or `bottom`.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="50"
data-left-label="8"
data-right-label="16">
<img src="../assets/skeleton_crew/position.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

## Separator Character

If both the season and episode text are displayed on the Card, then a separator
character is added between them. This character can be adjusted with the
_Separator Character_ extra.

The color of this character will be controlled by the
[_Episode Text Color_](#coloring) extra.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="55"
data-left-label="|"
data-right-label="•">
<img src="../assets/skeleton_crew/separator.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

## Stroke Color

The color of the stroke applied to the title text can be adjusted with the
_Stroke Color_ extra.

??? example "Example"

<div class="image-compare example-card"
data-starting-point="50"
data-left-label="crimson"
data-right-label="black">
<img src="../assets/skeleton_crew/stroke_color.webp"/>
<img src="../assets/skeleton_crew.webp"/>
</div>

## Mask Images

This card also natively supports [mask images](../user_guide/mask_images.md).
Like all mask images, TCM will automatically search for alongside the input
Source Image in the Series' source directory, and apply this atop all other Card
effects.

!!! example "Example"

<div class="image-compare example-card"
data-starting-point="46.6"
data-left-label="Mask Image"
data-right-label="Resulting Title Card">
<img src="../assets/skeleton_crew/mask-raw.webp"/>
<img src="../assets/skeleton_crew/mask.webp"/>
</div>
5 changes: 5 additions & 0 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,11 @@ TitleCardMaker:
<img class="no-lightbox" src="./card_types/assets/shape.webp" loading="lazy">
</a>
</figure>
<figure data-label="Skeleton Crew">
<a data-label="Skeleton Crew" href="./card_types/skeleton_crew">
<img class="no-lightbox" src="./card_types/assets/skeleton_crew.webp" loading="lazy">
</a>
</figure>
<figure data-label="Standard">
<a data-label="Standard" href="./card_types/standard">
<img class="no-lightbox" src="./card_types/assets/standard.webp" loading="lazy">
Expand Down
1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ nav:
- Roman Numeral: card_types/roman_numeral.md
- Score: card_types/score.md
- Shape: card_types/shape.md
- Skeleton Crew: card_types/skeleton_crew.md
- Standard: card_types/standard.md
- Star Wars: card_types/star_wars.md
- Striped: card_types/striped.md
Expand Down
2 changes: 1 addition & 1 deletion modules/ref/version_webui
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v2.0-alpha.14.0-webui72
v2.0-alpha.14.0-webui73

0 comments on commit 1a44edc

Please sign in to comment.