diff --git a/src/components/Card.vue b/src/components/Card.vue
index dc7e875..de5d044 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -4,6 +4,12 @@
+
@@ -15,7 +21,24 @@
{{ description }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ discord }}
+
+
@@ -29,6 +52,11 @@ export default {
nickname: String,
photo: String,
description: String,
+ external: String,
+ steam: String,
+ github: String,
+ facebook: String,
+ discord: String,
},
};
@@ -41,6 +69,7 @@ export default {
// padding: 1rem;
margin: 1rem 0.2rem;
width: 49%;
+ height: 8rem;
transition-duration: var(--trandur);
.cardInnerFlex {
display: flex;
@@ -51,13 +80,20 @@ export default {
background-color: black;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
+ img {
+ width: 8rem;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
}
.cardInnerInfo {
- padding: 1rem;
+ padding: 0.8rem;
+ padding-top: 0.6rem;
.cardInnerInfoTitle {
display: flex;
flex-direction: row;
align-items: baseline;
+ padding-bottom: 0.3rem;
h3 {
margin-right: 1rem;
}
@@ -66,11 +102,36 @@ export default {
}
}
.cardInnerInfoDescription {
- // font-size: 0.8rem;
+ font-size: 1rem;
}
.cardInnerInfoMeta {
display: flex;
flex-direction: row;
+ align-items: baseline;
+ color: var(--graytext);
+ margin-top: 0.4rem;
+ i {
+ margin-right: 0.3rem;
+ }
+ }
+ .cardInnerInfoButtons {
+ display: flex;
+ flex-direction: row;
+ justify-content: right;
+ align-items: baseline;
+ margin-top: 0.6rem;
+ a {
+ color: var(--graytext);
+ text-decoration: inherit;
+ padding: 0.2rem;
+ margin: 0 0.2rem;
+ border-radius: 3px;
+ &:hover,
+ &:focus {
+ background-color: var(--red);
+ color: var(--black);
+ }
+ }
}
}
}
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index df0af9e..d924e1b 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -40,6 +40,7 @@ html {
&:hover,
&:focus {
background-color: var(--light-red);
+ outline: none;
}
}
}
diff --git a/src/main.js b/src/main.js
index fd9522c..272376b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,14 @@
// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
-import DefaultLayout from '~/layouts/Default.vue'
+import DefaultLayout from '~/layouts/Default.vue';
-export default function (Vue, { router, head, isClient }) {
- // Set default layout as a global component
- Vue.component('Layout', DefaultLayout)
+export default function(Vue, { router, head, isClient }) {
+ head.script.push({
+ src: 'https://kit.fontawesome.com/0b1492a165.js',
+ crossorigin: 'anonymous',
+ body: true,
+ });
+ // Set default layout as a global component
+ Vue.component('Layout', DefaultLayout);
}
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 5946ff6..f02aa01 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -13,6 +13,10 @@
Strona w trakcie rewrite-u! Zapraszamy później.
+
@@ -20,6 +24,7 @@
Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
+ 🎮💖
@@ -47,16 +52,20 @@
id="jamesen"
tabindex="0"
name="Jakub Mańczak"
- nickname="j4mesen"
- photo="-"
- description="Odpowiedzialny za software podtrzymujący Gractwo."
+ nickname="jamesen"
+ photo="01"
+ description="Wykonywacz zadań, pisacz kodu, rysownik grafik, zarządca."
+ external="true"
+ steam="true"
+ facebook="true"
+ github="true"
+ discord="j4mesen#1429"
/>
@@ -96,8 +102,8 @@
@@ -136,6 +142,15 @@ main {
margin-right: 0.5rem;
}
}
+ .header-buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ a {
+ margin: 0 2rem;
+ }
+ }
section {
padding: 2rem 0 4rem;
.cards {