| | |
| | | <template> |
| | | <ul> |
| | | <learning-resource v-for="res in storedResouces" |
| | | :key="res.id" |
| | | :title="res.title" |
| | | :description="res.description" |
| | | :link="res.link" |
| | | > |
| | | <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description" |
| | | :link="res.link"> |
| | | </learning-resource> |
| | | </ul> |
| | | </template> |
| | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <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> |
| | |
| | | props: ['title', 'description', 'link'] |
| | | } |
| | | </script> |
| | | |
| | | <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> |