Edit colors and layout

sass/style.scss

@@ -5,11 +5,11 @@ $width-wrap: 960px;
 $width-narrow: $width-wrap*0.75;
 
 $col-accent: #fc0;
-$col-dark: #131516;
-$col-medium: lighten($col-dark, 8);
-$col-light: lighten($col-dark, 30);
+$col-dark: rgb(29, 30, 32);
+$col-light: rgb(46, 46, 51);
 $col-white: #e8e6e3;
 $col-offwhite: darken($col-white, 25);
+$col-border: rgb(51, 51, 51);
 
 
 *, *:before, *:after {
@@ -26,7 +26,7 @@ body {
 	width: 100%;
 	min-height: 100vh;
 	margin: 0 auto;
-	background: $col-medium;
+	background: $col-dark;
 	color: $col-white;
 	font-family: open-sans, sans;
 	text-rendering: optimizeLegibility;
@@ -62,6 +62,7 @@ body>header {
 		background-size: auto 60%, cover, cover;
 		background-position: center;
 		background-repeat: no-repeat;
+    border-radius: 0 0 .5rem .5rem;
 
 		@media only screen and (min-width: $width-narrow) {
 			height: 10rem;
@@ -73,6 +74,7 @@ body>header {
 		position: relative;
 		width: 100%;
 		height: 3rem;
+    margin-bottom: 2rem;
 		background: $col-dark;
 
 		display: flex;
@@ -101,7 +103,7 @@ body>header {
 			text-decoration: none;
 
 			&:hover, &.active {
-				background: $col-medium;
+				background: $col-light;
 				border-bottom: 2px solid $col-accent;
 			}
 
@@ -115,11 +117,10 @@ body>header {
 body>main {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	gap: 1.5rem;
 
 	section {
-		padding: 1.5rem;
-		background: $col-dark;
+    padding: 0;
 
 		h2 {
 			margin: 3rem 0 2rem 0;
@@ -134,6 +135,18 @@ body>main {
 			background: $col-accent;
 		}
 
+		&>div {
+			width: 100%;
+      padding: 2rem;
+      background: inherit;
+      border: 1px solid $col-border;
+      border-radius: .5rem;
+
+      @media only screen and (min-width: $width-narrow) {
+        background: $col-light;
+      }
+		}
+
 		*:first-child {
 			margin-top: 0;
 		}
@@ -145,19 +158,12 @@ body>main {
 	section.flex {
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
-		padding: 0;
+		gap: 1.5rem;
 		background: inherit;
 
 		@media only screen and (min-width: $width-narrow) {
 			flex-direction: row;
 		}
-
-		div {
-			width: 100%;
-			background: $col-dark;
-			padding: 1.5rem;
-		}
 	}
 
 	section.toc {
@@ -183,27 +189,34 @@ body>footer {
 	grid-template-columns: 1fr;
 	gap: 1rem;
 	background: none;
-	padding: 0;
+  padding: 1rem;
 
 	@media only screen and (min-width: $width-narrow) {
 		grid-template-columns: 1fr 1fr;
 	}
 
+	@media only screen and (min-width: $width-wrap) {
+    padding: 0;
+  }
+
 	&>a {
 		display: flex;
 		min-height: 10rem;
-		background: $col-dark;
+		background: $col-light;
 		color: inherit;
+    border: 1px solid $col-border;
+    border-radius: .5rem;
+    overflow: hidden;
 
 		.title {
 			font-weight: bold;
-			font-size: 1.5em;
+			font-size: 1.1em;
 			margin-bottom: .5em;
 			line-height: 1;
 		}
 
 		.description {
-			padding: 1.5em 1em;
+			padding: 1.5em;
 			width: 100%;
 
 			p {

templates/index.html

@@ -14,10 +14,12 @@
 		</div>
 	</section>
 	<section>
-		{% if section %}
-			{{ section.content | safe }}
-		{% elif page %}
-			{{ page.content | safe }}
-		{% endif %}
+		<div>
+			{% if section %}
+				{{ section.content | safe }}
+			{% elif page %}
+				{{ page.content | safe }}
+			{% endif %}
+		</div>
 	</section>
 {% endblock content %}