EbbsianThemeforObsidian

# EbbsianThemeforObsidian
A minimal light theme with rainbow coloured accents.

# Thanks
Many thanks to Deathau for their [Notation Theme](https://github.com/deathau/Notation-for-Obsidian), on which the headers and tables were based.

# To make things work
Download the css file and drop it into your themes folder!

## Fonts
The fonts used should work automagically, but if they don't (or you want to work offine, as they currently pull directly from Google fonts), the primary fonts used are:
- Headers: [Raleway](https://fonts.google.com/specimen/Raleway)
- Body: [Spectral](https://fonts.google.com/specimen/Spectral)

FontAwesome is used for the callout boxes.
[Download here](https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started) and install the solid bold otf. 

## Settings
This theme is compatible with the Style Settings plugin - there are options to change the header image, accent colour, and header underline colours, as well as the body and header fonts.


<img src="./Screenshots/stylesettings.PNG" width="100%">

# Screenshots

<img src="./Screenshots/CrimScreenshot1.png" width="100%">

<img src="./Screenshots/Screenshot1.PNG" width="100%">


# Callout Boxes

The theme comes with some built-in callouts in various colours / flavours. 
You'll need FontAwesome installed to make these work!

## Quote Callout Boxes
### Summary
This box is the quickest and easiest to use - simply put your text inside two quotes.
```
>> Lorem ipsum
```
<img src="./Screenshots/Boxes%20and%20Callouts/SummaryBox.PNG" width="70%">

### Warning
Three quotes gives you a red warning box.

```
>>> Lorem ipsum
```
<img src="./Screenshots/Boxes%20and%20Callouts/WarningBox.PNG" width="70%">

## Solid Colour Boxes
These are generated using code blocks with the header note-s-$.

### Solid Red Warning
A red box with a warning symbol.

```
``` note-s-warning
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-warning.PNG" width="70%">


### Orange Highlight
Orange box with a highlight symbol.
```
``` note-s-highlight
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-highlight.PNG" width="70%">

### Yellow Bookmark
Yellow box with bookmark symbol.

```
``` note-s-bookmark
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-bookmark.PNG" width="70%">

### Green Write
Green box with a quill pen symbol.
```
``` note-s-write
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-write.PNG" width="70%">

### Blue Folder
Blue box with a folder symbol.
```
``` note-s-folder
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-folder.PNG" width="70%">

### Purple Clipboard
Purple box with a clipboard symbol.

```
``` note-s-clip
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-s-clip.PNG" width="70%">

## Plain Outlined Boxes
White boxes with coloured outlines and no symbols.
These use code blocks with the syntax note-{colour}.
### Red
```
``` note-red
Example text.
```
<img src="./Screenshots/Boxes%20and%20Callouts/note-red.PNG" width="70%">

### Orange
```
``` note-orange
Example text.
```
<img src="./Screenshots/Boxes%20and%20Callouts/note-orange.PNG" width="70%">

### Yellow
```
``` note-yellow
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-yellow.PNG" width="70%">

### Green
```
``` note-green
Example text.
```
<img src="./Screenshots/Boxes%20and%20Callouts/note-green.PNG" width="70%">

### Blue
```
``` note-blue
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-blue.PNG" width="70%">

### Purple
```
``` note-purple
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-purple.PNG" width="70%">

### Pink

```
``` note-pink
Example text.
```

<img src="./Screenshots/Boxes%20and%20Callouts/note-pink.PNG" width="70%">