style-guide | Ashterism

Index:

Basic Display of Image and Video
Image Cards
- Standard Image Card
- Clickable Image Card
Image Card Grids
Tables
- Responsive Table
- Centered Ticks Table
Post Navigation
Alerts
Typography
Print Styles
Google Maps

Basic Display of Image and Video (legacy)

Full-Width Image

Example:

Usage:

To display an image that spans the full width of its parent container, simply use the standard <img> tag within a <figure> element (optional for the caption). No specific classes are required for this basic full-width behavior.

Image Grid

Example:

Usage:

Create a flexible grid of images by wrapping your <figure> elements (containing <img> and optional <figcaption>) within a div with the class .image-grid. The grid will automatically arrange the images based on the available space.

Key Attributes (CSS):

.image-grid:
- display: grid: Enables the grid layout.
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)): Creates columns that automatically adjust, with a minimum width of 150px.
- gap: 10px: Sets the spacing between grid items.
.image-grid img:
- width: 100%: Ensures images fill their container width.
- max-width: 200px: Ensures images within the grid have a maximum width of 200px.

Video Example

Example:

Usage:

To embed a responsive video that maintains its aspect ratio, wrap your <iframe> element within a div with the class .video-wrapper.

Key Attributes (CSS):

.video-wrapper:
- position: relative: Sets the container as a reference for absolute positioning of the iframe.
- padding-bottom: 56.25%: Creates a 16:9 aspect ratio.
- height: 0: Collapses the container’s inherent height.
- overflow: hidden: Hides parts of the iframe that might extend beyond the container.
- margin: 1rem 0: Adds vertical spacing around the video wrapper.
- width: 100%: Makes the video wrapper take up the full width of its container.
.video-wrapper iframe:
- position: absolute: Allows precise positioning within the wrapper.
- top: 0, left: 0: Positions the iframe at the top-left of the wrapper.
- width: 100% !important, height: 100% !important: Makes the iframe fill the wrapper.
- border: 0: Removes the default iframe border.
- display: block: Prevents extra spacing around the iframe.

Image Cards

Image cards are used to present images with optional captions, wrapped in a styled card container. You can align them left (default), centre, or right using classes on the wrapper.

Standard Image Card

Example (Left-aligned by default):

Example image — Standard image card with caption

Center-aligned:

Right-aligned:

How to Use:

Wrap your <figure class="media-card"> inside a <div class="image-card-wrapper">. Add the class .right to float the image right, or use a flex container to center it. Left-aligned is default.

See example code


<div class="image-card-wrapper right">
  <figure class="media-card">
    <img src="/assets/images/25_04/10th_greenNoiseRemoved_edit_sml600.png" alt="Right-aligned image card">
    <figcaption>Right-aligned image card</figcaption>
  </figure>
</div>

Standard Video Card

Example:

Standard video card with caption

Usage:

To embed a video in a media-style card with a caption, wrap a YouTube or Vimeo embed iframe directly inside the .media-card container. This displays the video inline with the standard styling, and users can still fullscreen the video using the player controls.

See example code


<div class="image-card-wrapper right">
  <figure class="media-card">
    <iframe src="https://www.youtube.com/embed/PmEsczIhK4I" frameborder="0" allowfullscreen></iframe>
    <figcaption>Standard video card with caption</figcaption>
  </figure>
</div>

Clickable Image Card (Full-size view - opens in new tab)

Example:

Image of Orion Nebula with settings below — Click to view full size 🔍

Usage:

To create a fully clickable image card with a zoom-on-hover effect, wrap the entire <figure class="media-card"> inside an <a> tag and apply the class .image-card-clickable to that anchor. This ensures both the image and caption are clickable, and enables a hover animation for interactive feedback. Add a 🔍 icon to the caption to indicate that a full-size image is available.

See example code


<div class="image-card-wrapper">
  <a href="/assets/images/fullsize.jpg" target="_blank" class="image-card-clickable">
    <figure class="media-card">
      <img src="/assets/images/thumb.jpg" alt="Image with caption">
      <figcaption>Click to view full size 🔍</figcaption>
    </figure>
  </a>
</div>

Photo Grid Layouts

Image Height Utility Classes

Use these classes to standardise image height inside grids for visual consistency.

Grid Type	Class Name	Pixel Height	Typical Use
🟩 3-column	`.force-height-150`	150px	Small thumbnails, tight grids
	`.force-height-177`	177px	Medium-tight image rows
	`.force-height-220`	220px	Taller scenic images in tighter layout
🟨 2-column	`.force-height-240`	240px	Balanced photo pairs
	`.force-height-271`	271px	Slightly taller portrait-style use
	`.force-height-300`	300px	Focused pairings like food or portraits
