[Vault Direct Download Link]

Introduction

Hi, I am Elevict. I made this doc because an overwhelming number of people have DMed me about my vault, and I decided it would be more efficient to have a document explaining all its details.

The vault I have here today is inspired from this particular blog, in which arguably, one of the most chadliests mathematicians in the world was able to type latex about as fast as one could write down equations. With this in mind, I had made the vault with the idea that it was purely going to be composed with theorems, lemmas, and proofs. However, obsidian as a program had surprised me with more than that.

The Vault

Okay, so now you know why I made it. Now for the part you actually care about. How did I manage to make it? Unfortunately, I have a lot of private things in my own vault, and thus won’t be able to share it directly, but you can download a stripped down version of it here. If you’re more interested in the process of how I made the stripped down vault from scratch, then read on! Otherwise, download the file and let obsidian read it.

So the homepage we will be replicating is the one we see below:

Instructions

Part 1: Installing the Plugins and Themes

  1. First create a new vault. Name it and put it anywhere you can access it from easily.
  2. Make a new note and title it “Homepage”. This note will be our homepage we are trying to create.
  3. Go to settings, and go to community plugins.
  4. Turn on community plugins and select browse.
  5. Download the following plugins: admonition, google calendar, hider, homepage, MAKE.md, and Style Settings.
  6. Exit the plugins menu, and go back into settings. Now go to community plugins and enable all your newly installed plugins.
  7. Now go to appearance located in the options field.
  8. Where it says Themes, click manage and type at the search bar at the top “AnuPpuccin”
  9. Install AnuPpuccin and use the theme.

As of right now, your vault should look something like this with no settings altered. Now we’ll alter some settings to approach what my main vault’s homepage looks like. Also, if you have any questions do feel free to drop me a DM in discord.

Part 2: Hiding, Setting Homepage, and Downloading a Snippet

  1. Go to the Hider plugin in the settings menu and toggle “Hide vault name”
  2. Go to the Homepage plugin and set your homepage at the top to your note titled “Homepage”
  3. Go to Style Settings and click on AnuPpuccin. This is where a lot of our efforts will go.
  4. First click on Colors, then get the Extended Color Schemes Snippet. You can find it here in github. Download the raw file by clicking the button located up here in red.

  1. Now head over to your obsidian settings, and click appearance again. Scroll all the way down until you see CSS snippets. It should say there are no CSS snippets found. Click the folder to the left (Right next to the refresh symbol).
  2. Drag the CSS file you downloaded into the folder. Then refresh your CSS snippets.
  3. Enable extended-colorschemes, you should see this if you did steps 3-7 correctly. If not, just repeat steps 3-7.

Part 3: MCL Snippets

  1. We’re going to need a few more css files. In this case, we have three more snippets to download. You can get them here, here, and here. Note these snippets are extremely useful, and I advise you to learn to use them yourself!
  2. Download each of them raw and drag them into your CSS snippets folder, just like you did with the extended-color schemes CSS file.
  3. Refresh and enable your other three snippets.

You should now see these snippets all enabled below.

Part 3: Theme Styling Part 1

  1. Head over to style settings now, and click on AnuPpuccin themes extended.
  2. Select toggle amoled black on all themes.
  3. Set the dark theme flavor as royal velvet and the light theme to anything you prefer (I don’t use light themes, I am a vampire).
  4. Head over to AnuPpuccin now, we’re done using the extended themes.
  5. Click workspace, we’ll be working here for a while.
  6. Click canvas, enable darker canvas background.
  7. Click background, and enable custom background (WIP). You can set it to anything you want for dark mode, but for me I personally use: url("https://png.pngtree.com/background/20230401/original/pngtree-night-starry-sky-trees-silhouette-illustration-background-picture-image_2251411.jpg")
  8. Set background brightness to max, background blur to 0, and container opacity to 1. You can adjust these as you please.
  9. Head to rainbow folders and select rainbow style to be simple. Go to simple folder settings. Enable title recolor, enable icon recolor (For icon folder users), Enable collapse indicator, and enable subfolder color inheritance.
  10. Go to status bar, and set it to floating.
  11. Go to tabs and have tab style be depth. Select disable new tab button right alignment.
  12. Go to workspace layout, and set workspace layout variant to cards. Select background fix for applying colors and select hide borders.
  13. Click card layout settings. My preferred card radius is 16, card padding 8, tab left padding 20. Select enable shadows, enable card format for actions, and enable card format for file browser.

Right now you should have something that looks like this below:

Part 3: Theme Styling Part 2

  1. Go to typography now, we are done with workspace.
  2. Set font families to what you desire, but I use Iosevka Comfy Duo for both source editor and live preview.
  3. Go to headings, and click enable custom heading colors. Then go to H1 and enable H1 divider. You can customize the heading sizes as you see fit.
  4. Now in file preview, I personally prefer to set file margins to 32.
  5. Next, head to colors and force custom accents.
  6. Now go to color overrides, we’re going to make the icons/text pop out and be more readable. This makes a huge difference, trust me.
  7. For overlay 2 and text we set our hex values to be #F8F8F2, which is a whiter color that is easier on the eyes.

This is how it should look right about now. Try to type and see how it looks for you.

Alright, now comes the tedious part where we make our homepage look amazing. The callouts and how I’ve done them

Part 4: The Cover and the Admonition Color Gradients

  1. First, scroll up to the top of your homepage note and click change cover.
  2. I personally use wallpapers from Ori and the Blind Forest as it happens to be one of my favorite games. Here is the one I use personally: https://i.imgur.com/OvpPyet.jpeg
  3. I don’t like big margins, so in settings and for the editor I disable readable line length.
  4. I also don’t like to see properties directly, so I enable “Hide properties in reading view” in the hider plugin settings.
  5. Now, we need to create admonitions and a lot of them. I use https://coolors.co/gradient-palette/b6f3c9-4766f4?number=7 to create a gradient from one color to another, and then manually make all the admonitions we need. If you want to use the same ones I use, here is a snippet for it: custom snippets. Put it in the snippet folder and just enable it.
  6. Now, you want to copy and paste the markdown file, the images, and the CSS file from here.

Part 5: The Images and the Calendar

If you want to know where I got the images, they are hand-made/altered by me. I used inkscape and made vector images and converted it to match the color gradient of the admonition. For the Latex, I used a Latex to svg converter online which is here: https://editor.codecogs.com/. For my images you can go here.

Once again, all the images are in this folder. There is also a .md file and the CS snippet you’ll need for centering/resizing images. The .md file is the homepage file.

But in any case, we almost have it looking like how we want it to be. I move the outgoing links and backlinks to the bottom left corner by dragging it and dropping it to the side, and I also add a graph view at the top right corner by opening a graph view (located to the left card) and then dragging and dropping it to the left. It should look like this now.

All that remains is you setting the google calendar plugin up. To do so do the following:

1. Press ctrl + p and type “Calendar”.

3. Look for where it says “Open gcal schedule view”.

4. Open it, then you can put it to the right-hand side.

5. Syncing it to your own google account is an ordeal of its own, and you can find the instructions on the plugin’s github page.

Conclusion

This pretty much sets up everything excluding the file hierarchy, dataview, latex setup, codeblocks, and other features I use for myself. Thanks for reading, and if you get stuck anywhere you can always DM me for help @elevict. And if you want to know other things about my vault, feel free to reach out. Have a great day!

Huge thanks to the entire obsidian community, without you OR any of the awesome plugin creators none of this would have ever happened.