Add realistic content to card

content/github.md

@@ -1,6 +1,8 @@
 ---
 title: GitHub
 account: RealOrangeOne
+account_url: https://github.com/realorangeone
+icon: fab fa-github
 ---
 
 My GitHub account

layouts/partials/account-name.html

@@ -0,0 +1 @@
+{{ default "@" .Params.account_prefix }}{{ .Params.account }}

layouts/partials/card.html

@@ -1,11 +1,10 @@
-<div class="card hoverable">
+<a href="{{ .Params.account_url }}">
-    <div class="card-image">
+    <div class="card hoverable">
-        <img src="images/sample-1.jpg" />
+        <i class="card-icon {{ .Params.icon }} fa-7x"></i>
-        <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="fas fa-plus"></i></a>
+        <div class="card-content">
+            <span class="card-title" style="margin-bottom: -8px">{{ .Title }}</span>
+            <span class="card-title username"><h6>{{ partial "account-name.html" . }}</h6></span>
+            <p>{{ .Summary }}</p>
+        </div>
     </div>
-    <div class="card-content">
+</a>
-        <span class="card-title" style="margin-bottom: -8px">{{ .Title }}</span>
-        <span class="card-title"><h6>{{ .Params.account }}</h6></span>
-        <p>{{ .Summary }}</p>
-    </div>
-</div>

scripts/build.sh

@@ -10,4 +10,6 @@ cp -r node_modules/materialize-css/dist/* static/build/
 cp -r node_modules/@fortawesome/fontawesome-free/css/all.min.css static/build/css/font-awesome.css
 cp -r node_modules/@fortawesome/fontawesome-free/webfonts static/build/
 
+cp static/src/* static/build
+
 hugo -v --stepAnalysis --gc

static/src/index.scss

@@ -0,0 +1,14 @@
+$primary: #E85537;
+
+.card {
+    text-align: center;
+    color: black;
+
+    .card-icon {
+        margin-top: 24px;
+    }
+
+    .username {
+        color: $primary;
+    }
+}