ASCII Gallery

ASCII Art Gallery

A responsive gallery for showcasing ASCII art and text-based designs. Mix and match sizes to create interesting compositions.

Tiny Smile

^_^

Shocked

o_o

Small Triangle

  /\
 /  \
/____\

Large Wave

     ~  ~  ~
  /  \/  \/
 /         \

    
Ocean vibes
  

Simple House

    /\
   /  \
  /____\
  |    |
  |    |
  |____|

Star

   *
  * *
 * * *

Large Tree

       *
      ***
     *****
    *******
   *********
  ***********
      |||
      |||
      |||

A majestic tree

Heart

 <3

Mountain

    /\
   /  \
  /    \
 /______\

---

How to Use This Template

Add Your ASCII Art

Replace the placeholder ASCII art with your own. Just add new ascii-item divs:

<div class="ascii-item [size]">
  <div class="ascii-title">Your Title</div>
  <pre>
    [Your ASCII art here]
  </pre>
  <div class="ascii-description">Optional description</div>
</div>

Size Classes

• small - Single column width
• medium - Single column width (default)
• large - Double column width (spans 2 columns on desktop)
• xlarge - Double column width (spans 2 columns on desktop)

Tips

1. Keep monospace in mind: ASCII art looks best in monospace fonts. The template uses Courier New.
2. Whitespace matters: Use <pre> tags to preserve formatting exactly as intended.
3. Responsive design: On mobile, large and xlarge items automatically revert to single column to save space.
4. Dark mode: The gallery respects your Quartz theme colors via CSS variables.

Example: Your Own ASCII

<div class="ascii-item large">
  <div class="ascii-title">My Masterpiece</div>
  <pre>
    ___________
   /   hello!  \
   |  there    |
   \_________/
  </pre>
</div>

---

Customization

If you want to tweak the styling, edit the CSS variables at the top or modify these properties:

• grid-template-columns: Change the grid layout (currently 300px minimum per item)
• gap: Adjust spacing between items
• font-family in pre: Use a different monospace font
• --theme-* variables: Controlled by your Quartz theme

Enjoy your gallery! 🎨