finalise card layout, toast css, tooltip css

src/components/Card.vue

@@ -22,19 +22,23 @@
 					</p>
 				</div>
 				<div class="cardInnerInfoButtons">
-					<g-link to="/" v-if="external">
+					<g-link :to="`${external}`" v-if="external">
 						<i class="fas fa-link" />
 					</g-link>
-					<g-link to="/" v-if="steam">
+					<g-link :to="`${steam}`" v-if="steam">
 						<i class="fab fa-steam" />
 					</g-link>
-					<g-link to="/" v-if="github">
+					<g-link :to="`${github}`" v-if="github">
 						<i class="fab fa-github"></i>
 					</g-link>
-					<g-link to="/" v-if="facebook">
+					<g-link :to="`${facebook}`" v-if="facebook">
 						<i class="fab fa-facebook"></i>
 					</g-link>
-					<g-link to="/" v-if="discord">
+					<g-link
+						to="/"
+						v-if="discord"
+						v-tooltip="`Kliknij by skopiować do schowka!`"
+					>
 						<i class="fab fa-discord" />
 						{{ discord }}
 					</g-link>
@@ -58,6 +62,16 @@ export default {
 		facebook: String,
 		discord: String,
 	},
+	methods: {
+		copyDiscord: function() {
+			// this.$copyText(discord);
+			this.$toasted.show(`Skopiowano do schowka!`, {
+				duration: 2000,
+				className: 'toastcss',
+				icon: 'check',
+			});
+		},
+	},
 };
 </script>
 
@@ -89,6 +103,9 @@ export default {
 		.cardInnerInfo {
 			padding: 0.8rem;
 			padding-top: 0.6rem;
+			min-height: 100%;
+			width: 100%;
+			position: relative;
 			.cardInnerInfoTitle {
 				display: flex;
 				flex-direction: row;
@@ -117,9 +134,11 @@ export default {
 			.cardInnerInfoButtons {
 				display: flex;
 				flex-direction: row;
-				justify-content: right;
+				justify-content: flex-end;
-				align-items: baseline;
+				position: absolute;
-				margin-top: 0.6rem;
+				bottom: 0.5rem;
+				right: 0.5rem;
+				// margin-top: 0.6rem;
 				a {
 					color: var(--graytext);
 					text-decoration: inherit;

src/layouts/Default.vue

@@ -4,6 +4,14 @@
 	</div>
 </template>
 
+<static-query>
+query {
+  metadata {
+    siteName
+  }
+}
+</static-query>
+
 <style lang="scss">
 @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
@@ -46,10 +54,109 @@ html {
 }
 </style>
 
-<static-query>
+<style lang="scss">
-query {
+// TOAST STYLING
-  metadata {
+.toastcss {
-    siteName
+	background-color: var(--gray) !important;
-  }
+	border-left: 4px solid var(--red);
+	border-bottom: 3px solid;
+	border-image-slice: 1;
+	border-image-source: linear-gradient(
+		90deg,
+		rgba(251, 99, 107, 1) 0%,
+		rgba(97, 242, 234, 1) 100%
+	);
 }
-</static-query>
+</style>
+
+<style lang="scss">
+// TOOLTIP STYLING
+.tooltip {
+	display: block !important;
+	z-index: 10000;
+	.tooltip-inner {
+		background: var(--gray);
+		box-shadow: 0 6px 18px black;
+		border-radius: 4px;
+		padding: 5px 10px 4px;
+		border-bottom: 3px solid;
+		border-image-slice: 1;
+		border-image-source: linear-gradient(
+			90deg,
+			rgba(251, 99, 107, 1) 0%,
+			rgba(97, 242, 234, 1) 100%
+		);
+	}
+	.tooltip-arrow {
+		width: 0;
+		height: 0;
+		border-style: solid;
+		position: absolute;
+		margin: 5px;
+		border-color: #aeabab;
+		z-index: 1;
+	}
+	&[x-placement^='top'] {
+		margin-bottom: 5px;
+		.tooltip-arrow {
+			border-width: 5px 5px 0 5px;
+			border-left-color: transparent !important;
+			border-right-color: transparent !important;
+			border-bottom-color: transparent !important;
+			bottom: -5px;
+			left: calc(50% - 5px);
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+	&[x-placement^='bottom'] {
+		margin-top: 5px;
+		.tooltip-arrow {
+			border-width: 0 5px 5px 5px;
+			border-left-color: transparent !important;
+			border-right-color: transparent !important;
+			border-top-color: transparent !important;
+			top: -5px;
+			left: calc(50% - 5px);
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+	&[x-placement^='right'] {
+		margin-left: 5px;
+		.tooltip-arrow {
+			border-width: 5px 5px 5px 0;
+			border-left-color: transparent !important;
+			border-top-color: transparent !important;
+			border-bottom-color: transparent !important;
+			left: -5px;
+			top: calc(50% - 5px);
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+	&[x-placement^='left'] {
+		margin-right: 5px;
+		.tooltip-arrow {
+			border-width: 5px 0 5px 5px;
+			border-top-color: transparent !important;
+			border-right-color: transparent !important;
+			border-bottom-color: transparent !important;
+			right: -5px;
+			top: calc(50% - 5px);
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+	&[aria-hidden='true'] {
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.15s, visibility 0.15s;
+	}
+	&[aria-hidden='false'] {
+		visibility: visible;
+		opacity: 1;
+		transition: opacity 0.15s;
+	}
+}
+</style>

src/pages/Index.vue

@@ -11,7 +11,7 @@
 				</div>
 			</g-link>
 			<p style="text-align: center">
-				Strona w trakcie rewrite-u! Zapraszamy później.
+				Strona w trakcie rewrite-u! Niektóre rzeczy mogą nie działać.
 			</p>
 			<div class="header-buttons">
 				<g-link to="/discord">Discord</g-link>
@@ -54,11 +54,11 @@
 					name="Jakub Mańczak"
 					nickname="jamesen"
 					photo="01"
-					description="Wykonywacz zadań, pisacz kodu, rysownik grafik, zarządca."
+					description="Przywódca bez jakichkolwiek umiejętności przewodniczych."
-					external="true"
+					external="/jamesen-external"
-					steam="true"
+					steam="/jamesen-steam"
-					facebook="true"
+					facebook="/jamesen-facebook"
-					github="true"
+					github="/jamesen-github"
 					discord="j4mesen#1429"
 				/>
 				<Card
@@ -66,27 +66,32 @@
 					tabindex="0"
 					name="Olek Kulka"
 					nickname="KuOlek"
-					description="Reprezentant medialny."
+					photo="02"
+					description="Reprezentant medialny w obliczu braku zainteresowanych mediów."
+					discord="KuOlek#8433"
 				/>
 				<Card
 					id="adam"
 					tabindex="0"
 					name="Adam Cała"
 					nickname="Be Elephant"
-					description=""
+					photo="03"
+					description="Legenda głosi że płonące strzały w powietrzu zwiastują słonia."
 				/>
 				<Card
 					id="mollin"
 					tabindex="0"
 					name="Jakub Mollin"
 					nickname="Mollin"
-					description=""
+					photo="04"
+					description="Kandydat do artykułu pt. 'Śmierć z roześmiania' na Wikipedii."
 				/>
 				<Card
 					id="franek"
 					tabindex="0"
 					name="Franek Cała"
 					nickname="Bavil Gravlax"
+					photo="05"
 					description="Pełnoprawny członek tajemnego społeczeństwa kocyków."
 				/>
 				<Card name="... ?" />