cinema gif thanks to : gideon de villiers

bespoke-theme-atomantic

(best in Google Chrome)

A Bespoke.js theme

by

Adam Eivy \[._.]/

Content

that

waits for gif completion

section
  x-gif(src="images/madness.gif" fill n-times=1)
  .box.wait-for-gif
    h1 Content
    ...

CSS Backgrounds

section.carbonfiber
.blueprint
.carbon
.carbonfiber
.cubes
.honeycomb
.paper
.seigaiha
.shippo
.wave

some work well with color classes to tint

.black
.blue
.lightblue
.cocoa
.green
.grey
.jellybean
.midnight
.orange
.red
.transparent
.white
.yellow

Tiny Image Tile Backgrounds

section.woodtilecolor.cocoa
.blackthread
.brickwalldark
.brickwall
.diagmonds
.diamondupholstery
.gplay
.gravel
.oldmath
.purtywood
.bullseyes
.escheresque
.straws
.subtlegrey
.woodtilecolor
.treebark
.washi
.wood-pattern
.xv

You can also add color classes to tint

.black
.blue
.lightblue
.cocoa
.green
.grey
.jellybean
.midnight
.orange
.red
.transparent
.white
.yellow

Content Positioning

.box
  h2 Content Positioning
(default)
.top.left
.top
.top.right

.right
.bottom.right
.bottom
.bottom.left
.left

Top Left

.multibox
  .box.top.left
    h2 Top Left

Top Right

.multibox
  .box.top.right
    h2 Top Right

Bottom Left

.multibox
  .box.bottom.left
    h2 Bottom Left

Bottom Right

.multibox
  .box.bottom.right
    h2 Bottom Right
Title Bar

Left

section.cubes
  .multibox
    .title Title Bar
    .box.left
      h2 Left
    .box.right
      h2 Right

Right

section.cubes
  .multibox
    .title Title Bar
    .box.left
      h2 Left
    .box.right
      h2 Right

Background Image Effects

section
  img.fillwb(src="images/spaceman.jpg")
  .box.bottom
(default)
.blur1
.blur2
.blur3
.blur4
.opac20
.opac50
.opac80

Background Image Size/Position

section
  img.fillw(src="images/spaceman.jpg")
(default)
.fill
.fillh
.fillw
.fillwb

Highlight Content

reallyemphatictextcolorsyo!grey!white!

p
  span.em-green really
  span.em-orange emphatic
  span.em-red text
  span.em-yellow colors
  span.em-blue yo!
  span.em-grey grey!
  span.em-white white!

.box Tints

section.shippo.jellybean
  .box
(default)
.transparent
.white
.red
.black
.grey
.blue
.midnight
.jellybean
.cocoa

Paragraph

bullet content

and this is abad great thing

section
  h1.bullet Paragraph
  p.bullet bullet content
  h2 and this is a
    span.nope bad
    |  great thing

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

Blinking Cursor

Engaging Dyson Sphere

h2.cursor Engaging Dyson Sphere

Text Styles

this is a p tag

and a p.code tag is monospace

but

^ is .mid

Key Activated Animations

hit ther key to activate

.rotate

\[._.]/

.spin

\[._.]/

you can automatically activate by adding the .on class

Slide Activated Animations

The theme also includes Animate.css

\[._.]/

\[._.]/

\[._.]/

h1.animated.pulse \[._.]/
h1.animated.rotateIn \[._.]/
h1.animated.jello \[._.]/

Unordered Lists

  • Section 1
    • Awesome things
    • Even more awesome
  • Section 2
    • Continue Awesome
    • Advanced
  • Keeping it real

Ordered Lists

  1. Section 1
    1. Awesome things
    2. Even more awesome
  2. Section 2
    1. Continue Awesome
    2. Advanced
  3. Keeping it real
credit: NASA

Background Image Credits

section
  .fullscreen
    img.fill(src="images/nasa-Q1p7bh3SHj8-unsplash.jpg")
    .credit credit: 
      a(href="https://unsplash.com/@nasa",target="off") NASA
  .box
    h1 Background Image Credits

Cheers!

\[._.]/  Adam Eivy

 @antic

 /atomantic

  restart
Fork me on GitHub