Style currency page (#36)

* feat: basic table styles

* feat: add data-attributes for table column names for responsive tables

* feat: much better looking tables

* feat: add separate sections, add IDs for fragment URL links

* feat: responsive tables mixin, used on currency page

* feat: link budget items, align tables

src/scss/_tables.scss

@@ -0,0 +1,56 @@
+table {
+	margin: 1em 0;
+	max-width: 100%;
+}
+
+th, td {
+	padding: 0.25em 0.5em;
+}
+
+th {
+	white-space: nowrap;
+	text-align: left;
+	font-weight: bold;
+}
+
+tbody > tr {
+	border-top: 1px solid rgba(black, 0.25);
+
+	&:hover {
+		background-color: rgba(black, 0.05);
+	}
+}
+
+@mixin table-compact-mixin {
+	display: block;
+	thead, tbody, tr, th, td:nth-child(n) {
+		display: block;
+		text-align: left;
+	}
+
+	thead > tr {
+		position: fixed;
+		right: 110vw;
+	}
+
+	tbody > tr {
+		border: none;
+	}
+
+	td + td {
+		border-top: 1px solid rgba(black, 0.25);
+	}
+
+	td:first-child {
+		margin: 20px 0 0;
+	}
+
+	td::before {
+		content: attr(data-header);
+		display: inline-block;
+		font-weight: bold;
+		width: 11em;
+		padding-right: 1em;
+		text-align: right;
+	}
+}

src/scss/main.scss

@@ -18,6 +18,7 @@
 @import "logo";
 @import "buttons";
 @import "forms";
+@import "tables";
 @import "footer";
 @import "page";
 @import "pagination";
@@ -26,7 +27,6 @@
 @import "postcontent";
 @import "flags";
 
-
 //stuff most pages need
 @import "overlay-menu";
 @import "video";
@@ -43,3 +43,4 @@
 @import "junk-drawer";
 @import "pages/styleguide";
 @import "code-highlight";
+@import "pages/currency";

src/scss/pages/_currency.scss

@@ -0,0 +1,28 @@
+.page--currency > section {
+	margin: 40px 0;
+}
+
+.page--currency table#budgets {
+	td, th {
+		&:nth-child(3), &:nth-child(6) {
+			text-align: center;
+		}
+		&:nth-child(4), &:nth-child(5) {
+			text-align: right;
+		}
+	}
+	@media (max-width: 1199px) {
+		@include table-compact-mixin;
+	}
+}
+
+.page--currency table#blocks {
+	td, th {
+		&:nth-child(3), &:nth-child(4), &:nth-child(5) {
+			text-align: right;
+		}
+	}
+	@media (max-width: 850px) {
+		@include table-compact-mixin;
+	}
+}