Yolo is laser focused on static single page sites, and while anyone can Yolo, it’s purposely built for writers, techies, and picture taking folk.
I don’t always use single-page sites but when I do, I yolo.
Goals for Yolo
1. Live the best single page life.
Pamper single page sites like we pamper our pets.
2. Strive for simplicity.
No dependencies other than jekyll.
3. Make it customizable
Bring your own colors and fonts.
Table of Contents
Getting Started
You need jekyll.
git clone https://github.com/corbtastik/yolo.git
cd yolo
jekyll build
jekyll serve
Themes
Yolo doesn’t implement an “according to hoyle” gem based theme, but the colors and fonts can be customized as outlined below.
Note: “Theming” for Yolo is accomplished by providing a custom scss file in
_sass/yolo/themes
. Each theme must specify “light” and “dark” values to support switching between the two modes.
1. Create a new scss file for your theme.
# Use whatever NAME you like
make theme NAME=domino
2. Customize the theme values.
Color properties:
Light/Dark property | Description |
---|---|
*-primary-color |
Background color |
*-secondary-color |
Foreground color, text, tables |
*-accent-color |
Header color |
*-code-background-color |
Background color for code snippets |
*-code-color |
Text color for inline code & snippets |
*-link-color |
Hyperlink color |
*-sidebar-color |
Sidebar background color |
Font family properties:
Note: Add font-family in
_data/fonts.yml
to customize what fonts are available.
Font property | Description |
---|---|
family-primary |
Family for body and most text |
family-secondary |
Family for headers and accent text |
family-monospace |
Family for code |
Theme file:
$light-primary-color: #fff;
$light-secondary-color: #000;
$light-accent-color: #383838;
$light-code-background-color: #fff;
$light-code-color: #000;
$light-link-color: #2196f3;
$light-sidebar-color: #fff;
$dark-primary-color: #000;
$dark-secondary-color: #fff;
$dark-accent-color: #b3b2b2;
$dark-code-background-color: #000;
$dark-code-color: #fff;
$dark-link-color: #2196f3;
$dark-sidebar-color: #000;
$family-primary: "Open Sans", sans-serif;
$family-secondary: "Raleway", sans-serif;
$family-monospace: "Inconsolata", monospace;
3. Enable by setting site.style
in _config.yml
.
# Site customizations
style: domino
That’s it, run Yolo and adjust colors to your liking.
Colors
Yolo’s colors can be customized as outlined in Yolo Themes.
Typography
Yolo’s fonts can be customized as outlined in Yolo Themes.
Three families
- Primary Font Family - body and most text
- Secondary Font Family - headers and accent text
- Monospaced Font Family - code
Primary
- This is-size-7 text.
- This is-size-6 text.
- This is-size-5 text.
- This is-size-4 text.
- This is-size-3 text.
- This is-size-2 text.
- This is-size-1 text.
Secondary
- This is-size-7 text.
- This is-size-6 text.
- This is-size-5 text.
- This is-size-4 text.
- This is-size-3 text.
- This is-size-2 text.
- This is-size-1 text.
Monospace
- This is-size-7 text.
- This is-size-6 text.
- This is-size-5 text.
- This is-size-4 text.
- This is-size-3 text.
- This is-size-2 text.
- This is-size-1 text.
Elements
Headers
H1 is reserved for the site header and not shown here.
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Paragraph text
Baseball is a bat-and-ball sport played between two teams of nine players each, taking turns batting and fielding. The game is in play when a player on the fielding team, called the pitcher, throws a ball that a player on the batting team tries to hit with a bat. The objective of the offensive team (batting team) is to hit the ball into the field of play, away from the other team’s players, allowing its players to run the bases, having them advance counter-clockwise around four bases to score what are called “runs”. - copied from Wikipedia.
Blockquotes
Single Blockquote
In the United States and Canada, professional Major League Baseball (MLB) teams are divided into the National League (NL) and American League (AL), each with three divisions: East, West, and Central. The MLB champion is determined by playoffs that culminate in the World Series.
Two paragraph Blockquote
A baseball game is played between two teams, each usually composed of nine players, that take turns playing offense (batting and baserunning) and defense (pitching and fielding).
The game is played on a field whose primary boundaries, the foul lines, extend forward from home plate at 45-degree angles. The 90-degree area within the foul lines is referred to as fair territory; the 270-degree area outside them is foul territory.
Nested Blockquote
The number of players on a baseball roster, or squad, varies by league and by the level of organized play. A Major League Baseball (MLB) team has a roster of 25 players with specific roles. A typical roster features the following players:
Eight position players: the catcher, four infielders, and three outfielders—all of whom play on a regular basis.
Most baseball leagues worldwide have the DH rule.
Blockquote w/ markdown
Baseball Statistics
- At Bats: Plate appearances, excluding walks and hit by pitches.
- Hits: Number of times a base is reached safely.
- Runs: Number of times runners reach home safely.
- RBIs: Number of runners who scored due to a batter’s action.
- Home Runs: Hits where the batter touches all four bases safely.
- Batting Average: Hits divided by at bats.
Inline Text
- Just plain text
- Bold text
- Italicize text
- Abbr (abbreviation)
- Citation
Deleted- Underlined
- Superscript text
- Subscript text
- Inline code
SELECT * FROM players;
Code
Tip: Click header to copy a snippet.
#!/bin/bash
function say_howdy() {
echo "Howdy $1!"
}
if [ $# -ne 1 ]; then
echo "Usage: Howdy <NAME>"
exit 1
fi
# Say Howdy
say_howdy $1
#include <stdio.h>
// Say Howdy
int main(int argc, char **argv) {
if(argc != 2) {
printf("Usage: Howdy <NAME>");
return 1;
}
printf("Howdy %s!\n", argv[1]);
return 0;
}
#include <iostream>
using namespace std;
int main(int argc, char** argv) {
if(argc != 2) {
cout << "Usage: Howdy <NAME>";
return 1;
}
cout << "Howdy " << argv[1];
return 0;
}
import 'dart:io';
// Say Howdy
void main(List<String> args) {
exitCode = 0;
if(args.length != 1) {
stdout.writeln("Usage: Howdy <NAME>");
exitCode = 1;
return;
}
stdout.writeln("Howdy ${args[0]}!");
}
package main
import (
"os"
"fmt"
)
// Say Howdy
func main () {
if len(os.Args) != 2 {
fmt.Println("Usage: Howdy <NAME>")
os.Exit(1)
}
fmt.Println("Howdy " + os.Args[1] + "!")
os.Exit(0)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Howdy!</title>
</head>
<body>
<h1>Howdy from an HTML page!</h1>
</body>
</html>
{
"apiVersion": "v1",
"kind": "Service",
"metadata": {
"name": "minio-server-lb",
"namespace": "minio",
"labels": {
"app/name": "minio"
}
},
"spec": {
"ports": [{
"port": 9000,
"targetPort": 9000,
"protocol": "TCP"
}],
"selector": {
"app/name": "minio",
"app/component": "backend"
},
"type": "LoadBalancer"
}
}
// Say Howdy
public class Howdy {
public static void main(String[] args) {
if(args.length != 1) {
System.out.println("Usage: Howdy <NAME>");
System.exit(1);
}
System.out.println("Howdy " + args[0] + "!");
}
}
function sayHowdy(name) {
console.log("Howdy " + name + "!");
}
if(process.argv.length != 3) {
console.log("Usage: Howdy <NAME>");
process.exit(1);
}
// Say Howdy
sayHowdy(process.argv[2]);
// Say Howdy
fun main(args: Array<String>): Int {
if(args.size != 1) {
println("Usage: Howdy <NAME>")
return 1
}
println("Howdy " + args[0] + "!")
return 0
}
# Markdown
* __Howdy__
* _from_
* <ins>a</ins>
* [Markdown](https://en.wikipedia.org/wiki/Markdown)
* `document`!
import sys
def sayHowdy(name):
print("Howdy " + name + "!")
if len(sys.argv) != 2:
print("Usage: Howdy <NAME>")
sys.exit(1)
# Say Howdy
sayHowdy(sys.argv[1])
.light-theme {
color: $light-secondary-color;
background-color: $light-primary-color;
font-family: $family-primary;
a {
color: $light-link-color;
}
h1, h2, h3, h4, h5, h6 {
color: $light-accent-color;
font-family: $family-secondary, sans-serif;
}
}
-- Select orders for micky
SELECT *
FROM orders
WHERE cust_id = "mickey@mouse.com"
AND price > 5000
AND price <= 10000
apiVersion: v1
kind: Service
metadata:
name: minio-server-lb
namespace: minio
labels:
app/name: minio
spec:
ports:
- port: 9000
targetPort: 9000
protocol: TCP
selector:
app/name: minio
app/component: backend
type: LoadBalancer
Lists
Unordered
- Arlington Stadium
- Rangers Ballpark in Arlington
-
Ebbets Field
- Boston Red Stockings
- Boston Red Caps
- Boston Beaneaters
- Boston Red Sox
- Boston Beaneaters
- Boston Red Caps
Ordered
- Babe Ruth
- Willie Mays
- Dale Murphy
- Mookie Wilson
Tables
Basic
Player | BA | HR |
---|---|---|
Hank Aaron | .305 | 755 |
Babe Ruth | .342 | 714 |
Mookie Wilson | .274 | 67 |
Formatted content
Command | Description |
---|---|
git rm |
|
git status |
List all new or modified files |
git diff |
Show file differences that haven’t been staged |
Cell alignment
Left-aligned | Center-aligned | Right-aligned |
---|---|---|
git status |
git status |
git status |
git diff |
git diff |
git diff |
Markdown Images
Images added via markdown receive styling from the
<img>
element, they’re not styled withyolo
classes.
![Moonie Moonpie](assets/images/moonpie.png "Sweet Moonpie")
![BIG yawn Bucky](assets/images/bucky.png "Sleepy Bucky")
Styled Images
You can use yolo Styled Images in addition to markdown images if you’re looking for a little eye-candy. Yolo includes support for common aspect ratios, an image-grid and image-lightbox.
- Thumbnail Images
- Square Images
- Circle Images
- 4-by-3 Images
- 3-by-4 Images
- 16-by-9 Images
- 9-by-16 Images
Thumbnail Images
Thumbnails are 128px x 128px and use the thumbnail
class.
{%
include image/image.html
classes="thumbnail"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/big-face-bucky.png"
%}
Tip: Click to enlarge.
Square Images
Square images can be added with the following classes: is-16
, is-24
, is-32
, is-48
, is-64
, is-96
, is-128
,
is-192
, is-256
, is-384
, is-448
, is-512
, is-640
.
{%
include image/image.html
classes="image is-256"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/drive-in.png"
%}
Tip: Click to enlarge.
Circle Images
Circle images can be added with the following classes: is-circle-16
, is-circle-24
, is-circle-32
,
is-circle-48
, is-circle-64
, is-circle-96
, is-circle-128
, is-circle-192
, is-circle-256
, is-circle-384
,
is-circle-448
, is-circle-512
, is-circle-640
.
{%
include image/image.html
classes="is-circle-256"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/big-face-bucky.png"
%}
Tip: Click to enlarge.
4-by-3 Images
4 by 3 aspect ratio images can be added with the following classes: is-100-by-75
, is-120-by-90
, is-128-by-96
,
is-160-by-120
, is-200-by-150
, is-240-by-180
, is-256-by-192
, is-320-by-240
, is-400-by-300
,
is-480-by-360
, is-512-by-384
, is-640-by-480
.
{%
include image/image.html
classes="image is-256-by-192"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}
Tip: Click to enlarge.
3-by-4 Images
3 by 4 aspect ratio images can be added with the following classes: is-75-by-100
, is-90-by-120
, is-96-by-128
,
is-120-by-160
, is-150-by-200
, is-180-by-240
, is-192-by-256
, is-240-by-320
, is-300-by-400
,
is-360-by-480
, is-384-by-512
, is-480-by-640
.
{%
include image/image.html
classes="image is-240-by-320"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}
Tip: Click to enlarge.
16-by-9 Images
16 by 9 aspect ratio images can be added with the following classes: is-112-by-63
, is-128-by-72
, is-144-by-81
,
is-160-by-90
, is-192-by-108
, is-224-by-126
, is-256-by-144
, is-320-by-180
, is-400-by-225
, is-480-by-270
,
is-512-by-288
, is-640-by-360
.
{%
include image/image.html
classes="image is-256-by-144"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}
Tip: Click to enlarge.
9-by-16 Images
9 by 16 aspect ratio images can be added with the following classes: is-63-by-112
, is-72-by-128
, is-81-by-144
,
is-90-by-160
, is-108-by-192
, is-126-by-224
, is-144-by-256
, is-180-by-320
, is-225-by-400
, is-270-by-480
,
is-288-by-512
, is-360-by-640
.
{%
include image/image.html
classes="image is-225-by-400"
src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}
Tip: Click to enlarge.
Image Grid
The Image Grid is similar to the Lightbox, except it shows images inline, instead of in a modal.
Tip: Click an image to enlarge, click again to minimize.
- Add image data into
_data/ig-images.yml
. - Include
image/grid.html
on your page.
Default data file
The _data/ig-images.yml
file is the default data file, just replace with your data to display images.
{% include "image/grid.html" %}
![Greetings from Marfa, Texas!](https://storage.googleapis.com/corbs-foto/yolo/marfa/greetings-from-marfa.jpg)
![Welcome to Marfa!](https://storage.googleapis.com/corbs-foto/yolo/marfa/welcome-to-marfa.jpg)
![Presidio County Courthouse.](https://storage.googleapis.com/corbs-foto/yolo/marfa/court-house.jpg)
![Hotel Paisano at nite, what a beauty.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-at-nite.jpg)
![Golden range outside of Marfa, TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/golden-range.jpg)
![Cotton candy dipped cone at DQ in Marfa.](https://storage.googleapis.com/corbs-foto/yolo/marfa/cotton-candy-cone.jpg)
![The Get Go, get in, get go, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/the-get-go.jpg)
![Stardust Motel sign, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/stardust-motel.jpg)
![Tumbleweed gonna tumble.](https://storage.googleapis.com/corbs-foto/yolo/marfa/tumbleweed.jpg)
![Hotel Paisano courtyard from our room.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-courtyard.jpg)
![The ole silver Marfa water tower.](https://storage.googleapis.com/corbs-foto/yolo/marfa/marfa-water-tower.jpg)
![Big sky, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/big-sky-marfa.jpg)
![Greetings from Marfa, Texas!](https://storage.googleapis.com/corbs-foto/yolo/marfa/greetings-from-marfa.jpg)
Greetings from Marfa, Texas!
![Welcome to Marfa!](https://storage.googleapis.com/corbs-foto/yolo/marfa/welcome-to-marfa.jpg)
Welcome to Marfa!
![Presidio County Courthouse.](https://storage.googleapis.com/corbs-foto/yolo/marfa/court-house.jpg)
Presidio County Courthouse.
![Hotel Paisano at nite, what a beauty.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-at-nite.jpg)
Hotel Paisano at nite, what a beauty.
![Golden range outside of Marfa, TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/golden-range.jpg)
Golden range outside of Marfa, TX.
![Cotton candy dipped cone at DQ in Marfa.](https://storage.googleapis.com/corbs-foto/yolo/marfa/cotton-candy-cone.jpg)
Cotton candy dipped cone at DQ in Marfa.
![The Get Go, get in, get go, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/the-get-go.jpg)
The Get Go, get in, get go, Marfa TX.
![Stardust Motel sign, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/stardust-motel.jpg)
Stardust Motel sign, Marfa TX.
![Tumbleweed gonna tumble.](https://storage.googleapis.com/corbs-foto/yolo/marfa/tumbleweed.jpg)
Tumbleweed gonna tumble.
![Hotel Paisano courtyard from our room.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-courtyard.jpg)
Hotel Paisano courtyard from our room.
![The ole silver Marfa water tower.](https://storage.googleapis.com/corbs-foto/yolo/marfa/marfa-water-tower.jpg)
The ole silver Marfa water tower.
![Big sky, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/big-sky-marfa.jpg)
Big sky, Marfa TX.
Custom data file
A custom data file can be added to create an Image Grid.
- Create a new file in
_data/
and prefix name withig-
. - Use the data file name (w/o
.yml
ext) as the value toig-data
. - Customize the number of columns by setting
ig-columns
.
{% include image/grid.html ig-data="ig-pets" ig-columns="2" %}
![Texas Ranger Bucky.](https://storage.googleapis.com/corbs-foto/yolo/yolo/ranger-bucky.png)
![R.I.P. Nachooooooo!!!](https://storage.googleapis.com/corbs-foto/yolo/yolo/nacho.png)
![Moonpie the house kitty, we see your poochie poo!](https://storage.googleapis.com/corbs-foto/yolo/yolo/moonpie-house-cat.png)
![Bucky itches his nose.](https://storage.googleapis.com/corbs-foto/yolo/yolo/traveling-bucky.png)
![Texas Ranger Bucky.](https://storage.googleapis.com/corbs-foto/yolo/yolo/ranger-bucky.png)
Texas Ranger Bucky.
![R.I.P. Nachooooooo!!!](https://storage.googleapis.com/corbs-foto/yolo/yolo/nacho.png)
R.I.P. Nachooooooo!!!
![Moonpie the house kitty, we see your poochie poo!](https://storage.googleapis.com/corbs-foto/yolo/yolo/moonpie-house-cat.png)
Moonpie the house kitty, we see your poochie poo!
![Bucky itches his nose.](https://storage.googleapis.com/corbs-foto/yolo/yolo/traveling-bucky.png)
Bucky itches his nose.
Image Lightbox
Yolo includes a Lightbox to showcase pics.
Tip: Click an image to open Lightbox, click left or right, key
<
or>
to move.
- Add image data into
_data/lb-images.yml
. - Include
image/lightbox.html
on your page.
Default data file
The _data/lb-images.yml
file is the default Lightbox data file, just replace with your data to display images.
{% include image/lightbox.html %}
![A little bit of France in Texas - Paris, Texas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/paris-texas.png)
![Apple strikes again.](https://storage.googleapis.com/corbs-foto/yolo/yolo/macpro.png)
![Porky makes some goooooood BBQ!](https://storage.googleapis.com/corbs-foto/yolo/yolo/porky.png)
![A Texas Bluebonnet.](https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png)
![Texas Ranger Bucky.](https://storage.googleapis.com/corbs-foto/yolo/yolo/ranger-bucky.png)
![Little red camero, you need a love that's gonna last.](https://storage.googleapis.com/corbs-foto/yolo/yolo/red-camero.png)
![Turning, turning, turning...and turning.](https://storage.googleapis.com/corbs-foto/yolo/yolo/west-texas-wind-turbines.png)
![R.I.P. Nachooooooo!!!](https://storage.googleapis.com/corbs-foto/yolo/yolo/nacho.png)
![Christmas at Campo Verde.](https://storage.googleapis.com/corbs-foto/yolo/yolo/two-santas.png)
![Fry that bird, fry that bird, fry that bird!](https://storage.googleapis.com/corbs-foto/yolo/yolo/turkey.png)
![Mustang GT at the Gasquatch.](https://storage.googleapis.com/corbs-foto/yolo/yolo/mustang-gt.png)
![Devils Tower, Wyoming.](https://storage.googleapis.com/corbs-foto/yolo/yolo/devils-tower.png)
![A winter tree in Dallas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/winter-tree.png)
![Moonpie the house kitty, we see your poochie poo!](https://storage.googleapis.com/corbs-foto/yolo/yolo/moonpie-house-cat.png)
![Mount Rushmore National Monument, South Dakota.](https://storage.googleapis.com/corbs-foto/yolo/yolo/mount-rushmore.png)
![Dairy Palace, Canton Texas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/dairy-palace.png)
![Big sky over Texas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/big-sky.png)
![I see you!](https://storage.googleapis.com/corbs-foto/yolo/yolo/morning-moonpie.png)
![Guadalupe Mountains National Park, Texas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/guadalupe-mountains.png)
![My all time favorite painting.](https://storage.googleapis.com/corbs-foto/yolo/yolo/best-painting-ever.png)
![Justa good ole Texas evening.](https://storage.googleapis.com/corbs-foto/yolo/yolo/texas-evening.png)
![Bucky itches his nose.](https://storage.googleapis.com/corbs-foto/yolo/yolo/traveling-bucky.png)
![Momma I wanna go fast.](https://storage.googleapis.com/corbs-foto/yolo/yolo/blue-camero.png)
![Bucky needs a nap.](https://storage.googleapis.com/corbs-foto/yolo/yolo/bucky-sleepy.png)
![Broken Bow river, Oklahoma.](https://storage.googleapis.com/corbs-foto/yolo/yolo/broken-bow-river.png)
![Sky Vue Drive-in, Lamesa Texas.](https://storage.googleapis.com/corbs-foto/yolo/yolo/drive-in.png)
![Fall foliage in Broken Bow.](https://storage.googleapis.com/corbs-foto/yolo/yolo/yellow-tree.png)
![Big face Bucky goes for a ride.](https://storage.googleapis.com/corbs-foto/yolo/yolo/big-face-bucky.png)
Custom data file
A custom data file can be added to create a Lightbox.
- Create a new file in
_data
and prefix name withlb-
. - Use the data file name (w/o
.yml
ext) as the value tolb-data
.
{% include image/lightbox.html lb-data="lb-marfa" %}
![Greetings from Marfa, Texas!](https://storage.googleapis.com/corbs-foto/yolo/marfa/greetings-from-marfa.jpg)
![Welcome to Marfa!](https://storage.googleapis.com/corbs-foto/yolo/marfa/welcome-to-marfa.jpg)
![Presidio County Courthouse.](https://storage.googleapis.com/corbs-foto/yolo/marfa/court-house.jpg)
![Hotel Paisano at nite, what a beauty.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-at-nite.jpg)
![Golden range outside of Marfa, TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/golden-range.jpg)
![Cotton candy dipped cone at DQ in Marfa.](https://storage.googleapis.com/corbs-foto/yolo/marfa/cotton-candy-cone.jpg)
![The Get Go, get in, get go, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/the-get-go.jpg)
![Stardust Motel sign, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/stardust-motel.jpg)
![Tumbleweed gonna tumble.](https://storage.googleapis.com/corbs-foto/yolo/marfa/tumbleweed.jpg)
![Hotel Paisano courtyard from our room.](https://storage.googleapis.com/corbs-foto/yolo/marfa/hotel-paisano-courtyard.jpg)
![The ole silver Marfa water tower.](https://storage.googleapis.com/corbs-foto/yolo/marfa/marfa-water-tower.jpg)
![Big sky, Marfa TX.](https://storage.googleapis.com/corbs-foto/yolo/marfa/big-sky-marfa.jpg)
Videos
Pet Friends 2020, a bad year for people, purfect for pets!
Some kitties chase lasers, this one chases cursors.
Prezos
Yolo has basic support for embedding Google Slides.
- Enter prezo data into
_data/prezos.yml
- Include
prezo.html
on your page. - Set
title
value to match prezo in_data/prezos.yml
. - By default, prezos are displayed with a
is-16-by-9
aspect ratio. - Optionally set
aspect-ratio
tois-16-by-9
,is-4-by-3
, oris-1-by-1
.
Sample 1
{% include prezo.html title="blinged-macmini" %}
Aspect ratio
is-16-by-9
.
A blinged out Mac Mini development box.
Sample 2
{% include prezo.html title="one-awesome-prezo" aspect-ratio="is-4-by-3" %}
Aspect ratio
is-4-by-3
.
One Awesome Prezo!
Sample 3
{% include prezo.html title="yolo-on" aspect-ratio="is-1-by-1" %}
Aspect ratio
is-1-by-1
.
Get ya some Yolo!
Containers
This section “contains” information on building and running your single page Yolo site as a container.
The project
Makefile
includes targets for building a container with podman.
Tools
- Podman
- Make (optional but recommended)
Two container images are built using the Makefile.
- The first is
yoloc
which is a “builder” image, to “build” your site. - The second is
yolo
, to “run” your site.
yoloc
Yoloc is a “builder” image based on ubi8-minimal, with the following packages added:
- gcc
- gcc-c++
- make
- ruby
- ruby-devel
- jekyll
Yoloc isn’t a runtime image, meaning it doesn’t run a server process, it’s a build time image, with the tooling needed to run
jekyll build
. The output_site
will be passed to theyolo
container, where it’s served by apache httpd.
yolo
The Yolo image is a runtime image based on ubi8-minimal, with apache httpd installed. Your yolo _site
is configured in /var/www/html
where it’s served by apache on port 9696
.
Building and running
# First build yoloc
podman build -f ./src/yoloc.Containerfile -t yoloc:latest ./src
# Then build yolo
podman build -f Containerfile -t yolo:latest .
# Now run and access on http://localhost:9696
podman run --name yolo -d -p 9696:9696 yolo:latest
The Makefile
automates the build and run process, with make yolo-pod
, which:
- Creates the
yoloc
image. - Uses
yoloc
to build your_site
. - Creates the
yolo
image to run your site. - Starts a yolo container from the
yolo
image, onhttp://localhost:9696
.
# Build and run with make
make yolo-pod
Thanks
I’m a developer by trade with roots in C and Java. I once read something like - “write code every day” and although I haven’t, I like to try. I enjoy frontend development but consider myself a hack. I get by, but get by with a little help from my friends.
Many thanks for these resources and the folks behind them.
w3schools
When I want an unvarnished take on HTML, CSS, and Javascript I go to w3schools. That and every time I google for frontend related stuff w3schools comes up. Great reference material, some of which guided the Yolo Lightbox implementation.
Sanks w3schools people.
Solo
Years ago I googled “minimal jekyll theme”, which led me to Solo. It was exactly what I was looking for, simple to get started and customize. Not to mention there’s a quirky beauty in its look. Over the years I’ve used Solo for single page “technical” docs.
Yolo is cut from the cloth of “Solo” which was previously developed by Shu Uesugi.
Well done Shu Uesugi, sanks amigo.
Bulma
“The modern CSS framework that just works”, true dat. Bulma is not included as a library, but Yolo contains slightly modified scss from select areas, namely flexbox, typography and image styling. For my tastes Bulma is the best css framework, they be awesome yo.
Sanks Bulma people.
License
MIT License (MIT)
Copyright (c) 2022 Corbs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.