This commit is contained in:
2025-02-05 09:27:28 +01:00
parent b06f99b9b9
commit a88ea26a3e
7 changed files with 41 additions and 30 deletions

View File

@@ -1,13 +1,13 @@
# Customising Mkdocs
# Customizing Mkdocs
I wanna customise my mkdocs theme. So I can have a dark mode. Because it currently looks like this and having a nice looking documentation page is necessary too!
I wanna customize my mkdocs theme. So I can have a dark mode. Because it currently looks like this and having a nice looking documentation page is necessary too!
![alt text](../../assets/customising_mkdocs.jpg)
## Issues
### Attempt 1
I tried changing it by referencing extra css but when it builded i looked through the job artifacts and I saw that it didnt pick up on the file
I tried changing it by referencing extra css but when it builded i looked through the job artifacts and I saw that it didn't pick up on the file
```yml
site_name: Fab Academy docs page - Sam
@@ -27,11 +27,11 @@ extra_css: [extra.css]
}
```
### Attempt 2
After I read the documentation thoroughly i found out that the css file needs to be relative to the `docs` folder and not the `mkdocs.yml`. After that it showed the css and I could finaly customise the theme.
After I read the documentation thoroughly i found out that the css file needs to be relative to the `docs` folder and not the `mkdocs.yml`. After that it showed the css and I could finally customize the theme.
## Customising Material theme
### Palette customisation
I decided to switch to material theme because its easier to configure. There are premade color schemes and a lot of extensions that work out of the box.
## Customizing Material theme
### Palette customization
I decided to switch to material theme because its easier to configure. There are pre made color schemes and a lot of extensions that work out of the box.
Example changing colors.
```yaml
theme:
@@ -39,7 +39,7 @@ theme:
primary: indigo
accent: teal
```
Of yourse you could also use the extra.css to style the website even more.
Of course you could also use the extra.css to style the website even more.
## Extensions
@@ -55,14 +55,14 @@ markdown_extensions:
With this extension you can add drop down menu's to your page.
#### How do I install drop down menus?
Drop down menu's are part of the `pymdownx.details` extension. You need to place that in your `mkdocs.yml` under `markdown_extensions:` liket his:
Drop down menu's are part of the `pymdownx.details` extension. You need to place that in your `mkdocs.yml` under `markdown_extensions:` like his:
```yaml
markdown_extensions:
- pymdownx.details
```
#### How do I use it
You can use it like this. Don't forget that you need to use 2 tabs to get the text in the collapsable box.
You can use it like this. Don't forget that you need to use 2 tabs to get the text in the collapsible box.
```
??? Notes

View File

@@ -2,11 +2,11 @@
## What is fritzing
Fritzing is a program to draw circuits on breadboards to visualise them. You will see them a lot when looking for references on how to connect stuff on breadboards. For the first weeks I will be using this to sketch breadboards for later testing.
Fritzing is a program to draw circuits on breadboards to visualize them. You will see them a lot when looking for references on how to connect stuff on breadboards. For the first weeks I will be using this to sketch breadboards for later testing.
## My first design
I have made this design early to get started on programming the microcontroller so I have enough time to program the stabilasation algorithm
I have made this design early to get started on programming the microcontroller so I have enough time to program the stabilization algorithm
![Frirtzing diagram](../../assets/fritzingv1.jpg)