🟥 4-column	`.force-height-230`	230px	Compact portrait fit for 4-col layout
🟥 4-column	`.force-height-200`	200px	Tight portrait fit for more subtle layouts
	(responsive)	(auto)	Best for portrait sets with many images
🟥 4-column	`.force-height-120`	120px	Compact half-row fit, ideal for closing images
🟦 1-column	(responsive)	(auto)	No fixed height — stacks naturally on mobile

Usage Example:

<img src="/path/to/image.jpg" class="force-height-240" alt="Image description">

Or use it within your grid layout:

<div class="photo-grid three-col">
  <a href="..." class="image-card-clickable">
    <figure class="media-card">
      <img src="..." class="force-height-150" alt="...">
      <figcaption>Example caption 🔍</figcaption>
    </figure>
  </a>
</div>

2x3 Photo Grid

Example:

Usage:

Create a 2x3 grid of media items by wrapping six <figure> elements within a div with the class .photo-grid. For image content, each <figure> should also include the .media-card class to apply the standard image card styling. This layout is responsive and adapts to smaller screens.

See example code


<div class="photo-grid">
  <figure class="media-card">
    <img src="/assets/images/example.jpg" alt="Example image 1">
    <figcaption>Example image 1</figcaption>
  </figure>
  <!-- Repeat 5 more times -->
</div>

Key Attributes (CSS):

.photo-grid:
- display: grid: Enables the grid layout.
- grid-template-columns: repeat(2, 1fr): Creates two equal-width columns.
- gap: 16px: Sets the spacing between grid items.
- width: 100%: Makes the grid take up the full width of its container.
- margin: 0 auto: Centers the grid horizontally.
.photo-grid figure, .photo-grid .grid-video-wrapper:
- overflow: hidden: Hides content that overflows the container.
- border-radius: 8px: Rounds the corners.
- background-color: #f9f9f9: Sets a light gray background.
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15): Adds a subtle shadow.
.photo-grid figure img:
- width: 100%: Makes the image fill its container width.
- height: auto: Maintains the image’s aspect ratio.
- display: block: Prevents extra spacing below the image.
- border-radius: 8px 8px 0 0: Rounds the top corners.
.photo-grid figcaption:
- padding: 8px 12px: Adds padding around the caption text.
- font-size: 0.9rem: Sets the caption font size.
- color: #666: Sets the caption text color.
- background-color: #fff: Sets a white background for the caption.
- border-radius: 0 0 8px 8px: Rounds the bottom corners of the caption.

2x1 Photo Grid (Image and Video)

Example:

Video in 2x1 grid

Usage:

To create a 2x1 grid where one element is an image and the other is a video, wrap both elements within a div with the class .photo-grid. For the image, use a <figure> with the .media-card class. For the video, use a <figure> with both the .media-card and .grid-video-wrapper classes, and place your <iframe> directly inside the <figure>, followed by an optional <figcaption>. This ensures consistent styling and layout.

See example code


<div class="photo-grid">
  <figure class="media-card">
    <img src="/assets/images/25_03/138A3374.jpg" alt="Example image">
    <figcaption>Image in 2x1 grid</figcaption>
  </figure>
  <figure class="media-card grid-video-wrapper">
    <iframe src="https://www.youtube.com/embed/PmEsczIhK4I" frameborder="0" allowfullscreen></iframe>
    <figcaption>Video in 2x1 grid</figcaption>
  </figure>
</div>

Key Attributes (CSS):

Refer to the .photo-grid and .media-card styles mentioned above.
.photo-grid .grid-video-wrapper:
- position: relative: For absolute positioning of the iframe.
- aspect-ratio: 3 / 2: Sets a 3:2 aspect ratio for the video container.
.photo-grid .grid-video-wrapper iframe:
- position: absolute, top: 0, left: 0, width: 100%, height: 100%: Makes the iframe fill its container.
- border-radius: 8px 8px 0 0: Rounds the top corners.

3x Grid of Clickable Image Cards

Example:

Usage:

To create a 3-column clickable grid, use the .photo-grid class along with .three-col to create a 3-column layout. Wrap each .media-card in a link with the .image-card-clickable class.

See example code


<div class="photo-grid three-col">
  <a href="/assets/images/fullsize.jpg" target="_blank" class="image-card-clickable">
    <figure class="media-card">
      <img src="/assets/images/thumb.jpg" alt="Image">
      <figcaption>Click to enlarge 🔍</figcaption>
    </figure>
  </a>
  <!-- Repeat 2 more times -->
</div>

4x Grid of Portrait Image Cards

Example:

Usage:

