Contributing Tips

[the-wright-jamie]

In order for tips to be submitted in an orderly fashion, we have a set but somewhat loose structure for these types of discussions.

You should

1. Make sure your title accurately describes your tip
2. Write a short introduction, describing the tip in a few words
3. Provide 1 or 2 images of the result (should also be included in the tip)
4. Provide your tip, written in valid GitHub markdown and inside a code block
   4.1. If providing CSS or other code that requires ```, you should supplement this with <code> tags and we will replace it when posting your tip.

All kinds of tips are welcome, be it cool CSS hacks or hidden features. Please note, however, that this is not a layout/ricing show case - you should use the Show and Tell discussion board for that. If you do have something interesting that you would like to help others reproduce, you should post part of your riced build. Just don't post it all along side a config/CSS dump.

The following is an example of how you should lay it out.

---

(Title would be something like "Digital Clock Tip")

Hello, I recently created a Digital Clock in Tab Nine using the custom CSS feature. I've written a tip with the code included so that others can reproduce it.

Here is an image of the result:

Here is my tip in markdown:

# Using your chosen accent color
by [@the-wright-jamie](https://github.com/the-wright-jamie)

The accent colour that you pick in the system settings for Tab Nine is available to be used in the custom CSS. In order to make use of it, use `var(--accent-color)` in place of a color. 

For example, the following

<code>
.Digital {
    background-color: #00000077;
    border-radius: 100px;
    border: 1px solid #ffffff77;
    color: var(--accent-color); 
    height: 5em;
    width: 12em;
    backdrop-filter: blur(20px);
    font-family: DS-Digital;
    font-size: 120%;
}

.Digital h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 1rem var(--accent-color));
}
</code>

will produce a digital clock effect like this:

<img width="397" alt="image" src="https://github.com/the-wright-jamie/tab-nine/assets/121819290/e6e9959a-f6c5-4c6f-8f02-363d7348cac8">

(requires [this](https://www.dafont.com/ds-digital.font) font)