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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Imagine, if only for one moment, how another world is possible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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 |
|---|---|---|---|
| Active | Column content | Column content | Column content |
| Default | 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 |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | 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...
Including eotl.js in your website/app exposes custom JS
methods detailed below- but first, some propaganda
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.
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.
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 storyThe 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 appends a leading 0 to any numbers contained in
elements which are instantiated such as <date>
elements.
To run longNowify() just instantiate with an array of
HTML elements.
// JS
longNowify(document.getElementsByTagName('date'))