Add screenshots and some enhancements

src/.vuepress/styles/index.scss

@@ -9,3 +9,12 @@
 .custom-block.tip {
 	border-color: #2E84BF !important;
 }
+
+.badge.default-indicator {
+	background-color: #2E84BF !important;
+}
+
+.badge.version-indicator {
+	background-color: #000000 !important;
+}
+

src/help/guides/general.md

@@ -4,36 +4,76 @@ lang: en-US
 ---
 
 # General
-:construction: :construction_worker_man: W.I.P. Description, help us improve through [here](https://github.com/tachiyomiorg/website/edit/master/src/help/guides/general.md)!
-This category of settings allows you to change the look of the app, and the update schedule and how the app updates. 
+This category of settings allows you to change the look of the app, and the update schedule and how the app updates.
+The blue badges next to titles is how we indicate the default option, a yellow badge can be used to indicate if for example the feature isn't yet available in the public release.
 
-## Language
-The language of the app. If changed, all parts of the app change to the language. Defaults to system language. Does not affect which catalog languages are enabled 
 
-## Application theme
-//TODO add screenshots of each theme
-How the app looks and what colors are used through the app. There are 4 themes included, with white theme being the default. White theme is the app being themed to white, Dark theme is themed to material grey, AMOLED is all black in most places, and Dark Blue is Dark theme but with headers and such being changed to material dark blue.
+## Language <Badge text="System default" type="default-indicator" vertical="middle"/>
+The language of the app. If changed, all parts of the app change to the language. Defaults to system language. Does not affect which catalog languages are enabled
 
-## Library manga per row
-This setting allows you to set how many manga show up per row. It can be between 1 and 10, with the default value being 3 for portrait and 4 for landscape. It can be set to differing amounts depending on the orientation you want.
+## Application theme <Badge text="Main theme" type="default-indicator" vertical="middle"/>
+How the app looks and what colors are used through the app. There are four themes included, consisting of a light theme and three dark themes.
+- `Main` is the default white theme with blue accents.
+- `Dark` is themed to completely to material grey.
+- `AMOLED` is pitch black in most places and suitable for OLED screens.
+- `Dark Blue` is like the main theme as it keeps the blue accents but it's dark instead of white.
 
-## Start screen
-This setting changes what screen the app opens up to. It can be changed between My Library, Recently Read, and Library Updates, with My Library being the default setting.
+### Light themes
 
-## Library update frequency
-This setting changes how often the app is automatically updated. It can be changed from preset values between hourly and every 2 days, with every day being the default setting. 
+#### Main
+::: expander <strong>Click to expand!</strong>
+<figure class="centered">
+	<img width="100%"
+	  :src="$withBase('/assets/media/main-theme.png')">
+</figure>
+:::
 
-## Library update restrictions
+### Dark themes
+
+#### Dark
+::: expander <strong>Click to expand!</strong>
+<figure class="centered">
+	<img width="100%"
+	  :src="$withBase('/assets/media/dark-theme.png')">
+</figure>
+:::
+
+#### AMOLED
+::: expander <strong>Click to expand!</strong>
+<figure class="centered">
+	<img width="100%"
+	  :src="$withBase('/assets/media/amoled-theme.png')">
+</figure>
+:::
+
+#### Dark Blue
+::: expander <strong>Click to expand!</strong>
+<figure class="centered">
+	<img width="100%"
+	  :src="$withBase('/assets/media/dark-blue.png')">
+</figure>
+:::
+
+## Library manga per row <Badge text="Portrait: 3" type="default-indicator" vertical="middle"/> <Badge text="Landscape: 4" type="default-indicator" vertical="middle"/>
+This setting allows you to set how many manga show up per row. It can be between 1 and 10 and can be set to differing amounts depending on the orientation you want.
+
+## Start screen <Badge text="My library" type="default-indicator" vertical="middle"/>
+This setting changes what screen the app opens up to. It can be changed between `My library`, `Recently read`, and `Library updates`.
+
+## Library update frequency <Badge text="Manual" type="default-indicator" vertical="middle"/>
+This setting changes how often the app is automatically updated. It can be changed from preset values between hourly and every 2 days.
+
+## Library update restrictions <Badge text="False" type="default-indicator" vertical="middle"/>
 This setting allows you to keep certain categories from updating. If you have categories you don't want to update, because you have a category that you would not like to update, then you can use this setting to save time from updating. If you would like to update manga while this setting is on, pull down in the manga or chapters view to manually update
 
-## Only update ongoing manga
+## Only update ongoing manga <Badge text="False" type="default-indicator" vertical="middle"/>
 This setting allows you to keep manga that sources have mark as finished from updating. If you would like to update manga while this setting is on, pull down in the manga or chapters view to manually update.
 
-## Categories to include in global update
-This setting allows you to change which categories are updated when a manual (pull down in library) or automatic update. By default all categories are updated.
+## Categories to include in global update <Badge text="All" type="default-indicator" vertical="middle"/>
+This setting allows you to change which categories are updated when a manual (pull down in library) or automatic update occurs.
 
-## Library update order
-This setting allows you to update in different orders, in alphabetical or in the order of the last updated manga. By default the library update updates by alphabetical order.
+## Library update order <Badge text="Alphabetically" type="default-indicator" vertical="middle"/> <Badge text="Dev" type="version-indicator" vertical="middle"/>
+This setting allows you to update in different orders, in alphabetical or in the order of the last updated manga.
 
-## Default category
-This setting allows you to change the category that a manga is added to when the bookmark button is tapped and no category is selected. By default it is the Tachiyomi made default categoy.
+## Default category <Badge text="Always ask" type="default-indicator" vertical="middle"/>
+This setting allows you to change the category that a manga is added to when the bookmark button is tapped and no category is selected.