From 5ae654667f85eca598c90ce129129b61ffcf945b Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Tue, 5 Mar 2024 23:54:06 +0100
Subject: [PATCH] Add icons
---
package.json | 3 ++-
sass/style.scss | 4 ++++
static/webfonts | 1 +
templates/shortcodes/teckids_related.html | 18 +++++++++---------
yarn.lock | 5 +++++
5 files changed, 21 insertions(+), 10 deletions(-)
create mode 120000 static/webfonts
diff --git a/package.json b/package.json
index 0504140c..38f56a98 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
{
"dependencies": {
- "bulma": "^0.9.4"
+ "bulma": "^0.9.4",
+ "@fortawesome/fontawesome-free": "^6.5.1"
}
}
diff --git a/sass/style.scss b/sass/style.scss
index 07e28b8f..3672ce49 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -6,6 +6,10 @@ $title-color: inherit;
@import "./_teckids.scss";
$footer-background-color: $teckids-blue-light;
+@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+
@import "../node_modules/bulma/bulma.sass";
@import "./_menu.scss";
diff --git a/static/webfonts b/static/webfonts
new file mode 120000
index 00000000..886ba37d
--- /dev/null
+++ b/static/webfonts
@@ -0,0 +1 @@
+../node_modules/@fortawesome/fontawesome-free/webfonts
\ No newline at end of file
diff --git a/templates/shortcodes/teckids_related.html b/templates/shortcodes/teckids_related.html
index e959c8bf..1ef29a2d 100644
--- a/templates/shortcodes/teckids_related.html
+++ b/templates/shortcodes/teckids_related.html
@@ -7,9 +7,9 @@
<div class="column is-one-third">
<div class="media">
<div class="media-left">
- <figure class="image is-48x48">
- <img src="" alt="Wiki-Icon">
- </figure>
+ <div class="icon is-large">
+ <i class="fa-solid fa-2x fa-book"></i>
+ </div>
</div>
<div class="media-content">
<a href="https://wiki.teckids.org/{{page.extra.platforms.wiki}}">
@@ -20,9 +20,9 @@
</div>
<div class="media">
<div class="media-left">
- <figure class="image is-48x48">
- <img src="" alt="Forum-Icon">
- </figure>
+ <div class="icon is-large">
+ <i class="fa-brands fa-2x fa-discourse"></i>
+ </div>
</div>
<div class="media-content">
<a href="https://forum.teckids.org/{{page.extra.platforms.forum}}">
@@ -33,9 +33,9 @@
</div>
<div class="media">
<div class="media-left">
- <figure class="image is-48x48">
- <img src="" alt="Wiki-Icon">
- </figure>
+ <div class="icon is-large">
+ <i class="fa-solid fa-2x fa-comments"></i>
+ </div>
</div>
<div class="media-content">
<a href="https://matrix.to/#/{{page.extra.platforms.chat}}">
diff --git a/yarn.lock b/yarn.lock
index 5d2f031a..b25640a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
# yarn lockfile v1
+"@fortawesome/fontawesome-free@^6.5.1":
+ version "6.5.1"
+ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz#55cc8410abf1003b726324661ce5b0d1c10de258"
+ integrity sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==
+
bulma@^0.9.4:
version "0.9.4"
resolved "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz"
--
GitLab