Use .photo-grid.four-col when displaying a series of vertical (portrait) images, especially in larger sets. Pair with .force-height-230 or .force-height-271 for consistent image height.

Example:

Usage:

Wrap each .media-card in an anchor (<a>) with:

href pointing to the full-size image
class="glightbox" to enable lightbox behaviour
data-gallery="name" to group images into a gallery set

The lightbox will display full-size versions of the images with optional captions and support for swipe/arrow navigation. To use a 3-column layout, add the class .three-col to your .photo-grid container. You must also initialise the GLightbox plugin on the page for this to work.

See example code


<div class="photo-grid three-col">
  <a href="/assets/images/full1.jpg" class="image-card-clickable glightbox" data-gallery="trip">
    <figure class="media-card">
      <img src="/assets/images/thumb1.jpg" alt="Cove">
      <figcaption>Cove 🔍</figcaption>
    </figure>
  </a>
  <a href="/assets/images/full2.jpg" class="image-card-clickable glightbox" data-gallery="trip">
    <figure class="media-card">
      <img src="/assets/images/thumb2.jpg" alt="Camp spot">
      <figcaption>Camp spot 🔍</figcaption>
    </figure>
  </a>
  <a href="/assets/images/full3.jpg" class="image-card-clickable glightbox" data-gallery="trip">
    <figure class="media-card">
      <img src="/assets/images/thumb3.jpg" alt="Sunset view">
      <figcaption>Sunset view 🔍</figcaption>
    </figure>
  </a>
  <!-- Repeat as needed -->
</div>

Tables

Responsive Table

Example:

Event	Starts	Ends
Sunset		✓
Civil Twilight	✓	✓
Nautical Twilight	✓	✓
Astronomical Twilight	✓	✓
Start of Night	✓
End Shooting		✓

Usage:

To create a responsive table that adapts well to smaller screens, use the class .responsive-table on your <table> element. For the mobile view, it hides the traditional header and uses the data-label attribute on each <tr> to provide context for the stacked table cells. It’s recommended to wrap the table in a div with the class .table-wrapper for potential overflow handling.

Key Attributes (CSS):

