From 43396a07d57044b6d0ea2d7e70320f93a1a0836b Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 10:50:22 +0100
Subject: [PATCH] aggiungo css
---
10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue | 34 +++++++++++-----
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue | 34 ++++++++++++++++
2 files changed, 56 insertions(+), 12 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
index 36206d2..5b78070 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
@@ -1,11 +1,7 @@
<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>
@@ -14,20 +10,20 @@
import LearningResource from './components/learning-resource/LearningResource.vue';
export default {
- components:{
+ components: {
LearningResource: LearningResource,
},
- data(){
+ data() {
return {
storedResouces: [
{
- id:'official-guide',
+ id: 'official-guide',
title: 'Official Guide',
description: 'The official Vue.js documentation',
link: 'https://vuejs.org'
},
{
- id:'google',
+ id: 'google',
title: 'Google',
description: 'Learn to google...',
link: 'https://google.com'
@@ -36,4 +32,20 @@
}
}
}
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
index 5fd7ac1..eeab6f7 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
@@ -17,4 +17,36 @@
export default {
props: ['title', 'description', 'link']
}
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.8.0