Bootstrap 4 Theme
High-contrast theme with custom components that defaults to darkness Why?
$ git clone https://codeberg.org/eotl/theme-bootstrap.git
High-contrast theme with custom components that defaults to darkness Why?
$ git clone https://codeberg.org/eotl/theme-bootstrap.git
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
The following is rendered as monospace rendered text.
An abbreviation of the word attribute is attr.
Date [
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
By adding the class .display-1 through .display-4
to any element, the text contained renders with Roboto Bold
font. This overrides the monospaced font when used on
<h1> heading elements.
The .display-1 class
The .display-2 class
The .display-3 class
The .display-4 class
Unordered List
Ordered List
.list-unstyled class
Description Lists
Imagine, if only for one moment, how another world is possible.
// Simple Signed Records
function signRecord(record, {publicKey, secretKey, validSeconds = 15778800}) {
secretKey = decodeBase64(secretKey);
publicKey = decodeBase64(publicKey);
return ssr.sign({
record,
keypair: {secretKey, publicKey},
validSeconds,
});
}| Type | Column heading | Column heading | Column heading |
|---|---|---|---|
| Default | Column content | Column content | Column content |
| Links | Column content | Column content | Column content |
| Active | Column content | Column content | Column content |
| Primary | Column content | Column content | Column content |
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
This is a simple jumbotron-style component for calling extra attention to featured content.
It uses utility classes for typography and spacing to space content out within the larger container.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkAdd the .boxed class to elements h1, h2, h3, h4, h5, h6
Add the .list-arrows class to elements ul, ol
Default <hr> is a 1 px line
contrasts with the page color. Adding .light gets a
lighter version.
Adding .thick or .thick-light gets renders
4px height line
Collection of EOTL's iconset to be added...
The EOTL theme defaults to darkness i.e.
.dark-mode because we are
living in dark times. The children of 2010s were born into a
world of mass surveillance
and increasing mass
extinction. Meanwhile, America continued it's second decade of War on
Terror occupying the Middle East normalizing mechanized "drone warfare".
While the decade saw some mass movements, overall
the "masses" remained silent, complacent, or were satisifed with the neoliberal
hypercapitalist world order allowing it to roll on, as the planet got warmer.
Children born in 2020s entered a world deep in an information
war, the Covid-19 pandemic, and now the
first hot war in Europe since World War II has begun in Ukraine. The
end of the Israeli invasion of Gaza began, which seems
to be inching the Middle East into a newly reactivated regional war. It
is hard to see that we humans are not ensared in some sick
patterns and just plainly put- living wrong.
All the while, climate change, pollution, and bio-diversity loss are predicted to accelerate adding further stress to the global food supply chain. Tectonic shifts in previous orders are underway. Technologies are not neutral. As we build new systems, it is essential to remember this non-neutrality. Human society, technology, and the resources it requires us to extract from the earth are intrinsically linked. The code we write has politics. As we continue to destroy our natural habitat, our choices bring us closer to darkness or further away from it. For now EOTL defaults to darkness.
Including eotl.js in your website/app exposes custom JS
methods detailed below- but first, some propaganda
The meaningWhat() method invokes a cycle
style loop through a lists of possible meanings of the
EOTL acronym and a hyperlink to topic supporting content on the web.
The standard footer across EOTL apps and sites.
// JS
meaningWhat('#meaning-cycle')
// HTML
<div id="meaning-cycle" style="display:none;">
<div class="meaning-text"></div>
</div>Invoking method longNowify() appends a leading 0 to any numbers contained in
elements which are instantiated such as <time> or <date>
elements. This is a subtle nudge to make people ask the question: How Long is Now?
<date> elements when instantiated
class="longnowify
To run longNowify() just instantiate with an array of
HTML elements.
// JS
longNowify(document.getElementsByTagName('date'))
longNowify(document.getElementsByClassName('longnowify'))
Toughie was the last known living Rabbs' fringe-limbed treefrog. The species, scientifically known as Ecnomiohyla rabborum, is thought to be extinct, as the last specimen Toughie—died in captivity.
Read Toughie's story