From 2cd351b027644e23e4b9121d7cfe50ca59e968ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ma=C5=84czak?=
 <56172798+jakubmanczak@users.noreply.github.com>
Date: Sun, 2 May 2021 01:16:19 +0200
Subject: [PATCH] translate all sass to scss

---
 src/App.vue             | 191 +++++++++++++++-------------
 src/components/card.vue | 109 ++++++++--------
 src/views/Home.vue      | 272 +++++++++++++++++++++-------------------
 3 files changed, 308 insertions(+), 264 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c628be8..2ab7dff 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/card.vue b/src/components/card.vue
index 76a02db..f1b5c58 100644
--- a/src/components/card.vue
+++ b/src/components/card.vue
@@ -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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 404e79a..7fbc0b6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -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>