translate all sass to scss
This commit is contained in:
153
src/App.vue
153
src/App.vue
@@ -23,71 +23,90 @@
|
|||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="scss">
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap')
|
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap')
|
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
|
||||||
:root
|
:root {
|
||||||
--dark-bg: #1a1a1a
|
--dark-bg: #1a1a1a;
|
||||||
--dark-bg2: #212121
|
--dark-bg2: #212121;
|
||||||
--dark-bg3: #313131
|
--dark-bg3: #313131;
|
||||||
--light: #c0c0c0
|
--light: #c0c0c0;
|
||||||
*
|
}
|
||||||
margin: 0
|
* {
|
||||||
body
|
margin: 0;
|
||||||
background-color: var(--dark-bg)
|
}
|
||||||
font-family: 'Lexend', sans-serif
|
body {
|
||||||
color: var(--light)
|
background-color: var(--dark-bg);
|
||||||
// overflow-y: scroll
|
font-family: 'Lexend', sans-serif;
|
||||||
nav
|
color: var(--light);
|
||||||
background-color: var(--dark-bg2)
|
// overflow-y: scroll;
|
||||||
display: flex
|
nav {
|
||||||
flex-direction: row
|
background-color: var(--dark-bg2);
|
||||||
padding: .3em 1.5em
|
display: flex;
|
||||||
*
|
flex-direction: row;
|
||||||
margin: 0 .2em
|
padding: 0.3em 1.5em;
|
||||||
.gractwoRoot
|
* {
|
||||||
color: inherit
|
margin: 0 0.2em;
|
||||||
text-decoration: inherit
|
}
|
||||||
display: flex
|
.gractwoRoot {
|
||||||
flex-direction: row
|
color: inherit;
|
||||||
transition-duration: 100ms
|
text-decoration: inherit;
|
||||||
&:focus,&:hover
|
display: flex;
|
||||||
transform: scale(1.05) rotate(2deg)
|
flex-direction: row;
|
||||||
h1
|
transition-duration: 100ms;
|
||||||
font-size: 2.3rem
|
&:focus,
|
||||||
letter-spacing: .05em
|
&:hover {
|
||||||
div
|
transform: scale(1.05) rotate(2deg);
|
||||||
margin-left: 1rem
|
}
|
||||||
display: flex
|
h1 {
|
||||||
flex-direction: row
|
font-size: 2.3rem;
|
||||||
justify-content: center
|
letter-spacing: 0.05em;
|
||||||
align-items: center
|
}
|
||||||
*
|
}
|
||||||
transition-duration: 100ms
|
div {
|
||||||
text-transform: uppercase
|
margin-left: 1rem;
|
||||||
font-size: 1.3rem
|
display: flex;
|
||||||
color: inherit
|
flex-direction: row;
|
||||||
text-decoration: none
|
justify-content: center;
|
||||||
opacity: 0.7
|
align-items: center;
|
||||||
margin: 0 .7rem
|
* {
|
||||||
&:focus,&:hover
|
transition-duration: 100ms;
|
||||||
opacity: 1
|
text-transform: uppercase;
|
||||||
text-decoration: underline
|
font-size: 1.3rem;
|
||||||
transform: translate(0, -.1em)
|
color: inherit;
|
||||||
::-webkit-scrollbar
|
text-decoration: none;
|
||||||
background-color: var(--dark-bg)
|
opacity: 0.7;
|
||||||
&:hover
|
margin: 0 0.7rem;
|
||||||
background-color: var(--dark-bg2)
|
&:focus,
|
||||||
::-webkit-scrollbar-thumb
|
&:hover {
|
||||||
background-color: var(--dark-bg2)
|
opacity: 1;
|
||||||
border-radius: 16px
|
text-decoration: underline;
|
||||||
border: 4px solid var(--dark-bg)
|
transform: translate(0, -0.1em);
|
||||||
&:hover
|
}
|
||||||
background-color: var(--dark-bg3)
|
}
|
||||||
border: 4px solid var(--dark-bg2)
|
}
|
||||||
|
}
|
||||||
@media only screen and (max-width: 872px)
|
}
|
||||||
.gractwoRoot
|
::-webkit-scrollbar {
|
||||||
h1
|
background-color: var(--dark-bg);
|
||||||
display: none
|
&:hover {
|
||||||
|
background-color: var(--dark-bg2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--dark-bg2);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 4px solid var(--dark-bg);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--dark-bg3);
|
||||||
|
border: 4px solid var(--dark-bg2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 872px) {
|
||||||
|
.gractwoRoot {
|
||||||
|
h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -22,37 +22,46 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
<style lang="scss" scoped>
|
||||||
.card
|
.card {
|
||||||
background-color: var(--dark-bg2)
|
background-color: var(--dark-bg2);
|
||||||
display: flex
|
display: flex;
|
||||||
flex-direction: row
|
flex-direction: row;
|
||||||
margin: 1rem
|
margin: 1rem;
|
||||||
border-radius: 8px
|
border-radius: 8px;
|
||||||
width: 24rem
|
width: 24rem;
|
||||||
user-select: none
|
user-select: none;
|
||||||
color: inherit
|
color: inherit;
|
||||||
text-decoration: inherit
|
text-decoration: inherit;
|
||||||
transition-duration: 100ms
|
transition-duration: 100ms;
|
||||||
img
|
img {
|
||||||
width: 84px
|
width: 84px;
|
||||||
border-radius: 8px 0 0 8px
|
border-radius: 8px 0 0 8px;
|
||||||
.card-inner
|
}
|
||||||
padding: .2rem
|
.card-inner {
|
||||||
margin-left: .5rem
|
padding: 0.2rem;
|
||||||
.name
|
margin-left: 0.5rem;
|
||||||
font-size: 1.7em
|
.name {
|
||||||
letter-spacing: 0.1em
|
font-size: 1.7rem;
|
||||||
.meta
|
letter-spacing: 0.1em;
|
||||||
opacity: 0.5
|
}
|
||||||
&:focus,&:hover
|
.meta {
|
||||||
background-color: var(--dark-bg3)
|
opacity: 0.5;
|
||||||
transform: scale(1.05)
|
}
|
||||||
|
}
|
||||||
@media only screen and (max-width: 872px)
|
&:focus,
|
||||||
.card
|
&:hover {
|
||||||
font-size: .8em
|
background-color: var(--dark-bg3);
|
||||||
width: 18rem
|
transform: scale(1.05);
|
||||||
img
|
}
|
||||||
width: 64px
|
}
|
||||||
|
@media only screen and (max-width: 872px) {
|
||||||
|
.card {
|
||||||
|
font-size: 0.8em;
|
||||||
|
width: 18rem;
|
||||||
|
img {
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -91,48 +91,64 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="scss" scoped>
|
||||||
main
|
main {
|
||||||
padding: 3rem 8rem
|
padding: 3rem 8rem;
|
||||||
a
|
a {
|
||||||
color: #fb636b
|
color: #fb636b;
|
||||||
.g
|
}
|
||||||
position: absolute
|
.g {
|
||||||
top: 0
|
position: absolute;
|
||||||
right: 15%
|
top: 0;
|
||||||
animation-name: logovibe
|
right: 15%;
|
||||||
animation-iteration-count: infinite
|
animation-name: logovibe;
|
||||||
animation-duration: 2s
|
animation-iteration-count: infinite;
|
||||||
z-index: -10
|
animation-duration: 2s;
|
||||||
.second
|
z-index: -10;
|
||||||
margin-top: 18rem
|
}
|
||||||
.cardContainer
|
.second {
|
||||||
display: inline-flex
|
margin-top: 18rem;
|
||||||
flex-wrap: wrap
|
.cardContainer {
|
||||||
margin-right: .1rem
|
display: inline-flex;
|
||||||
.third
|
flex-wrap: wrap;
|
||||||
margin-top: 2rem
|
margin-right: 0.1rem;
|
||||||
.fourth
|
}
|
||||||
margin-top: 4rem
|
}
|
||||||
.textblock
|
.third {
|
||||||
padding-right: 40%
|
margin-top: 2rem;
|
||||||
text-align: justify
|
}
|
||||||
|
.fourth {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
.textblock {
|
||||||
|
padding-right: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes logovibe
|
@keyframes logovibe {
|
||||||
0%
|
0% {
|
||||||
transform: rotate(5deg)
|
transform: rotate(5deg);
|
||||||
50%
|
}
|
||||||
transform: rotate(-9deg) scale(0.9)
|
50% {
|
||||||
100%
|
transform: rotate(-9deg) scale(0.9);
|
||||||
transform: rotate(5deg)
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 872px)
|
@media only screen and (max-width: 872px) {
|
||||||
main
|
main {
|
||||||
padding: 3rem 1rem
|
padding: 3rem 1rem;
|
||||||
.g
|
.g {
|
||||||
position: absolute
|
position: absolute;
|
||||||
top: 8.5%
|
top: 8.5%;
|
||||||
width: 184px
|
width: 184px;
|
||||||
.textblock
|
}
|
||||||
padding-right: 2%
|
.textblock {
|
||||||
|
padding-right: 2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user