-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
50 additions
and
235 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,11 @@ | ||
| <script setup lang="ts"> | ||
| import { RouterLink, RouterView } from 'vue-router' | ||
| import HelloWorld from './components/HelloWorld.vue' | ||
| import {RouterLink, RouterView} from 'vue-router' | ||
| import HelloWorld from './components/HelloWorld.vue' | ||
| </script> | ||
|
|
||
| <template> | ||
| <header> | ||
| <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> | ||
|
|
||
| <div class="wrapper"> | ||
| <HelloWorld msg="You did it!" /> | ||
|
|
||
| <nav> | ||
| <RouterLink to="/">Home</RouterLink> | ||
| <RouterLink to="/about">About</RouterLink> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <RouterView /> | ||
| <main> | ||
| <RouterView/> | ||
| </main> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| header { | ||
| line-height: 1.5; | ||
| max-height: 100vh; | ||
| } | ||
| .logo { | ||
| display: block; | ||
| margin: 0 auto 2rem; | ||
| } | ||
| nav { | ||
| width: 100%; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| margin-top: 2rem; | ||
| } | ||
| nav a.router-link-exact-active { | ||
| color: var(--color-text); | ||
| } | ||
| nav a.router-link-exact-active:hover { | ||
| background-color: transparent; | ||
| } | ||
| nav a { | ||
| display: inline-block; | ||
| padding: 0 1rem; | ||
| border-left: 1px solid var(--color-border); | ||
| } | ||
| nav a:first-of-type { | ||
| border: 0; | ||
| } | ||
| @media (min-width: 1024px) { | ||
| header { | ||
| display: flex; | ||
| place-items: center; | ||
| padding-right: calc(var(--section-gap) / 2); | ||
| } | ||
| .logo { | ||
| margin: 0 2rem 0 0; | ||
| } | ||
| header .wrapper { | ||
| display: flex; | ||
| place-items: flex-start; | ||
| flex-wrap: wrap; | ||
| } | ||
| nav { | ||
| text-align: left; | ||
| margin-left: -1rem; | ||
| font-size: 1rem; | ||
| padding: 1rem 0; | ||
| margin-top: 1rem; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,3 @@ | ||
| @import './base.css'; | ||
|
|
||
| #app { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| a, | ||
| .green { | ||
| text-decoration: none; | ||
| color: hsla(160, 100%, 37%, 1); | ||
| transition: 0.4s; | ||
| padding: 3px; | ||
| } | ||
|
|
||
| @media (hover: hover) { | ||
| a:hover { | ||
| background-color: hsla(160, 100%, 37%, 0.2); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| body { | ||
| display: flex; | ||
| place-items: center; | ||
| } | ||
|
|
||
| #app { | ||
| display: grid; | ||
| grid-template-columns: 1fr 1fr; | ||
| padding: 0 2rem; | ||
| } | ||
| } | ||
| @import 'https://cdn.jsdelivr.net/npm/[email protected]/css/Bulma.min.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,41 @@ | ||
| <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" rel="noopener" | ||
| >Cypress Component Testing</a | ||
| >. | ||
|
|
||
| <br /> | ||
|
|
||
| More instructions are available in <code>README.md</code>. | ||
| </WelcomeItem> | ||
| <h1>[be] in awee</h1> | ||
| <!-- and my pfp is spinning in the middle with radiance--> | ||
| <!-- surrounded by stars? gifs??--> | ||
| <img/> | ||
|
|
||
| <WelcomeItem> | ||
| <template #icon> | ||
| <EcosystemIcon /> | ||
| </template> | ||
| <template #heading>Ecosystem</template> | ||
| <h2>Christofer: {{ attributes[0] }}</h2> | ||
|
|
||
| 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> | ||
|
|
||
| <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' | ||
| import {computed, ref,watch} from "vue"; | ||
| const attributes = ref([ | ||
| "computer scientist", | ||
| "software engineer", | ||
| "that guy", | ||
| "child of God", | ||
| "doing his best", | ||
| "sleeping", | ||
| "problem solver", | ||
| "life-long learner", | ||
| "student of all", | ||
| "code monkey", | ||
| "prime programmer", | ||
| ]); | ||
| setInterval(() => { | ||
| const attr = attributes.value.shift(); | ||
| if(attr) | ||
| attributes.value.push(attr) | ||
| }, 2000); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,5 @@ | ||
| <template> | ||
| <div class="about"> | ||
| <h1>This is an about page</h1> | ||
| </div> | ||
| </template> | ||
| <h1>Me</h1> | ||
|
|
||
| <style> | ||
| @media (min-width: 1024px) { | ||
| .about { | ||
| min-height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
| </style> | ||
| <p>Hi it's me Christofer</p> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <script setup lang="ts"> | ||
| import TheWelcome from '../components/TheWelcome.vue' | ||
| import TheWelcome from '../components/TheWelcome.vue' | ||
| </script> | ||
|
|
||
| <template> | ||
| <main> | ||
| <TheWelcome /> | ||
| </main> | ||
| <main> | ||
| <TheWelcome/> | ||
| </main> | ||
| </template> |