This page contains code conventions and documentation that wrapped by style guide. The style here only applied to post layout. The reason not to set specific style on default layout is because each of the element need specific style. They are only had very mininum styling.

Top Level Header (H1) #

A header always use a serif font, the content body always use a sans font, except for inline code and code block.

The global style base doesn’t set the margin and padding for any element. You need to add them inline. All the styling must be done inline except styles that are not supported by tailwind, such as grid definitions.^[1]

For repeated component, extract them to external style.

All the inline utility class must be ordered this way:

• Positioning/visibility
• Box model
• Borders
• Backgrounds
• Typography
• other

mt-4 mb-2 box-border border-t bg-primary font-serif font-light

Prefer to use mt-* and mb- so that the styling only affect current element.

All the utility clases that only apply to certain breakpoinst must be set explicitly:

mt-4 lg:flex lg:flex-col

Second Level Header (H2) #

Do you know that, I am a link, and I am the inline code.

I am the plain code block

The code above doesn’t specify the language, Now let’s add them:

I am the code block with highlight

Highlight some line:

(defun rm-mysecrets ()
  "Remove all confidential information."
  (interactive)
  (dolist (pair (list-my-secrets))
    (save-excursion
      (replace-string (car pair) (cdr pair)))))

Showing some diff:

+ (defun rm-mysecrets ()
  "Remove all confidential information."
  (interactive)
-  (dolist (pair (list-my-secrets))
    (save-excursion
      (replace-string (car pair) (cdr pair)))))

what about a very long lines of code:

mobile-nav fixed left-0 top-0 h-screen w-full overflow-y-auto pt-12 bg-inverse

Now I want to show you a list style:

• A Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm
• B Aft mutiny ahoy prow bilge holystone barkadeer hang the jib hail-shot Nelsons folly.
  • b1 Lugsail trysail ye deadlights hornswaggle Blimey ahoy crimp Admiral of the Black furl.
    • b21 Nipperkin Buccaneer doubloon topgallant Letter of Marque lanyard heave down lad weigh anchor topmast.
      • b31 Transom topmast landlubber or just lubber fore run a shot across the bow grog blossom bring a spring upon her cable
• C

what about ordered:

1. A Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm

2. B Aft mutiny ahoy prow bilge holystone barkadeer hang the jib hail-shot Nelsons folly.

3. b1 Lugsail trysail ye deadlights hornswaggle Blimey ahoy crimp Admiral of the Black furl.

   1. b21 Nipperkin Buccaneer doubloon topgallant Letter of Marque lanyard heave down lad weigh anchor topmast.

      1. b31 Transom topmast landlubber or just lubber fore run a shot across the bow grog blossom bring a spring upon her cable

4. C

without further due. Now divide me with other text using hr:

Viola!, a hr.

Used font weight:

Third Level Header (H3) #

This is a custom width and full width figure:

custom width figure are specified using figure tag and inline max-width style:

<figure class="fig-custom" style="max-width: 360px">
  <img data-lazy="/images/posts/fox-1.webp" />
</figure>

For full width figure, just go with fig-full class.

<figure class="fig-custom" style="max-width: 360px">
  <img data-lazy="/images/posts/fox-1.webp" />
</figure>

All the images here are lazy loaded.

Fourth Level Header (H4) #

Let’s show some more element in this fourth header.

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl.

One nice things to inform reader about tips and warning is using text with different background color, ala addminition:

<div class="bg-inverse-soft px-2 py-2 rounded">
  <i class="twa twa-warning"></i><strong> Warning</strong>: Need to chase tail it's 3am,
  time to create some chaos eat the rubberband so throwup on your pillow. Lick butt ignore
  the human until she needs to get up.
</div>

And this is the plain version:

Pro tip: You can subscribe using RSS feed at the bottom of the page to get notified about new updates.

Footnotes