.responsive-table:
- width: 100%: Makes the table take up the full width of its container.
- border-collapse: collapse: Collapses borders between table cells.
- margin-bottom: 1em: Adds bottom margin to the table.
- font-size: 0.95em: Sets the base font size for the table.
.responsive-table th, .responsive-table td:
- border: 1px solid #ddd: Adds borders to table headers and data cells.
- padding: 0.6em 0.8em: Adds padding within table headers and data cells.
- text-align: left: Aligns text to the left by default.
@media (max-width: 600px) .responsive-table:
- thead { display: none; }: Hides the table header on smaller screens.
- tr { display: block; margin-bottom: 1em; border: 1px solid #ddd; padding: 0.5em; }: Displays table rows as blocks with spacing and borders.
- td { display: block; padding-left: 0.5em; border: none; border-bottom: 1px solid #eee; position: relative; text-align: left; }: Displays table data cells as blocks with left padding, bottom borders, and relative positioning.
- td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.5em; color: #444; }: Uses the data-label attribute to display the column header before the cell content on smaller screens.
- td[colspan]::before { content: attr(data-label); }: Handles colspan attributes for the pseudo-header.

Centered Ticks Table

Example:

Event	Starts	Ends
Sunset		✓
Civil Twilight	✓	✓

Usage:

To center the content of the “Starts” and “Ends” columns (typically used for checkmarks or similar indicators), add the class .centre-ticks to your .responsive-table.

Key Attributes (CSS):

.centre-ticks th:nth-child(2), .centre-ticks td:nth-child(2): Styles the second column (Starts).
.centre-ticks th:nth-child(3), .centre-ticks td:nth-child(3): Styles the third column (Ends).
text-align: center: Centers the text within these columns.

Previous/Next Links

Example:

Usage:

To implement the styled previous and next post navigation links, use the following HTML structure. The nav element should have the class .post_navi. Each link is within a div with the class .post_navi-item, and you should use .nav_prev for the previous link and .nav_next for the next link. Include a span with the class .post_navi-label for the “Previous” or “Next” text, an <a> tag with the class .post_navi-link for the actual link text, and an optional span with the class .post_navi-arrow for the arrow icons.

Key Attributes (CSS):

.post_navi:
- display: flex: Creates a flex container for the items.
.post_navi-item:
- padding: 0 2.2em: Adds horizontal padding.
- width: 50%: Makes each item take up half the width.
- position: relative: For positioning the arrow.
- color: inherit !important: Ensures the link color is inherited.
.nav_prev:
- text-align: left: Aligns the content to the left.
.nav_next:
- text-align: right: Aligns the content to the right.
.post_navi-label:
- font-size: 0.8em: Sets a smaller font size for the label.
- opacity: 0.5: Makes the label slightly transparent.
.post_navi-arrow:
- position: absolute: Allows precise positioning.
- top: 50%: Vertically centers the arrow.
- transform: translateY(-50%): Adjusts for the arrow’s height.
- font-size: 2.5em: Sets a large font size for the arrow.
- opacity: 0.3: Makes the arrow semi-transparent.
.nav_prev .post_navi-arrow:
- left: 0: Positions the arrow to the left for the “Previous” link.
.nav_next .post_navi-arrow:
- right: 0: Positions the arrow to the right for the “Next” link.

Alerts

These blocks provide contextual messaging to guide users. The [!TYPE] syntax is used in markdown, which is rendered into styled HTML based on the type of message.

Example Types

Important

Key information users need to know to achieve their goal.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action. Opportunity to provide more context.

How to Use

Use markdown like this in your .md files:

Markdown Code Example


 Important
Key information users need to know to achieve their goal.



 Note
Highlights information that users should take into account, even when skimming.



 Tip
Optional information to help a user be more successful.



 Warning
Critical content demanding immediate user attention due to potential risks.



 Caution
Negative potential consequences of an action. Opportunity to provide more context.

Make sure your markdown processor or theme converts [!TYPE] blocks to proper HTML. If needed, you can fallback to using custom HTML like this:

Raw HTML Example



  Important
  Key information users need to know to achieve their goal.



  Note
  Highlights information that users should take into account, even when skimming.



  Tip
  Optional information to help a user be more successful.



  Warning
  Critical content demanding immediate user attention due to potential risks.



  Caution
  Negative potential consequences of an action. Opportunity to provide more context.

Typography

A guide to Sustainamo’s core type styles, font stacks, and usage.

Font Families

Label	Sample	Class/Selector	Font Stack	Usage
Body Font	The quick brown fox	`body`, `p`, `ul`, `ol`	`system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif`	Primary text for content and lists
Headline Font	The quick brown fox	`h1`, `h2`, `h3`, `h4`	(inherits from body — same as above)	Section headings and emphasis

Heading Styles

Sample	Selector	Font Size	Weight	Color
Heading 1	`h1`	1.8em	600	`#204312`
Heading 2	`h2`	(inherits)	600	`#204312`
Heading 3	`h3`	(inherits)	600	`#204312`
Heading 4	`h4`	(inherits)	600	`#204312`

Font size and weight values shown reflect the default applied in override.css. Most headings use a weight of 600 and colour #204312.

Body Text & Lists

Sample	Selector	Line Height	Color
The quick brown fox jumps over the lazy dog.	`p`, `ul`, `ol`	1.6	`#222`

Print Styles

Example:

(No visual example, refers to print-specific styles)

Usage:

Elements with the class .no-print will be hidden when the page is printed.

Key Attributes (CSS):

@media print .no-print:
- display: none !important: Hides elements with this class during printing.

Google Maps

Example:

HTML

Google Maps

Example:

```html

Usage:

To embed a responsive Google Map, wrap your <iframe> code provided by Google Maps within a div with the class .map-container.

Key Attributes (CSS):

.map-container:
- position: relative: Sets up the container for aspect ratio handling.
- padding-bottom: 56.25%: Creates a 16:9 aspect ratio for responsiveness.
- height: 0: Collapses the container’s inherent height.
- overflow: hidden: Hides iframe overflow.
- max-width: 100%: Ensures it doesn’t exceed its parent’s width.
- background: #f9f9f9: Sets a background color.
- border-radius: 8px: Rounds the corners.
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15): Adds a subtle shadow.
.map-container iframe:
- position: absolute: Allows the iframe to fill the container.
- top: 0, left: 0: Positions the iframe at the top-left.
- width: 100%: Makes the iframe take up the full width.
- height: 100%: Makes the iframe take up the full height.
- border: 0: Removes the default iframe border.

Basic Display of Image and Video (legacy)

Full-Width Image

Image Grid

Video Example

Image Cards

Standard Image Card

Standard Video Card

Clickable Image Card (Full-size view - opens in new tab)

Photo Grid Layouts

Image Height Utility Classes

2x3 Photo Grid

2x1 Photo Grid (Image and Video)

3x Grid of Clickable Image Cards

4x Grid of Portrait Image Cards

Lightbox Photo Grid

Tables

Responsive Table

Centered Ticks Table

Post Navigation

Previous/Next Links

Alerts

Example Types

Important

Note

Tip

Warning

Caution

How to Use

Typography

Font Families

Heading Styles

Body Text & Lists

Print Styles

Google Maps

Google Maps