archiwum/old-gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translate all sass to scss

Browse Source
This commit is contained in:
Jakub Mańczak
2021-05-02 01:16:19 +02:00
parent 991896999f
commit 2cd351b027
3 changed files with 308 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/App.vue
View File

@@ -23,71 +23,90 @@
<router-view />
</template>
<style lang="sass">
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap')
:root
--dark-bg: #1a1a1a
--dark-bg2: #212121
--dark-bg3: #313131
--light: #c0c0c0
*
margin: 0
body
background-color: var(--dark-bg)
font-family: 'Lexend', sans-serif
color: var(--light)
// overflow-y: scroll
nav
background-color: var(--dark-bg2)
display: flex
flex-direction: row
padding: .3em 1.5em
*
margin: 0 .2em
.gractwoRoot
color: inherit
text-decoration: inherit
display: flex
flex-direction: row
transition-duration: 100ms
&:focus,&:hover
transform: scale(1.05) rotate(2deg)
h1
font-size: 2.3rem
letter-spacing: .05em
div
margin-left: 1rem
display: flex
flex-direction: row
justify-content: center
align-items: center
*
transition-duration: 100ms
text-transform: uppercase
font-size: 1.3rem
color: inherit
text-decoration: none
opacity: 0.7
margin: 0 .7rem
&:focus,&:hover
opacity: 1
text-decoration: underline
transform: translate(0, -.1em)
::-webkit-scrollbar
background-color: var(--dark-bg)
&: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 lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
:root {
--dark-bg: #1a1a1a;
--dark-bg2: #212121;
--dark-bg3: #313131;
--light: #c0c0c0;
}
* {
margin: 0;
}
body {
background-color: var(--dark-bg);
font-family: 'Lexend', sans-serif;
color: var(--light);
// overflow-y: scroll;
nav {
background-color: var(--dark-bg2);
display: flex;
flex-direction: row;
padding: 0.3em 1.5em;
* {
margin: 0 0.2em;
}
.gractwoRoot {
color: inherit;
text-decoration: inherit;
display: flex;
flex-direction: row;
transition-duration: 100ms;
&:focus,
&:hover {
transform: scale(1.05) rotate(2deg);
}
h1 {
font-size: 2.3rem;
letter-spacing: 0.05em;
}
}
div {
margin-left: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
* {
transition-duration: 100ms;
text-transform: uppercase;
font-size: 1.3rem;
color: inherit;
text-decoration: none;
opacity: 0.7;
margin: 0 0.7rem;
&:focus,
&:hover {
opacity: 1;
text-decoration: underline;
transform: translate(0, -0.1em);
}
}
}
}
}
::-webkit-scrollbar {
background-color: var(--dark-bg);
&: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>

75
src/components/card.vue
View File

@@ -22,37 +22,46 @@
});
</script>
<style lang="sass" scoped>
.card
background-color: var(--dark-bg2)
display: flex
flex-direction: row
margin: 1rem
border-radius: 8px
width: 24rem
user-select: none
color: inherit
text-decoration: inherit
transition-duration: 100ms
img
width: 84px
border-radius: 8px 0 0 8px
.card-inner
padding: .2rem
margin-left: .5rem
.name
font-size: 1.7em
letter-spacing: 0.1em
.meta
opacity: 0.5
&:focus,&:hover
background-color: var(--dark-bg3)
transform: scale(1.05)
@media only screen and (max-width: 872px)
.card
font-size: .8em
width: 18rem
img
width: 64px
<style lang="scss" scoped>
.card {
background-color: var(--dark-bg2);
display: flex;
flex-direction: row;
margin: 1rem;
border-radius: 8px;
width: 24rem;
user-select: none;
color: inherit;
text-decoration: inherit;
transition-duration: 100ms;
img {
width: 84px;
border-radius: 8px 0 0 8px;
}
.card-inner {
padding: 0.2rem;
margin-left: 0.5rem;
.name {
font-size: 1.7rem;
letter-spacing: 0.1em;
}
.meta {
opacity: 0.5;
}
}
&:focus,
&:hover {
background-color: var(--dark-bg3);
transform: scale(1.05);
}
}
@media only screen and (max-width: 872px) {
.card {
font-size: 0.8em;
width: 18rem;
img {
width: 64px;
}
}
}
</style>

100
src/views/Home.vue
View File

@@ -91,48 +91,64 @@
});
</script>
<style lang="sass">
main
padding: 3rem 8rem
a
color: #fb636b
.g
position: absolute
top: 0
right: 15%
animation-name: logovibe
animation-iteration-count: infinite
animation-duration: 2s
z-index: -10
.second
margin-top: 18rem
.cardContainer
display: inline-flex
flex-wrap: wrap
margin-right: .1rem
.third
margin-top: 2rem
.fourth
margin-top: 4rem
.textblock
padding-right: 40%
text-align: justify
<style lang="scss" scoped>
main {
padding: 3rem 8rem;
a {
color: #fb636b;
}
.g {
position: absolute;
top: 0;
right: 15%;
animation-name: logovibe;
animation-iteration-count: infinite;
animation-duration: 2s;
z-index: -10;
}
.second {
margin-top: 18rem;
.cardContainer {
display: inline-flex;
flex-wrap: wrap;
margin-right: 0.1rem;
}
}
.third {
margin-top: 2rem;
}
.fourth {
margin-top: 4rem;
}
.textblock {
padding-right: 40%;
text-align: justify;
}
}
@keyframes logovibe
0%
transform: rotate(5deg)
50%
transform: rotate(-9deg) scale(0.9)
100%
transform: rotate(5deg)
@keyframes logovibe {
0% {
transform: rotate(5deg);
}
50% {
transform: rotate(-9deg) scale(0.9);
}
100% {
transform: rotate(5deg);
}
}
@media only screen and (max-width: 872px)
main
padding: 3rem 1rem
.g
position: absolute
top: 8.5%
width: 184px
.textblock
padding-right: 2%
@media only screen and (max-width: 872px) {
main {
padding: 3rem 1rem;
.g {
position: absolute;
top: 8.5%;
width: 184px;
}
.textblock {
padding-right: 2%;
}
}
}
</style>