revised screenshots

src/assets/scss/app.scss

@@ -76,5 +76,5 @@
 @import 'components/footer';
 
 // pages
-@import 'pages/index';
+@import 'pages/screenshots';
 @import 'pages/midicapl';

src/assets/scss/components/_footer.scss

@@ -1,19 +1,19 @@
 footer {
 	background-color: $black;
-	min-height: 3rem;
+	min-height: 3.0rem;
 	padding: 0.3rem;
 	nav {
-		// border: 1px black solid;
+		border-top: 0.3rem $black solid;
 		ul {
 			margin: 0;
 			padding: 0;
 			list-style: none;
-			// border: 1px red solid;
 			li {
 				background-color: $white;
 				color: $black;
 				display: inline-block;
-				border: 3px black solid;
+				border-left: 0.2rem $black solid;
+				border-right: 0.2rem $black solid;
 			}
 		}
 	}

src/assets/scss/global/_layout.scss

@@ -30,12 +30,6 @@ a {
 }
 
 // keep as much distance as the top bar is high
-section, .anchor {
+section {
 	padding-top: 62px;
 }
-
-.inner-link-arrow {
-	font-family: monospace;
-	font-weight: bold;
-	font-size: 1.3rem;
-}

src/assets/scss/pages/screenshots.scss

@@ -0,0 +1,24 @@
+
+.screenshots {
+	$img-padding: 0.4rem;
+	.cell {
+		&.grid-x {
+			&.grid-padding-x {
+				img {
+					padding-top: $img-padding;
+				}
+			}
+		}
+		&.large-6 {
+			padding-top: $img-padding;
+		}
+		#last-element {
+			padding-bottom: $img-padding;
+		}
+	}
+
+	h3 {
+		// section is already handled by _layout.scss
+		padding-top: 62px;
+	}
+}

src/data/menu-items.json

@@ -29,6 +29,10 @@
 						"title": "Player",
 						"url": "/screenshots.html#player",
 						"menu-items": [
+							{
+								"title": "Widgets",
+								"url": "/screenshots.html#player-widgets"
+							},
 							{
 								"title": "Channel Details",
 								"url": "/screenshots.html#player-channel"
@@ -60,8 +64,8 @@
 								"url": "/screenshots.html#info-sequence"
 							},
 							{
-								"title": "Midica Tab",
-								"url": "/screenshots.html#info-version"
+								"title": "About Tab",
+								"url": "/screenshots.html#info-about"
 							}
 						]
 					}