Landing is an mkdocs theme geared towards making a personal landing page, with simpler navigation and heavily customisable style options.

Configuration

With Landing I've tried to expose as much of the styling as possible to mkdocs, so that you can change up the theme to your own personal style as much as possible. Of course, there's nothing more flexible than writing your own css, so if you hit a wall with the config file I've also tried to make the html as simple as possible so you can easily add your own custom CSS.

Click here for a full list of configuration options available.

Using preset configurations

If you're not after super cusomisation, the mkdocs-landing package also includes a plugin which lets you choose from a set of pre-defined configurations ("presets"). I've tried to make this system easy to plug into too (for those in the know: the entry point is mkdocs_landing.presets and the base class is mkdocs_landing.presets.base.BaseLandingPreset), so in time I hope there'll eventually be people adding their own presets to Landing!

To use a preset, add this to your mkdocs.yaml file:

plugins:
  - landing-preset: 
      name: <name of your chosen preset>

Click here for a list of all presets available and previews of how they look.

If you'd like to add a links page, similar to LinkTree or Campsite, you can do so using Landing! Click here for more information and examples of how the links look.

History

Landing came out of me wanting to use mkdocs for my own personal landing page - I made a custom .css file to sit alongside a generic mkdocs file and style it the way I wanted it. When implementing a similar page for a friend I realised that this basic structure could be fairly easily modified with a few key parameters to match a variety of different aesthetics.

Gallery

Below are some implementations of Landing with various styles, as an example.

Todd Parsons

The configuration I've got on my own personal site - not all that different than default Landing, but note the different header layout (I made my avatar slightly bigger and changed the order via the avatar_size and layout parameters)

Full page

Config file

To show off how a links page can look, here's an example page which links to the various implementations of my D&D-inspired theme, Torillic.

Full page

Config file

Ben Ambrose

A site I built for a friend - this one relies on content being in <article> tags, and got a little funky with the background_gradient parameter.

Full page

Config file

Catppuccin example

I'm a big fan of Catppuccin, so of course the first example I made was in latte/mocha! If you want a site which straight away has lovely matching colors, you can't go far wrong with catppuccin, so please feel free to steal the mkdocs.yaml file below.

Full page

Config file