Riccardo: what I learnt on Bootstrap (HBS)

HBS (Hugo Bootstrap Theme) is a spectacular Theme leveraging Bootstrap.

Useful links

Base Markdown HBS info: https://hbs.razonyang.com/v1/en/posts/markdown-syntax
Image processing (only when you got images to work :P)

Images tests

I was unable to import images from Local folder, unless its called featured-sample.jpg or featured-sample.webp, then it picks it up automagically. Pretty neat.

It tells you how to put images left, right, up, down, but not to fit with text which is my fav features. Dammit.

. lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum lorem ipsum

Yes, exactly.

Resize lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum

anche la float end spinge. Boh I’m unable

test CSS / JS / bottstrap icons

Riccardo trying out icons as per LookNFeel docs:

Icon colors (non va 😭):

Ruby logo: https://www.schemecolor.com/ruby-logo-colors.php

Yellow google code and red Ruby gem is:

<i class="fab fa-google"  style="color: #F4B400"></i>
<i class="fas fa-gem"  style="color: #A91401"></i>

it works! I just had to enable unsafe thingy in config :)

Clock: GEM: X:

End of icons :/

From https://fontawesome.com/docs/web/setup/get-started :

Code tests

customCSS = ['foo.css', 'bar.css']
logo = '/images/logo.png'
[codeBlock]
  maxLines = 10

codeBlock:
  maxLines: 10
customCSS:
- foo.css
- bar.css
logo: /images/logo.png

{
   "codeBlock": {
      "maxLines": 10
   },
   "customCSS": [
      "foo.css",
      "bar.css"
   ],
   "logo": "/images/logo.png"
}

Test Gallery

Docs in here: https://hbs.razonyang.com/v1/en/docs/shortcodes/gallery/

Files:

RiccardoGoogleyBike.png           riccardo-giallo-raja-ampat.jpeg   riccardo-raja-ampat.jpeg
riccardo-2022.png                 riccardo-jogging-telaviv.jpeg     riccardo-rajaampat.png
riccardo-bicicletta-gugol.jpg     riccardo-jump-ironman.jpeg        riccardo-scuba-in-google.jpeg
riccardo-canary-ravenna.jpeg      riccardo-kids-christmas.jpeg      riccardo-smiles-swim-ironman.jpeg