## Helpful Links
- Image Adjustments:
https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments
- CSS Reference Site:
https://cssreference.io/property/overflow/
- Simple HTML Guide:
http://www.simplehtmlguide.com/cheatsheet.php
CSS Pagination: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Pagination
Flexbox Froggy:
http://flexboxfroggy.com/
Theme Ideas:
https://integralguide.com/support
CSS Design Resources:
https://mister-chad.com/web/!+intro+to+web+resources
CSS Custom Properties:
https://css-tricks.com/a-complete-guide-to-custom-properties/
CSS List I Like:
https://developer.mozilla.org/en-US/play
## Theme Snippets
### Justified Text
[Example Site](https://kneecaps.org/) — [CSS Variables](https://publish.obsidian.md/app.css?95d9d9d3ff25b12adb87)
```
.markdown-rendered p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
word-spacing: -0.05em;
text-justify: distribute;
text-align-last: left;
}
```
## Excalidraw for Publish?
<iframe src="https://www.youtube.com/embed/JC1E-jeiWhI" allow="fullscreen" allowfullscreen="" style="height:100%;width:100%; aspect-ratio: 16 / 9; "></iframe>
---
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
</style>
</head>
<body>
<center><div class="header">
<h1>BigDigEnergy.info</h1>
<p style="font-size:125%"><b>Cite your sources, or GTFO.</b></p>
</div></center>
<div class="topnav">
<a href="#"> Livestreams </a>
<a href="#"> Projects </a>
<a href="#"> Archives & Index</a>
<a href="https://www.bigdigenergy.info/home" style="float:right">Home 🏠</a>
<a href="#" style="float:right"> About the Site</a>
</div>
---
<h1 style="color:blue;text-align:center;font-size:400%;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
---
<div class="row">
<div class="card">
<h2>TITLE HEADING</h2>
<p1><b><center>Author:<b>
<br> <b>Date:<b> </center></p1> <br>
<br>
<div style><center><img src="https://img.newspapers.com/img/img?user=12538586&id=870851030&clippingId=128464204&width=820&height=1132&crop=1475_322_1240_1712&rotation=0" width=75%></center></div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
Heading: Merriweather
Body: Quicksand
---
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
1. Test
2. Test
2.1
3. Test
4. Test
> [!infobox|center]
> # Name
> ![[receipt.webp|cover hsmall]]
>
> ## Stats
>
> | Type | Stat |
> |:----:|:----:|
> | Test what if I put more over here too? | Testing what if I put more text? |
> | Test | Testing |
>
> ## Stats 2
>
> | Type | Stat |
> |:----:|:----:|
> | Testing hahaha | Testing woohoo |
> > [!metadata] Column 2
> > Need that singular blockquote `> ` as separation between columns
<p id="p1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p>
# Simple Multicol Example
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
## Spanning Subhead
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
| Name | GitHub Stars | Number Of Commits | Language |
|:-----: |:-----: |:-----: |:-----: |
| Express | 58k | 5740 | JS |
| Django | 65.7k | 30980 | Python |
| laravel | 70.7k | 6769 | PHP |
| rails | 51.3k | 84438 | Ruby |
| Firstname | Lastname | Savings |
|:--------:|:----------:|:---------:|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
<button class="primary">Click Me</button>
<button class="primary" disabled>Click Me</button>
<button class="secondary">Click Me</button>
<button class="secondary" disabled>Click Me</button>
<br>
-----
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
#### This is a Heading 4
##### This is a Heading 5
###### This is a Heading 6
> Human beings face ever more complex and urgent problems, and their effectiveness in dealing with these problems is a matter that is critical to the stability and continued progress of society.
>
> \- Doug Engelbart, 1961
Text inside `backticks` on a line will be formatted like code.
```
cd ~/Desktop
```
```js
function fancyAlert(arg)
{ if(arg)
{ $.facebox({div:'#foo'})
}
}
```
[Obsidian Help](https://help.obsidian.md)
- [x] This is a completed task.
- [x] This is an incomplete task.
This is a simple footnote.[^1]
This is an %%inline%% comment.
%%
This is a block comment.
Block comments can span multiple lines.
%%
| First name | Last name |
| ---------- | --------- |
| Max | Planck |
| Marie | Curie |
Left-aligned text | Center-aligned text | Right-aligned text
:-- |:--: | --:
Content | Content | Content
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
```mermaid
graph TD
A[Biology]
B[Chemistry]
A --> B
class A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z internal-link;
```
class "⨳ special character" internal-link
$ \begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc $
This is an inline math expression $e^{2i\pi} = 1$.
<button class="primary">Click Me</button>
<button class="primary" disabled>Click Me</button>
<button class="secondary">Click Me</button>
<button class="secondary" disabled>Click Me</button>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
& © Æ Ď
¾ ℋ ⅆ
∲ ≧̸
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
1. test
1. test
1. test
1. test
1. test
1. test
2. test
2. test
2. test
2. test
2. test
- test
- test
- test
- test
- test
- test
- test
- test
- test
- test
- test
---
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<br>
<div class="topnav">
<a href="#">Link A</a> •
<a href="#">Link B</a>
<a style="float:right" href="#">Link C</a>
</div>
<div class="content">
<h2>CSS Template</h2>
<p>A topnav, content and a footer.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
<p id="p1">This website serves as a centralized hub of primary sources, information, and references on a wide variety of topics—and examines the centrality of each relative to others listed on the site. As the project continues to expand, so might the ability to analyze these networks in incredible detail.</p>
<div class="container">
This has been in my mind's eye for a very long time. I know it doesn't look like much, but it will. The idea is to take information that I've gathered over time and put it into a repository where it can be recalled at a moment's notice.
… Little did I know, that would be a lot more involved than I ever imagined it would be.
I would not be able to do this without the support of the community we have built together, and I am forever grateful to be given the chance to make a difference in this world. Your support means everything to me, and I hope this endeavor proves to be as useful as I imagined it has the potential to be for many.
</div>
If you want something done, sometimes you just have to do it for yourself. Big Dig Energy is a labor of love, and I hope you like it.
Your fren,
<h1 style="color:blue;text-align:center;font-size:400%;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<div class="container">
</div>
---
<p>I am a paragraph. A short one.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>
> [!metadata] Column 1
> > - lksdf;ja ldsfj
>
> > [!metadata] Column 2
> > Need that singular blockquote `> ` as separation between columns
> [!cards]
> **[[Link]]**
> 
>
> **[[Link]]**
> 
>
> **[[Link]]**
> 
>
> **[[Link]]**
> 
>
[^1]: This is the referenced text.
> [!caption|sban] Full width caption sizing
>
> Caption
%% FOOTER %%
---
---
## Keep Digging
%%Space%%
### Tags
### Footnotes & References