Docs App Overview WIP

app/src/modules/docs/components/sections.ts

@@ -40,20 +40,20 @@ const sections: Section[] = [
 		default: 'readme',
 		children: [
 			{
-				name: 'Activity & Versions',
-				to: '/docs/concepts/activity-and-versions',
+				name: 'Database Mirroring',
+				to: '/docs/concepts/database-mirroring',
+			},
+			{
+				name: 'App Overview',
+				to: '/docs/concepts/app-overview',
 			},
 			{
 				name: 'App Components',
 				to: '/docs/concepts/app-components',
 			},
 			{
-				name: 'App Pages',
-				to: '/docs/concepts/app-pages',
-			},
-			{
-				name: 'Database Mirroring',
-				to: '/docs/concepts/database-mirroring',
+				name: 'Activity & Versions',
+				to: '/docs/concepts/activity-and-versions',
 			},
 			{
 				name: 'Files & Thumbnails',

app/src/modules/docs/routes/markdown.vue

@@ -256,16 +256,11 @@ export default defineComponent({
 					margin: 8px 0;
 					line-height: 24px;
 				}
-			}
 
-			ul :first-child,
-			ol :first-child {
-				margin-top: 0;
-			}
-
-			ul :last-child,
-			ol :last-child {
-				margin-bottom: 0;
+				ul,
+				ol {
+					margin: 4px 0;
+				}
 			}
 
 			blockquote {
@@ -327,6 +322,20 @@ export default defineComponent({
 
 			img {
 				max-width: 100%;
+				margin: 20px 0;
+
+				&.no-margin {
+					margin: 0;
+				}
+
+				&.full {
+					width: 100%;
+				}
+
+				&.shadow {
+					box-shadow: 0px 5px 10px 0px rgba(23,41,64,0.1),
+								0px 2px 40px 0px rgba(23,41,64,0.05);
+				}
 			}
 
 			.highlight pre {