9 changed files with 73 additions and 157 deletions
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 119 KiB |
@ -1,32 +1,54 @@ |
|||||||
@import './base.css'; |
@import './base.css'; |
||||||
|
|
||||||
#app { |
#app { |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
padding: 0; |
padding: 0; |
||||||
|
min-width: 100vw; |
||||||
|
min-height: 100vh; |
||||||
} |
} |
||||||
|
|
||||||
a, |
a, |
||||||
.green { |
.green { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
color: hsla(160, 100%, 37%, 1); |
color: hsla(160, 100%, 37%, 1); |
||||||
transition: 0.4s; |
transition: 0.4s; |
||||||
} |
} |
||||||
|
|
||||||
@media (hover: hover) { |
@media (hover: hover) { |
||||||
a:hover { |
a:hover { |
||||||
background-color: hsla(160, 100%, 37%, 0.2); |
background-color: hsla(160, 100%, 37%, 0.2); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media (min-width: 1024px) { |
@media (min-width: 1024px) { |
||||||
body { |
body { |
||||||
display: flex; |
display: flex; |
||||||
place-items: center; |
place-items: center; |
||||||
} |
} |
||||||
|
|
||||||
#app { |
#app { |
||||||
display: grid; |
display: grid; |
||||||
grid-template-columns: 1fr 1fr; |
grid-template-columns: 1fr 1fr; |
||||||
padding: 0; |
padding: 0; |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
|
.bwhite { |
||||||
|
background-color: white; |
||||||
|
color: #282e46; |
||||||
|
border: none; |
||||||
|
border-radius: 5px; |
||||||
|
padding: 16px 32px; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
display: inline-block; |
||||||
|
font-size: 1.6rem; |
||||||
|
margin: 4px 2px; |
||||||
|
cursor: pointer; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.wide.bwhite { |
||||||
|
min-width: 16rem; |
||||||
|
margin: 0.5rem; |
||||||
} |
} |
||||||
|
|||||||
@ -1,86 +0,0 @@ |
|||||||
<script setup lang="ts"> |
|
||||||
import WelcomeItem from './WelcomeItem.vue' |
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue' |
|
||||||
import ToolingIcon from './icons/IconTooling.vue' |
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue' |
|
||||||
import CommunityIcon from './icons/IconCommunity.vue' |
|
||||||
import SupportIcon from './icons/IconSupport.vue' |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<DocumentationIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Documentation</template> |
|
||||||
|
|
||||||
Vue’s |
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a> |
|
||||||
provides you with all information you need to get started. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<ToolingIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Tooling</template> |
|
||||||
|
|
||||||
This project is served and bundled with |
|
||||||
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The |
|
||||||
recommended IDE setup is |
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> + |
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If |
|
||||||
you need to test your components and web pages, check out |
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and |
|
||||||
<a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>. |
|
||||||
|
|
||||||
<br /> |
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<EcosystemIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Ecosystem</template> |
|
||||||
|
|
||||||
Get official tools and libraries for your project: |
|
||||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>, |
|
||||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>, |
|
||||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and |
|
||||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If |
|
||||||
you need more resources, we suggest paying |
|
||||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a> |
|
||||||
a visit. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<CommunityIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Community</template> |
|
||||||
|
|
||||||
Got stuck? Ask your question on |
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official |
|
||||||
Discord server, or |
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener" |
|
||||||
>StackOverflow</a |
|
||||||
>. You should also subscribe to |
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow |
|
||||||
the official |
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a> |
|
||||||
twitter account for latest news in the Vue world. |
|
||||||
</WelcomeItem> |
|
||||||
|
|
||||||
<WelcomeItem> |
|
||||||
<template #icon> |
|
||||||
<SupportIcon /> |
|
||||||
</template> |
|
||||||
<template #heading>Support Vue</template> |
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help |
|
||||||
us by |
|
||||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>. |
|
||||||
</WelcomeItem> |
|
||||||
</template> |
|
||||||
Loading…
Reference in new issue