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

191
src/App.vue
View File

@@ -1,93 +1,112 @@
<template> <template>
<!-- <div id="nav"> <!-- <div id="nav">
<router-link to="/">Home</router-link> | <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> <router-link to="/about">About</router-link>
</div> --> </div> -->
<nav> <nav>
<router-link to="/" class="gractwoRoot"> <router-link to="/" class="gractwoRoot">
<img <img
alt="Vue logo" alt="Vue logo"
src="./assets/gractwo-smol.png" src="./assets/gractwo-smol.png"
style="height: 50px" style="height: 50px"
/> />
<h1>Gractwo</h1> <h1>Gractwo</h1>
</router-link> </router-link>
<div> <div>
<!-- <router-link to="/">główna</router-link> --> <!-- <router-link to="/">główna</router-link> -->
<!-- <router-link to="/o-nas">o nas</router-link> --> <!-- <router-link to="/o-nas">o nas</router-link> -->
<router-link to="/discord" target="_blank">discord</router-link> <router-link to="/discord" target="_blank">discord</router-link>
<router-link to="/facebook" target="_blank">facebook</router-link> <router-link to="/facebook" target="_blank">facebook</router-link>
</div> </div>
</nav> </nav>
<main></main> <main></main>
<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>

109
src/components/card.vue
View File

@@ -1,58 +1,67 @@
<template> <template>
<router-link :to="link" class="card" target="_blank"> <router-link :to="link" class="card" target="_blank">
<img alt="" :src="require(`../assets/spis/${photo}`)" /> <img alt="" :src="require(`../assets/spis/${photo}`)" />
<div class="card-inner"> <div class="card-inner">
<p class="name">{{ name }}</p> <p class="name">{{ name }}</p>
<p class="desc">{{ desc }}</p> <p class="desc">{{ desc }}</p>
</div> </div>
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'card', name: 'card',
props: { props: {
name: String, name: String,
photo: String, photo: String,
desc: String, desc: String,
link: String, link: String,
}, },
}); });
</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>

272
src/views/Home.vue
View File

@@ -1,138 +1,154 @@
<template> <template>
<main> <main>
<div class="first"> <div class="first">
<h1>Witajcie w Gractwie!</h1> <h1>Witajcie w Gractwie!</h1>
<p> <p>
Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie? Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
<br /> <br />
</p> </p>
<gractwosvg class="g" /> <gractwosvg class="g" />
</div> </div>
<div class="second"> <div class="second">
<h1>Spis Moderacji</h1> <h1>Spis Moderacji</h1>
<div class="cardContainer"> <div class="cardContainer">
<card <card
name="Jakub Mańczak" name="Jakub Mańczak"
photo="j4mesen.png" photo="j4mesen.png"
desc="j4mesen | wannabe programista" desc="j4mesen | wannabe programista"
link="/j4mesen" link="/j4mesen"
/> />
<card <card
name="Olek Kulka" name="Olek Kulka"
photo="olek.png" photo="olek.png"
desc="KuOlek | scooby doo stan" desc="KuOlek | scooby doo stan"
link="/kuolek" link="/kuolek"
/> />
<card <card
name="Adam Cała" name="Adam Cała"
photo="adam.png" photo="adam.png"
desc="BeElephant | dosłowny słoń" desc="BeElephant | dosłowny słoń"
link="/be-elephant" link="/be-elephant"
/> />
<card <card
name="Jarek Kortals" name="Jarek Kortals"
photo="jarooko.png" photo="jarooko.png"
desc="Jarooko | nadal tu jest?" desc="Jarooko | nadal tu jest?"
link="/jarooko" link="/jarooko"
/> />
<card <card
name="Jakub Mollin" name="Jakub Mollin"
photo="mollin.png" photo="mollin.png"
desc="Mollin | resident grinder" desc="Mollin | resident grinder"
link="/mollin" link="/mollin"
/> />
<card <card
name="Franek Cała" name="Franek Cała"
photo="franek.png" photo="franek.png"
desc="BavilGravlax | secret society blanket" desc="BavilGravlax | secret society blanket"
link="/bavil-gravlax" link="/bavil-gravlax"
/> />
</div> </div>
</div> </div>
<div class="third"> <div class="third">
<h1>Geneza Gractwa</h1> <h1>Geneza Gractwa</h1>
<p class="textblock"> <p class="textblock">
Gractwo zostało założone w 2020 roku w odpowiedzi na rozłam PGTF i na 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ą. <a href="https://youtu.be/zjedLeVGcfE">sytuację z PGTF</a> związaną.
Serwer discordowy PGTF pozostający pod kontrolą administracji Gractwa Serwer discordowy PGTF pozostający pod kontrolą administracji Gractwa
został przeniesiony w stan przejściowy do czasu gdy decyzja o powstaniu został przeniesiony w stan przejściowy do czasu gdy decyzja o powstaniu
Gractwa została podjęta. Po tych wydarzeniach strona internetowa oraz Gractwa została podjęta. Po tych wydarzeniach strona internetowa oraz
grupa facebookowa Gractwa zostały utworzone. Aktywność na grupie grupa facebookowa Gractwa zostały utworzone. Aktywność na grupie
facebookowej nigdy sie nie rozwinęła wystarczająco, by przekształcić sie 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 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 internetowa służy głównie do uproszczenia linków - do Discorda i
Facebooka. <br /> Facebooka. <br />
<br /> <br />
Po co więc to piszę? ...Potrzebuję tekstu do zapełnienia strony. <br /> Po co więc to piszę? ...Potrzebuję tekstu do zapełnienia strony. <br />
<br /> <br />
~j4mesen ~j4mesen
</p> </p>
</div> </div>
<div class="fourth"> <div class="fourth">
<p> <p>
Gractwo 2020-2021. Gractwo 2020-2021.
<router-link to="/git" target="_blank">GitHub</router-link> <router-link to="/git" target="_blank">GitHub</router-link>
</p> </p>
</div> </div>
</main> </main>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import gractwosvg from '@/components/gractwosvg.vue'; // @ is an alias to /src import gractwosvg from '@/components/gractwosvg.vue'; // @ is an alias to /src
import card from '@/components/card.vue'; import card from '@/components/card.vue';
export default defineComponent({ export default defineComponent({
name: 'Home', name: 'Home',
components: { components: {
gractwosvg, gractwosvg,
card, card,
}, },
}); });
</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>