translate all sass to scss
This commit is contained in:
191
src/App.vue
191
src/App.vue
@@ -1,93 +1,112 @@
|
||||
<template>
|
||||
<!-- <div id="nav">
|
||||
<!-- <div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div> -->
|
||||
<nav>
|
||||
<router-link to="/" class="gractwoRoot">
|
||||
<img
|
||||
alt="Vue logo"
|
||||
src="./assets/gractwo-smol.png"
|
||||
style="height: 50px"
|
||||
/>
|
||||
<h1>Gractwo</h1>
|
||||
</router-link>
|
||||
<div>
|
||||
<!-- <router-link to="/">główna</router-link> -->
|
||||
<!-- <router-link to="/o-nas">o nas</router-link> -->
|
||||
<router-link to="/discord" target="_blank">discord</router-link>
|
||||
<router-link to="/facebook" target="_blank">facebook</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
<main></main>
|
||||
<router-view />
|
||||
<nav>
|
||||
<router-link to="/" class="gractwoRoot">
|
||||
<img
|
||||
alt="Vue logo"
|
||||
src="./assets/gractwo-smol.png"
|
||||
style="height: 50px"
|
||||
/>
|
||||
<h1>Gractwo</h1>
|
||||
</router-link>
|
||||
<div>
|
||||
<!-- <router-link to="/">główna</router-link> -->
|
||||
<!-- <router-link to="/o-nas">o nas</router-link> -->
|
||||
<router-link to="/discord" target="_blank">discord</router-link>
|
||||
<router-link to="/facebook" target="_blank">facebook</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
<main></main>
|
||||
<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>
|
||||
|
||||
@@ -1,58 +1,67 @@
|
||||
<template>
|
||||
<router-link :to="link" class="card" target="_blank">
|
||||
<img alt="" :src="require(`../assets/spis/${photo}`)" />
|
||||
<div class="card-inner">
|
||||
<p class="name">{{ name }}</p>
|
||||
<p class="desc">{{ desc }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="link" class="card" target="_blank">
|
||||
<img alt="" :src="require(`../assets/spis/${photo}`)" />
|
||||
<div class="card-inner">
|
||||
<p class="name">{{ name }}</p>
|
||||
<p class="desc">{{ desc }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'card',
|
||||
props: {
|
||||
name: String,
|
||||
photo: String,
|
||||
desc: String,
|
||||
link: String,
|
||||
},
|
||||
});
|
||||
export default defineComponent({
|
||||
name: 'card',
|
||||
props: {
|
||||
name: String,
|
||||
photo: String,
|
||||
desc: String,
|
||||
link: String,
|
||||
},
|
||||
});
|
||||
</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>
|
||||
|
||||
@@ -1,138 +1,154 @@
|
||||
<template>
|
||||
<main>
|
||||
<div class="first">
|
||||
<h1>Witajcie w Gractwie!</h1>
|
||||
<p>
|
||||
Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
|
||||
<br />
|
||||
</p>
|
||||
<gractwosvg class="g" />
|
||||
</div>
|
||||
<div class="second">
|
||||
<h1>Spis Moderacji</h1>
|
||||
<div class="cardContainer">
|
||||
<card
|
||||
name="Jakub Mańczak"
|
||||
photo="j4mesen.png"
|
||||
desc="j4mesen | wannabe programista"
|
||||
link="/j4mesen"
|
||||
/>
|
||||
<card
|
||||
name="Olek Kulka"
|
||||
photo="olek.png"
|
||||
desc="KuOlek | scooby doo stan"
|
||||
link="/kuolek"
|
||||
/>
|
||||
<card
|
||||
name="Adam Cała"
|
||||
photo="adam.png"
|
||||
desc="BeElephant | dosłowny słoń"
|
||||
link="/be-elephant"
|
||||
/>
|
||||
<card
|
||||
name="Jarek Kortals"
|
||||
photo="jarooko.png"
|
||||
desc="Jarooko | nadal tu jest?"
|
||||
link="/jarooko"
|
||||
/>
|
||||
<card
|
||||
name="Jakub Mollin"
|
||||
photo="mollin.png"
|
||||
desc="Mollin | resident grinder"
|
||||
link="/mollin"
|
||||
/>
|
||||
<card
|
||||
name="Franek Cała"
|
||||
photo="franek.png"
|
||||
desc="BavilGravlax | secret society blanket"
|
||||
link="/bavil-gravlax"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h1>Geneza Gractwa</h1>
|
||||
<p class="textblock">
|
||||
Gractwo zostało założone w 2020 roku w odpowiedzi na rozłam PGTF i na
|
||||
<a href="https://youtu.be/zjedLeVGcfE">sytuację z PGTF</a> związaną.
|
||||
Serwer discordowy PGTF pozostający pod kontrolą administracji Gractwa
|
||||
został przeniesiony w stan przejściowy do czasu gdy decyzja o powstaniu
|
||||
Gractwa została podjęta. Po tych wydarzeniach strona internetowa oraz
|
||||
grupa facebookowa Gractwa zostały utworzone. Aktywność na grupie
|
||||
facebookowej nigdy sie nie rozwinęła wystarczająco, by przekształcić sie
|
||||
w pełnoprawną społeczność, ale serwer discord działa cały czas. Strona
|
||||
internetowa służy głównie do uproszczenia linków - do Discorda i
|
||||
Facebooka. <br />
|
||||
<br />
|
||||
Po co więc to piszę? ...Potrzebuję tekstu do zapełnienia strony. <br />
|
||||
<br />
|
||||
~j4mesen
|
||||
</p>
|
||||
</div>
|
||||
<div class="fourth">
|
||||
<p>
|
||||
Gractwo 2020-2021.
|
||||
<router-link to="/git" target="_blank">GitHub</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<main>
|
||||
<div class="first">
|
||||
<h1>Witajcie w Gractwie!</h1>
|
||||
<p>
|
||||
Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
|
||||
<br />
|
||||
</p>
|
||||
<gractwosvg class="g" />
|
||||
</div>
|
||||
<div class="second">
|
||||
<h1>Spis Moderacji</h1>
|
||||
<div class="cardContainer">
|
||||
<card
|
||||
name="Jakub Mańczak"
|
||||
photo="j4mesen.png"
|
||||
desc="j4mesen | wannabe programista"
|
||||
link="/j4mesen"
|
||||
/>
|
||||
<card
|
||||
name="Olek Kulka"
|
||||
photo="olek.png"
|
||||
desc="KuOlek | scooby doo stan"
|
||||
link="/kuolek"
|
||||
/>
|
||||
<card
|
||||
name="Adam Cała"
|
||||
photo="adam.png"
|
||||
desc="BeElephant | dosłowny słoń"
|
||||
link="/be-elephant"
|
||||
/>
|
||||
<card
|
||||
name="Jarek Kortals"
|
||||
photo="jarooko.png"
|
||||
desc="Jarooko | nadal tu jest?"
|
||||
link="/jarooko"
|
||||
/>
|
||||
<card
|
||||
name="Jakub Mollin"
|
||||
photo="mollin.png"
|
||||
desc="Mollin | resident grinder"
|
||||
link="/mollin"
|
||||
/>
|
||||
<card
|
||||
name="Franek Cała"
|
||||
photo="franek.png"
|
||||
desc="BavilGravlax | secret society blanket"
|
||||
link="/bavil-gravlax"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="third">
|
||||
<h1>Geneza Gractwa</h1>
|
||||
<p class="textblock">
|
||||
Gractwo zostało założone w 2020 roku w odpowiedzi na rozłam PGTF i na
|
||||
<a href="https://youtu.be/zjedLeVGcfE">sytuację z PGTF</a> związaną.
|
||||
Serwer discordowy PGTF pozostający pod kontrolą administracji Gractwa
|
||||
został przeniesiony w stan przejściowy do czasu gdy decyzja o powstaniu
|
||||
Gractwa została podjęta. Po tych wydarzeniach strona internetowa oraz
|
||||
grupa facebookowa Gractwa zostały utworzone. Aktywność na grupie
|
||||
facebookowej nigdy sie nie rozwinęła wystarczająco, by przekształcić sie
|
||||
w pełnoprawną społeczność, ale serwer discord działa cały czas. Strona
|
||||
internetowa służy głównie do uproszczenia linków - do Discorda i
|
||||
Facebooka. <br />
|
||||
<br />
|
||||
Po co więc to piszę? ...Potrzebuję tekstu do zapełnienia strony. <br />
|
||||
<br />
|
||||
~j4mesen
|
||||
</p>
|
||||
</div>
|
||||
<div class="fourth">
|
||||
<p>
|
||||
Gractwo 2020-2021.
|
||||
<router-link to="/git" target="_blank">GitHub</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import gractwosvg from '@/components/gractwosvg.vue'; // @ is an alias to /src
|
||||
import card from '@/components/card.vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import gractwosvg from '@/components/gractwosvg.vue'; // @ is an alias to /src
|
||||
import card from '@/components/card.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: {
|
||||
gractwosvg,
|
||||
card,
|
||||
},
|
||||
});
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: {
|
||||
gractwosvg,
|
||||
card,
|
||||
},
|
||||
});
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user