Move styles into separate files
Minor version bump
This commit is contained in:
Jan Groß
@@ -40,7 +40,7 @@
|
||||
|
||||
elevation="5"
|
||||
>
|
||||
MPS v0.0.1 by Minzkraut - Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
|
||||
MPS v0.0.2 by Minzkraut - Send feedback via <a href="https://mnz.gg/discord" title="Minzkrauts Discord">Discord </a> - Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</template>
|
||||
@@ -61,8 +61,9 @@ export default {
|
||||
</script>
|
||||
<style>
|
||||
|
||||
a {
|
||||
margin-left: 5px;
|
||||
a, footer.footer a {
|
||||
margin: 0 5px;
|
||||
color: #52BD6F;
|
||||
}
|
||||
.v-color-picker__alpha {
|
||||
display: none;
|
||||
|
||||
@@ -110,73 +110,14 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../styles/preview.scss';
|
||||
@import '../styles/specifics.scss';
|
||||
</style>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
|
||||
#intro {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 25px;
|
||||
|
||||
@media (max-width: 680px) {
|
||||
width: 100%;
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 915px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
resize: horizontal;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
//height: calc(45vh - 16px);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 62.5%;
|
||||
background-color: red;
|
||||
}
|
||||
.overlay-panels {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.overlay-icons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-size:cover;
|
||||
background-image: url('../assets/midari_overlay.png');
|
||||
}
|
||||
|
||||
.user-image {
|
||||
position: absolute;
|
||||
left: 1.6%;
|
||||
top: 2.3%;
|
||||
width: 14.5%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
@@ -193,57 +134,23 @@ export default {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
#preview {
|
||||
order: -1;
|
||||
//flex-basis: 50%;
|
||||
}
|
||||
#commands {
|
||||
min-width: 300px;
|
||||
flex-grow: 1;
|
||||
align-self: flex-start;
|
||||
|
||||
.command {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 6px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: #0a0a0a;
|
||||
border-radius: 5px;
|
||||
padding: 11px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h3 {
|
||||
margin: 25px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||
},
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs',
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify',
|
||||
},
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
41
src/styles/preview.scss
Normal file
41
src/styles/preview.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.profile-container {
|
||||
width: 915px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
resize: horizontal;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
|
||||
.profile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 62.5%;
|
||||
background-color: red;
|
||||
}
|
||||
.overlay-panels {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.overlay-icons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-size:cover;
|
||||
background-image: url('../assets/midari_overlay.png');
|
||||
}
|
||||
|
||||
.user-image {
|
||||
position: absolute;
|
||||
left: 1.6%;
|
||||
top: 2.3%;
|
||||
width: 14.5%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
48
src/styles/specifics.scss
Normal file
48
src/styles/specifics.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
#intro {
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 25px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 25px;
|
||||
|
||||
@media (max-width: 680px) {
|
||||
width: 100%;
|
||||
padding: 25px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#commands {
|
||||
min-width: 300px;
|
||||
flex-grow: 1;
|
||||
align-self: flex-start;
|
||||
|
||||
.command {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 6px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.code {
|
||||
background-color: #0a0a0a;
|
||||
border-radius: 5px;
|
||||
padding: 11px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user