anon987654321

#!/bin/bash

#!/usr/bin/env zsh
set -e

# Shared utility functions for Rails apps on OpenBSD 7.5, unprivileged user, NNG/SEO/Schema optimized

BASE_DIR="/home/dev/rails"
RAILS_VERSION="8.0.0"
RUBY_VERSION="3.3.0"

anon987654321

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Source+Serif+Pro:400,700" rel="stylesheet">

<div id="example">
  <h1>Lorem, ipsum consectetur adipisicing elit. Suscipit, mollitia?</h1>
  <p class="lead">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aperiam fuga laudantium asperiores odit! Iste laudantium corrupti sapiente, voluptatibus earum odio velit unde porro. Unde autem quos asperiores vitae iste.
  </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, eligendi reprehenderit eos impedit, accusantium modi magni nam provident obcaecati, magnam voluptatibus veritatis repellat. Ratione repudiandae natus nihil nisi porro exercitationem consequuntur necessitatibus enim sunt labore. Cumque odit necessitatibus alias quisquam. Iure magnam, distinctio ipsum consequuntur minima corrupti, tenetur et rem veritatis quibusdam deleniti, delectus illo. Quas corporis cum ducimus iure ratione molestiae rem iste

anon987654321

<h1>LOREM</h1><hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id velit eu enim lobortis bibendum ultrices eget nunc. Quisque pharetra cursus nisl, in consequat nibh euismod non. Mauris hendrerit semper venenatis. Donec fringilla metus vel nisl rhoncus, at placerat arcu faucibus. </p>


<h1 class="san">LOREM</h1><hr class="two">
<p class="san"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id velit eu enim lobortis bibendum ultrices eget nunc. Quisque pharetra cursus nisl, in consequat nibh euismod non. Mauris hendrerit semper venenatis. Donec fringilla metus vel nisl rhoncus, at placerat arcu faucibus. </p>

anon987654321

<h1>Native OS Driven Font-Stack</h1>
<p>This list of fonts will get the native sans-serif font for OSX, Windows 10, iOS, and Android<p>
<pre><code>
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
</code></pre>
<pre><code>
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome for OS X (San Francisco)
  BlinkMacSystemFont,

anon987654321

A Typography Style Guide: Sans Serif

A Pen by Justina V on CodePen.

License.

anon987654321

<blockquote>
	<p>Big type, even huge type, can be beautiful and useful. But poise is usually far&nbsp;more important than size – and poise consists primarily of emptiness. Typographically, poise is&nbsp;made of&nbsp;white&nbsp;space.</p>
	
	<footer>Robert Bringhurst</footer>
		
</blockquote>

anon987654321

A Typography Guide: Serif Families

A Pen by Justina V on CodePen.

License.

anon987654321

A Typography Style Guide: Sans Serif

A Pen by Justina V on CodePen.

License.

anon987654321

<blockquote>
	<p>Big type, even huge type, can be beautiful and useful. But poise is usually far&nbsp;more important than size – and poise consists primarily of emptiness. Typographically, poise is&nbsp;made of&nbsp;white&nbsp;space.</p>
	
	<footer>Robert Bringhurst</footer>
		
</blockquote>

anon987654321

<h1>Responsive Typography</h1>

<p>It appears that by using calc() and vw we can get responsive typography that scales perfectly between specific pixel values within a specific viewport range.</p>
<p>The problem with the common approach to responsive typography is that it is jumpy and requires a lot of media queries.</p>
<p>Viewport units are fluid but lack precise control over font-size.</p>
<p>Typically you might use a table like this to work out the range of font sizes across different resolutions.</p>
<table>
  <tbody>
    <tr>
      <th>Viewport units:</th><th>1vw</th><th>2vw</th><th>3vw</th><th>4vw</th><th>5vw</th>