Style bookmarks page

bookmarks/styles/base.scss

@@ -1 +1,46 @@
-@import "../../node_modules/spectre.css/src/spectre";
+body {
+  margin: 20px 0;
+}
+
+header {
+  margin-bottom: 40px;
+}
+
+.navbar-brand {
+
+  .logo {
+    background-color: $primary-color;
+    color: $light-color;
+    padding: 14px;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    display: inline-block;
+  }
+}
+
+/* Overrides */
+
+// Reduce heading sizes
+h1 {
+  font-size: inherit;
+}
+
+h2 {
+  font-size: .85rem;
+  color: $gray-color-dark;
+}
+
+// Button color should not change for anchor elements
+.btn:visited:not(.btn-primary) {
+  color: $primary-color;
+}
+
+// Increase spacing between columns
+.container > .columns > .column {
+}
+
+.container > .columns > .column:not(:first-child) {
+  padding-left: 2rem;
+}

bookmarks/styles/bookmarks.scss

@@ -0,0 +1,23 @@
+ul.bookmark-list {
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .description {
+    color: $gray-color;
+  }
+
+  .actions .btn-link {
+    color: $gray-color-dark;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: darken($gray-color-dark, 10%);
+    }
+  }
+}

bookmarks/styles/components.scss

@@ -0,0 +1,14 @@
+section.content-area {
+
+  .content-area-header {
+    border-bottom: solid 1px $border-color;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    margin-bottom: 16px;
+
+    h2 {
+      line-height: 1.8rem;
+    }
+  }
+}

bookmarks/styles/index.scss

@@ -0,0 +1,17 @@
+// Font sizes
+$html-font-size: 18px !default;
+
+// Import Spectre CSS lib
+@import "../../node_modules/spectre.css/src/spectre";
+// Import Spectre icons
+@import "../../node_modules/spectre.css/src/icons/icons-core";
+@import "../../node_modules/spectre.css/src/icons/icons-navigation";
+@import "../../node_modules/spectre.css/src/icons/icons-action";
+@import "../../node_modules/spectre.css/src/icons/icons-object";
+
+
+// Import style modules
+@import "base";
+@import "util";
+@import "components";
+@import "bookmarks";

bookmarks/styles/util.scss

@@ -0,0 +1,9 @@
+.spacer {
+  flex: 1 1 0;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}