https://bennettfeely.com/usa-css/

1<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>USA.css</title><meta content="The most American CSS stylesheet. Style your webpage with the stars and stripes as CSS backgrounds. All units are set in inches. Total size: 1776 bytes." name="description"><link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><meta content="#ffffff" name="theme-color"><link href="css/style.min.css" rel="stylesheet"><link href="usa.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&amp;display=swap" rel="stylesheet"><!--
2
3
4    Have I not commanded you? Be strong and 
5    courageous. Do not be afraid; do not be 
6    discouraged, for the LORD your God will 
7    be with you wherever you go.
8
9    Joshua 1:9
10
11
12--></head><body><div class="usa-radial banner"></div><header><div class="wrapper"><div class="container"><h1>USA.css</h1><h2>The most American CSS stylesheet. Style your webpage with the stars and stripes as CSS backgrounds. Units are set in inches.</h2><div class="download-wrapper"><a class="button primary" href="usa.min.css"><span class="download">Download usa.min.css</span> (1776 bytes)</a><a class="button" href="src/usa.css"><span class="download">Download usa.css</span></a></div><div class="repo-wrapper"><div class="repo" data-repo="bennettfeely/usa-css"><div class="repo-box"><div class="repo-title"><a class="repo-author" href="https://github.com/bennettfeely">bennettfeely</a> / <a class="repo-name" href="https://github.com/bennettfeely/usa-css">usa-css</a></div><a class="repo-meta" href="https://github.com/bennettfeely/usa-css"><span class="repo-stars">1 star</span><span class="repo-license">MIT</span><span class="repo-updated">1 week ago</span></a></div></div></div><div class="share-wrapper"><div id="fb-root"></div>

12<script async defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0&appId=247433128675302" nonce="Gy2FThBp"></script>

12<script async="true" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

