sandbox – Verbosa

Derek MahSandbox page for testing and verifying layouts. Verbosa is a simpler theme that suits a nice simple frontpage with one hero lead and a couple smaller links. CSS has been modified to lock images into alignment grids. Image default sizes are 150, 300, and 600 px wide, and the thumbnail and medium images scale on smaller screens to maintain ratio. 150px maxes at 25% and 300px maxes at 50%. Max image display size is 900 wide (907px actual), which will always dynamically scale down to be 100% width of the container. Feature images should be custom images 400px wide so we don’t choke bandwidth when loading category and search listings.

For social media cross-posting, set the image in Yoast for each page. Yoast will use the featured image, assuming the dimensions of the image are within FB’s parameters. A roughly 2:1 image works best for full-sized posting. 800x400px feature image will display in FB full size. 400x200px will crop to the middle 200x200px and display as a thumbnail. Use a 150px TN image for a more predictable approach.

http://derekmah.com/wp-content/uploads/2016/09/Ali-150×150.png
as opposed to
http://derekmah.com/wp-content/uploads/2016/09/Ali.png

Verbosa Font Awesome Cat Ipsum

Can probably deactivate Advanced Custom Fields which was used on the previous theme to create unique frontpage elements.

Achieved customizations using only plugins and css, and Verbosa provides a google font loader in customizer>typography>general font

Raleway: 200, 200i, 300, 300i, 400, 400i, 700, 700i


Use class=”button” for inline links and use class=”button standalone” for standalone buttons. Added a simple button functionality. Simply bold a link and it will display as a button

Standalone Button
class=”button standalone”

Continue Reading Button
class=”continue-reading-link”

Standalone Read More Button
class=”button standalone readmore”

Verbosa applies the “read more” button to all post lists. Excerpts have been activated, and a 12 word sample will be used if an excerpt does not exist.

To center images, manually add P tags with style=”text-align: center;” to keep everything centered in older browsers where images don’t necessarily margin:auto correctly. Centered images with captions will automatically align as the image and caption are contained in a margin:auto div. Captions under center aligned images get special formatting.

These images are centered using the default WP centering settings:

These centered images have captions.

Quote from the wall behind the counter at Café Blanca.
Panel from Delilah Red

Peer out window, chatter at birds, lure them to mouth. Groom yourself 4 hours – checked, have your beauty sleep 18 hours – checked, be fabulous for the rest of the day – checked! Kitty power!

These images are centered using default WP centering settings.

Derek Mah Illustration Arthur Slade Delilah Red
Derek Mah Illustration Arthur Slade Delilah Red
Derek Mah Illustration Arthur Slade Delilah Red
Derek Mah Illustration Arthur Slade Delilah Red

H1 Throw down all the stuff in the kitchen h1

H2 Thinking longingly about tuna brine h2

H3 Instantly break out into full speed gallop h3

H4 For no reason lies down yet all of a sudden cat goes crazy h4

H5 Stare at wall turn and meow stare at wall some more meow again h5
H6 Continue staring for burrow under covers h6

 


Add class header-hero to img to make the image stretch across the entire content area.

H6 + H2 COMBINATION REMOVES

The Margin Top from the H2

An italicized paragraph line immediately following the H6 + H2 combination looks really nice as a sub-title or summary.

Stand in front of the computer screen pushes butt to face play time find something else more interesting, but attack the dog then pretend like nothing happened. Missing until dinner time all of a sudden cat goes crazy, but why must they do that, for claw drapes. Plop down in the middle where everybody walks.

 


H6 IN COMBINATION WITH

H2 Wrapped in HR Can Be Quite Attractive


 

blockquote Sleep in the bathroom sink roll on the floor purring your whiskers off. Slap owner’s face at 5am until human fills food dish. Need to chase tail. Curl up and sleep on the freshly laundered towels. blockquote
– italics in blockquote will format as citation

Thinking longingly about tuna brine get video posted to internet for chasing red dot yet brown cats with pink ears. Intently sniff hand scream at the bath sniff other cat’s butt and hang jaw half open thereafter lick the other cats. If it smells like fish eat as much as you wish attack the dog then pretend like nothing happened. Chew iPad power cord paw at beetle and eat it before it gets away for dream about hunting birds for fall over dead (not really but gets sympathy).

callout is a blockquote with class calloutright or calloutleft applied, italics will format as a citation this is a citation

