Improve styling of example app

fboeller · Mar 7, 2021 · 1f64950 · 1f64950
1 parent 9a47dda
commit 1f64950
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/projects/example-app/src/app/sidebar/sidebar.component.css b/projects/example-app/src/app/sidebar/sidebar.component.css
@@ -1,5 +1,6 @@
 :host {
   display: block;
+  padding: 10px;
 }
 
 .links {
@@ -11,3 +12,7 @@
 .links > a {
   display: block;
 }
+
+.active-link {
+  color: blue;
+}
diff --git a/projects/example-app/src/app/sidebar/sidebar.component.html b/projects/example-app/src/app/sidebar/sidebar.component.html
@@ -1,8 +1,20 @@
 <h3>Examples</h3>
 <div class="links">
-  <a routerLink="/examples/default">Default</a>
-  <a routerLink="/examples/custom-default-loading">Custom default loading</a>
-  <a routerLink="/examples/ngrx">NgRx</a>
-  <a routerLink="/examples/custom-loading-template">Custom loading template</a>
-  <a routerLink="/examples/lightweight">Lightweight</a>
+  <a routerLink="/examples/default" routerLinkActive="active-link">Default</a>
+  <a
+    routerLink="/examples/custom-default-loading"
+    routerLinkActive="active-link"
+  >
+    Custom default loading
+  </a>
+  <a routerLink="/examples/ngrx" routerLinkActive="active-link">NgRx</a>
+  <a
+    routerLink="/examples/custom-loading-template"
+    routerLinkActive="active-link"
+  >
+    Custom loading template
+  </a>
+  <a routerLink="/examples/lightweight" routerLinkActive="active-link">
+    Lightweight
+  </a>
 </div>
diff --git a/projects/example-app/src/styles.css b/projects/example-app/src/styles.css
@@ -0,0 +1,20 @@
+body {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+    Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+p {
+  line-height: 26px;
+}
+
+a {
+  font-weight: 500;
+  line-height: 20px;
+  text-decoration: none;
+  color: rgb(96, 103, 112);
+}
+
+a:hover {
+  color: blue;
+}