12<div class="fb-like facebook-share-button share" data-action="like" data-href="https://bennettfeely.com/usacss" data-layout="button_count" data-share="false" data-size="large" data-width="100"></div><a class="twitter-share-button share" data-dnt="true" data-show-count="true" data-size="large" data-text="USA.css – The most American CSS stylesheet. All units in inches, only 1776 bytes" href="https://twitter.com/share?ref_src=twsrc%5Etfw">Tweet</a></div></div></div></header><main><div class="wrapper"><div class="container"><figure class="pattern"><div class="pattern-preview usa-stars"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-stars</span> {<button class="pattern-show-css-button" data-show=".usa-stars-css">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-stars</span> {</div><div>	<span class="property">background</span>: <span class="function">linear-gradient</span>(<span class="unit">324deg</span>, <span class="color">#3c3b6e</span> <span class="unit">4%</span>, <span class="color">transparent</span> <span class="unit">4%</span>) <span class="unit">-0.7in 0.43in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">36deg</span>, <span class="color">#3c3b6e</span> <span class="unit">4%</span>, <span class="color">transparent</span> <span class="unit">4%</span>) <span class="unit">0.3in 0.43in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">72deg</span>, <span class="color">#fff</span> <span class="unit">8.5%</span>, <span class="color">transparent</span> <span class="unit">8.5%</span>) <span class="unit">0.3in 0.43in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">288deg</span>, <span class="color">#fff</span> <span class="unit">8.5%</span>, <span class="color">transparent</span> <span class="unit">8.5%</span>) <span class="unit">-0.7in 0.43in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">216deg</span>, <span class="color">#fff</span> <span class="unit">7.5%</span>, <span class="color">transparent</span> <span class="unit">7.5%</span>) <span class="unit">-0.7in 0.23in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">144deg</span>, <span class="color">#fff</span> <span class="unit">7.5%</span>, <span class="color">transparent</span> <span class="unit">7.5%</span>) <span class="unit">0.3in 0.23in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">324deg</span>, <span class="color">#3c3b6e</span> <span class="unit">4%</span>, <span class="color">transparent</span> <span class="unit">4%</span>) <span class="unit">-0.2in 0.93in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">36deg</span>, <span class="color">#3c3b6e</span> <span class="unit">4%</span>, <span class="color">transparent</span> <span class="unit">4%</span>) <span class="unit">0.8in 0.93in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">72deg</span>, <span class="color">#fff</span> <span class="unit">8.5%</span>, <span class="color">transparent</span> <span class="unit">8.5%</span>) <span class="unit">0.8in 0.93in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">288deg</span>, <span class="color">#fff</span> <span class="unit">8.5%</span>, <span class="color">transparent</span> <span class="unit">8.5%</span>) <span class="unit">-0.2in 0.93in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">216deg</span>, <span class="color">#fff</span> <span class="unit">7.5%</span>, <span class="color">transparent</span> <span class="unit">7.5%</span>) <span class="unit">-0.2in 0.73in</span>,</div><div>		<span class="function">linear-gradient</span>(<span class="unit">144deg</span>, <span class="color">#fff</span> <span class="unit">7.5%</span>, <span class="color">transparent</span> <span class="unit">7.5%</span>) <span class="unit">0.8in 0.73in</span>,</div><div>		<span class="color">#3c3b6e</span>;</div><div>	<span class="property">background-size</span>: <span class="unit">1in 1in</span>;</div><div>}</div></code></pre></figcaption></figure><figure class="pattern"><div class="pattern-preview usa-stripes-horizontal"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-stripes-horizontal</span> {<button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-stripes-horizontal</span> {</div><div>	<span class="property">background</span>: <span class="function">repeating-linear-gradient</span>(</div><div>		<span class="color">#b22234</span> <span class="unit">0</span>,</div><div>		<span class="color">#b22234</span> <span class="unit">0.2in</span>,</div><div>		<span class="color">#fff</span> <span class="unit">0.2in</span>,</div><div>		<span class="color">#fff</span> <span class="unit">0.4in</span></div><div>	);</div><div>}</div></code></pre></figcaption></figure><div class="ad">

12<script async="async" id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?serve=CKYIL27N&amp;placement=bennettfeelycom" type="text/javascript"></script>

12</div><figure class="pattern"><div class="pattern-preview usa-stripes-vertical"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-stripes-vertical</span> {<button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-stripes-vertical</span> {</div><div>		<span class="property">background</span>: <span class="function">repeating-linear-gradient</span>(</div><div>			<span class="unit">90deg</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0.2in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.2in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.4in</span></div><div>		);</div><div>}</div></code></pre></figcaption></figure><figure class="pattern"><div class="pattern-preview usa-diamond"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-diamond</span> {<button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-diamond</span> {</div><div>	<span class="property">background</span>: <span class="function">linear-gradient</span>(</div><div>			<span class="unit">45deg</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">25%</span>,</div><div>			<span class="color">transparent</span> <span class="unit">0</span>,</div><div>			<span class="color">transparent</span> <span class="unit">75%</span>,</div><div>			<span class="color">#3c3b6e</span> <span class="unit">0</span>,</div><div>			<span class="color">#3c3b6e</span></div><div>		),</div><div>		<span class="function">linear-gradient</span>(</div><div>			<span class="unit">-45deg</span>, </div><div>			<span class="color">#b22234</span> <span class="unit">25%</span>, </div><div>			<span class="color">transparent</span> <span class="unit">0</span>, </div><div>			<span class="color">transparent</span> <span class="unit">75%</span>, </div><div>			<span class="color">#3c3b6e</span> <span class="unit">0</span>, </div><div>			<span class="color">#3c3b6e</span></div><div>		), <span class="color">#fff</span>;</div><div>	<span class="property">background-position</span>: <span class="unit">50% 50%</span>;</div><div>	<span class="property">background-size</span>: <span class="unit">0.5in 0.5in</span>;</div><div>}</div></code></pre></figcaption></figure><figure class="pattern"><div class="pattern-preview usa-radial"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-radial</span> {<button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-radial</span> {</div><div>	<span class="property">background</span>: <span class="function">radial-gradient</span>(</div><div>			<span class="color">circle at</span> <span class="unit">50% 0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.2in</span>,</div><div>			<span class="color">#3c3b6e</span> <span class="unit">0</span>,</div><div>			<span class="color">#3c3b6e</span> <span class="unit">0.4in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.6in</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0.8in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">1.2in</span></div><div>		),</div><div>		<span class="color">#fff</span>;</div><div>	<span class="property">background-size</span>: <span class="unit">1.4in 100%</span>;</div><div>	<span class="property">background-position</span>: <span class="unit">50% 0</span>;</div><div>	<span class="property">background-repeat</span>: <span class="unit">repeat-x</span>;</div><div>}</div></code></pre></figcaption></figure><figure class="pattern"><div class="pattern-preview usa-plaid"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-plaid</span> {<button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-plaid</span> {</div><div>	<span class="property">background</span>: <span class="function">repeating-linear-gradient</span>(</div><div>			<span class="unit">45deg</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0</span>,</div><div>			<span class="color">#b22234</span> <span class="unit">0.2in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.25in</span>,</div><div>			<span class="color">

12transparent</span> <span class="unit">0</span>,</div><div>			<span class="color">transparent</span> <span class="unit">0.5in</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0</span>,</div><div>			<span class="color">#fff</span> <span class="unit">0.55in</span></div><div>		),</div><div>		<span class="function">repeating-linear-gradient</span>(</div><div>			<span class="unit">-45deg</span>,</div><div>			<span class="color">#3c3b6e</span>,</div><div>			<span class="color">#3c3b6e</span> <span class="unit">0.25in</span>,</div><div>			<span class="color">transparent</span> <span class="unit">0</span>,</div><div>			<span class="color">transparent</span> <span class="unit">0.4in</span></div><div>		),</div><div>		<span class="color">#fff</span>;</div><div>}</div></code></pre></figcaption></figure><figure class="pattern"><div class="pattern-preview usa-conic"></div><figcaption class="pattern-meta"><code class="pattern-snippet"><span class="class">.usa-conic</span> { <button class="pattern-show-css-button">Show CSS</button>}</code><pre class="pattern-css"><code><div><span class="class">.usa-conic</span> {</div><div>	<span class="comment">/* Conic gradients are not supported in some browsers (<a href="https://caniuse.com/#feat=css-conic-gradients">Caniuse</a>) */</span></div><div>	<span class="property">background</span>: <span class="function">repeating-conic-gradient</span>(</div><div>		<span class="color">#b22234</span> <span class="unit">0</span>,</div><div>		<span class="color">#b22234</span> <span class="unit">10deg</span>,</div><div>		<span class="unit">0</span>,</div><div>		<span class="color">#fff</span> <span class="unit">20deg</span>,</div><div>		<span class="unit">0</span>,</div><div>		<span class="color">#3c3b6e</span> <span class="unit">30deg</span>,</div><div>		<span class="unit">0</span>,</div><div>		<span class="color">#fff</span> <span class="unit">40deg</span></div><div>	);</div><div>}</div></code></pre></figcaption></figure></div></div></main><footer><div class="wrapper"><div class="container"><p>&copy; 2020 <a href="https://bennettfeely.com">Bennett Feely</a> (<a href="https://twitter.com/bennettfeely">@bennettfeely</a>)<br>Released July 4, 2020<br>God Bless America!</p></div></div></footer>

12<script>// GitHub.js
13      // See https://github.com/bennettfeely/ztext/blob/main/src/js/github.js
14      let right_now=new Date,times=[["second",1],["minute",60],["hour",3600],["day",86400],["week",604800],["month",2592e3],["year",31536e3]];function formatTime(e){e=new Date(e);for(var t=Math.round((right_now-e)/1e3),a=0;a<times.length;a++)if(t<times[a][1])return 0==a?"Just now":(t=Math.round(t/times[a-1][1]))+" "+times[a-1][0]+(1==t?" ago":"s ago")}function makeCard(e){let t=new XMLHttpRequest,a="https://api.github.com/repos/"+e;t.open("GET",a,!0),t.onload=function(){let t=JSON.parse(this.response),a=`<div class="repo-box">\n\t<div class="repo-title">\n\t\t<a class="repo-author" href="${t.owner.html_url}">${t.owner.login}</a> / <a class="repo-name" href="${t.html_url}">${t.name}</a>\n\t</div>\n\t<a href="${t.html_url}" class="repo-meta">\n\t\t<span class="repo-stars">${t.stargazers_count} stars</span>\n\t\t<span class="repo-license">MIT</span>\n\t\t<span class="repo-updated">${formatTime(t.pushed_at)}</span>\n\t</a>\n</div>`;document.querySelector(`[data-repo="${e}"]`).innerHTML=a},t.send()}document.querySelectorAll("[data-repo]").forEach((e=>{makeCard(e.dataset.repo)}));
15      // usa.css page functionality
16      const buttons = document.querySelectorAll(".pattern-show-css-button");
17      buttons.forEach((button) => {
18          button.addEventListener('click', () => {
19              const figure = button.parentNode.parentNode.parentNode;
20              figure.classList.add("is-showing-code");
21          });
22      });</script>

22<!-- GA -->

22<script async src="https://www.googletagmanager.com/gtag/js?id=

22UA-35724550-1

22"></script>

22<script>

22window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '

22UA-35724550-1

22');

22</script>

22</body></html>