From 76a3739b783223c86a7a2fc591365e6545d3fe04 Mon Sep 17 00:00:00 2001 From: Marley Date: Mon, 5 Jun 2023 15:59:50 -0700 Subject: [PATCH] :tada: chore: Initial setup. --- .idea/misc.xml | 6 + .../.vscode/extensions.json | 3 - interactive-rating-component/README.md | 135 ++++++++++++++++-- .../design/active-states.jpg | Bin 0 -> 15839 bytes .../design/desktop-design.jpg | Bin 0 -> 14864 bytes .../design/desktop-preview.jpg | Bin 0 -> 30665 bytes .../design/desktop-thank-you-state.jpg | Bin 0 -> 16709 bytes .../design/mobile-design.jpg | Bin 0 -> 11936 bytes .../design/mobile-thank-you-state.jpg | Bin 0 -> 12525 bytes .../downloaded/.gitignore | 16 +++ .../downloaded/README-template.md | 113 +++++++++++++++ .../downloaded/README.md | 94 ++++++++++++ .../downloaded/index.html | 49 +++++++ .../downloaded/style-guide.md | 33 +++++ .../images/favicon-32x32.png | Bin 0 -> 1063 bytes .../images/icon-star.svg | 1 + .../images/illustration-thank-you.svg | 1 + interactive-rating-component/index.html | 50 +++++-- interactive-rating-component/src/App.vue | 30 ---- .../src/components/HelloWorld.vue | 38 ----- interactive-rating-component/src/main.ts | 5 +- interactive-rating-component/src/style.css | 90 ++---------- 22 files changed, 493 insertions(+), 171 deletions(-) create mode 100644 .idea/misc.xml delete mode 100644 interactive-rating-component/.vscode/extensions.json create mode 100644 interactive-rating-component/design/active-states.jpg create mode 100644 interactive-rating-component/design/desktop-design.jpg create mode 100644 interactive-rating-component/design/desktop-preview.jpg create mode 100644 interactive-rating-component/design/desktop-thank-you-state.jpg create mode 100644 interactive-rating-component/design/mobile-design.jpg create mode 100644 interactive-rating-component/design/mobile-thank-you-state.jpg create mode 100644 interactive-rating-component/downloaded/.gitignore create mode 100644 interactive-rating-component/downloaded/README-template.md create mode 100644 interactive-rating-component/downloaded/README.md create mode 100644 interactive-rating-component/downloaded/index.html create mode 100644 interactive-rating-component/downloaded/style-guide.md create mode 100644 interactive-rating-component/images/favicon-32x32.png create mode 100644 interactive-rating-component/images/icon-star.svg create mode 100644 interactive-rating-component/images/illustration-thank-you.svg delete mode 100644 interactive-rating-component/src/App.vue delete mode 100644 interactive-rating-component/src/components/HelloWorld.vue diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..88fa451 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/interactive-rating-component/.vscode/extensions.json b/interactive-rating-component/.vscode/extensions.json deleted file mode 100644 index c0a6e5a..0000000 --- a/interactive-rating-component/.vscode/extensions.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] -} diff --git a/interactive-rating-component/README.md b/interactive-rating-component/README.md index ef72fd5..af8d6fb 100644 --- a/interactive-rating-component/README.md +++ b/interactive-rating-component/README.md @@ -1,18 +1,131 @@ -# Vue 3 + TypeScript + Vite +# Frontend Mentor - Interactive rating component solution -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` - + + + + + Frontend Mentor | Interactive rating component + + +
+ + + How did we do? + + Please let us know how we did with your support request. All feedback is appreciated + to help us improve our offering! + + 1 2 3 4 5 + + Submit + + + + + + You selected out of 5 + + Thank you! + + We appreciate you taking the time to give a rating. If you ever need more support, + don’t hesitate to get in touch! + + + + +
+ Challenge by Frontend Mentor. + Coded by Your Name Here. +
+
+ + diff --git a/interactive-rating-component/src/App.vue b/interactive-rating-component/src/App.vue deleted file mode 100644 index bb666a8..0000000 --- a/interactive-rating-component/src/App.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/interactive-rating-component/src/components/HelloWorld.vue b/interactive-rating-component/src/components/HelloWorld.vue deleted file mode 100644 index 7b25f3f..0000000 --- a/interactive-rating-component/src/components/HelloWorld.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - diff --git a/interactive-rating-component/src/main.ts b/interactive-rating-component/src/main.ts index 2425c0f..3c2c0ba 100644 --- a/interactive-rating-component/src/main.ts +++ b/interactive-rating-component/src/main.ts @@ -1,5 +1,6 @@ import { createApp } from 'vue' import './style.css' -import App from './App.vue' -createApp(App).mount('#app') +createApp({ + +}).mount('#app') diff --git a/interactive-rating-component/src/style.css b/interactive-rating-component/src/style.css index 7294765..799870c 100644 --- a/interactive-rating-component/src/style.css +++ b/interactive-rating-component/src/style.css @@ -1,80 +1,16 @@ +/*noinspection CssUnknownTarget*/ +@import url(https://fonts.bunny.net/css?family=overpass:400,700); + :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; + --orange: hsl(25, 97%, 53%); + --white: hsl(0, 0%, 100%); + --lightGrey: hsl(217, 12%, 63%); + --mediumGrey: hsl(216, 12%, 54%); + --darkBlue: hsl(213, 19%, 18%); + --veryDarkBlue: hsl(216, 12%, 8%); - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } + --fontSize: 15px; + --fontFamily: 'Overpass', serif; + --fontWeight: 400; + --fontWeight--bold: 700; }