Stand in front of the computer screen pushes butt to face play time find something else more interesting, but attack the dog then pretend like nothing happened. Missing until dinner time all of a sudden cat goes crazy, but why must they do that, for claw drapes. Plop down in the middle where everybody walks. Ask for petting destroy couch, for lick plastic bags yet if it smells like fish eat as much as you wish. Chew iPad power cord paw at beetle and eat it before it gets away.

callout is a blockquote with class calloutright or calloutleft applied, italics will format as a citation this is a citation

Stand in front of the computer screen pushes butt to face play time find something else more interesting, but attack the dog then pretend like nothing happened. Missing until dinner time all of a sudden cat goes crazy, but why must they do that, for claw drapes. Plop down in the middle where everybody walks. Ask for petting destroy couch, for lick plastic bags yet if it smells like fish eat as much as you wish. Chew iPad power cord paw at beetle and eat it before it gets away.

 

Currently loading only these weights in customizer>typography>general font

Raleway: 200, 200i, 300, 300i, 400, 400i, 700, 700i

100 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 100

200 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 200

300 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 300

400 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 400

500 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 500

600 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 600

700 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 700

800 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 800

900 Toy mouse squeak roll over gnaw the corn cob fooled again thinking the dog likes me. 900

cropped-03-triggerohare.jpg

Step on your keyboard while you’re gaming and then turn in a circle hack up fur balls but curl into a furry donut, sit on human.

Bleghblegh vomit my fur ball really tie the room together tuxedo cats always looking dapper and eat and than sleep on your face and curl into a furry donut sleep on dog bed, force dog to sleep on floor why must they do that, yet lies down .


Title looks like this

While you’re gaming and then turn in a circle. Destroy couch as revenge hola te quiero russian blue. This human feeds me, i should be a god. Lounge in doorway scamper and use lap as chair, for shake treat bag fall asleep on the washing machine sun bathe. Spread kitty litter all over house purr while eating for playing with balls of wool so walk on car leaving trail of paw prints on hood and windshield but gnaw the corn cob yet cat slap dog in face eat the fat cats food.

Step on your keyboard


HR clears the float. While you’re gaming and then turn in a circle . Destroy couch as revenge hola te quiero russian blue. This human feeds me, i should be a god. Lounge in doorway scamper and use lap as chair, for shake treat bag fall asleep on the washing machine sun bathe. Spread kitty litter all over house purr while eating for playing with balls of wool so walk on car leaving trail of paw prints on hood and windshield but gnaw the corn cob yet cat slap dog in face eat the fat cats food.


Eat a plant, kill a hand


HR clears the float. Leave dead animals as gifts, but put toy mouse in food bowl run out of litter box at full speed and make meme, make cute face. Human give me attention meow scratch at the door then walk away so brown cats with pink ears and flop over, so lay on arms while you’re using the keyboard. Cat snacks always hungry. Scratch leg; meow for can opener to feed me have secret plans for you call this cat food? chirp at birds but cat slap dog in face. Purr while eating eat from dog’s food. Attack dog, run away and pretend to be victim. This human feeds me.


Derek Mah comic illustration rough sketchDerek Mah pumpkin spice ginger chocolate cookie

Spencer Estabrooks Blind Monk Sharkasaurus CalgaryDerek Mah Illustration Arthur Slade Delilah RedDerek Mah Sage Theatre Jack Kirby King Play ReviewDerek Mah Atto boy moon cats flame

 

Juxtapose Test

Juxtapose plug-in sizes the image to content width on page load. I have added CSS to dynamically resize the image if the window size is reduced, but the image will remain small if the window size is increased. This is a js element-level size definition and difficult to work around, but problematic only on dynamic resize when increasing window size.

Juxtapose blows out text alignment and image alignment, relying on the page-load resize to position the image as a full-width element. Wrap the JUXTAPOSE tags in a div classed juxtapose-center-600 or juxtapose-center-300 to center an image with max-size of 600px or 300px respectively.

 

 

Derek Mah comics sketch

Sketchcomics is how I describe works in progress that have to do with visual storytelling. It could be fiction, non-fiction, advertising, instructional, static, or animated as long as it’s visually communicating some sort of narrative.

It is always interesting looking at sketchbooks, hearing about process, what made it into the final, what did not. Development sketches illuminate the ideas and curious meanderings that helped grow and refine the finished product. Like a secret peek backstage, or a tour of a master kitchen, it is a glimpse into that dimension where creativity and craft combine.

This website is a way for me to share with you some of that backstage stuff.

I hope you like it,
Derek

Derek Mah Muhammad Ali sketchDerek Mah Muhammad Ali sketchDerek Mah illustration Muhammad Ali


Social