lesson 126: extend the styling

2021-02-08 prj-cmp-01-starting-setup/src/App.vue

@@ -38,4 +38,18 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Roboto', sans-serif;
+}
+
+body {
+  margin: 0;
+}
+</style>

2021-02-08 prj-cmp-01-starting-setup/src/components/resources/LearningResource.vue

@@ -17,4 +17,34 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+li {
+  margin: auto;
+  max-width: 40rem;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h3 {
+  font-size: 1.25rem;
+  margin: 0.5rem 0;
+}
+
+p {
+  margin: 0.5rem 0;
+}
+
+a {
+  text-decoration: none;
+  color: #ce5c00;
+}
+
+a:hover,
+a:active {
+  color: #c89300;
+}
+</style>