Use FontAwesome CSS instead of SVGs

eduke32 · Jul 26, 2018 · d70b6cb · d70b6cb
1 parent 8a36240
commit d70b6cb
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 31 deletions.
diff --git a/_ext.py b/_ext.py
@@ -91,20 +91,25 @@ def parse_item(entry, entry_tags=[], meta={}, meta_tags=[]):
         ext = os.path.splitext(result["repo"])[1]
 
         if "github.com" in domain:
-            result["repoiconxlink"] = "github"
+            result["repoiconname"] = "github"
+            result["repoiconstyle"] = "fab"
             result["repotitle"] = "GitHub"
         elif (".google.com" in domain or
               "googlecode.com" in domain):
-            result["repoiconxlink"] = "google"
+            result["repoiconname"] = "google"
+            result["repoiconstyle"] = "fab"
             result["repotitle"] = "Google Code"
         elif "bitbucket.org" in domain:
-            result["repoiconxlink"] = "bitbucket"
+            result["repoiconname"] = "bitbucket"
+            result["repoiconstyle"] = "fab"
             result["repotitle"] = "Bitbucket"
         elif "gitlab.com" in domain:
-            result["repoiconxlink"] = "gitlab"
+            result["repoiconname"] = "gitlab"
+            result["repoiconstyle"] = "fab"
             result["repotitle"] = "Gitlab"
         elif ext in (".zip", ".tar", ".tgz", ".tbz2", ".bz2", ".xz", ".rar"):
-            result["repoiconxlink"] = "box"
+            result["repoiconname"] = "box"
+            result["repoiconstyle"] = "fas"
             result["repotitle"] = "Archive"
 
     return result

diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
   <meta name="application-url" content="http://osgameclones.com/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="static/main.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
   <title>Open Source Game Clones</title>
 </head>
 
@@ -19,14 +20,6 @@
 <body>
   <script type="text/javascript" src="static/startInDarkMode.js"></script>
 
-  <div id="icons">
-    {% include 'static/github-brands.svg' %}
-    {% include 'static/google-brands.svg' %}
-    {% include 'static/gitlab-brands.svg' %}
-    {% include 'static/bitbucket-brands.svg' %}
-    {% include 'static/box-solid.svg' %}
-  </div>
-
   <header>
     <div class="container">
       <input id="filter" type="search" placeholder="Type to filter">

diff --git a/static/bitbucket-brands.svg b/static/bitbucket-brands.svg
diff --git a/static/box-solid.svg b/static/box-solid.svg
diff --git a/static/github-brands.svg b/static/github-brands.svg
diff --git a/static/gitlab-brands.svg b/static/gitlab-brands.svg
diff --git a/static/google-brands.svg b/static/google-brands.svg
diff --git a/static/main.css b/static/main.css
@@ -183,21 +183,11 @@ dd + dt { margin-top: 1em; }
 }
 
 
-.repoicon,.repoiconlight,.repoicondark {
+.repoicon {
   height: 14px;
   width: 100%;
   padding-left: .2em;
-  display: inline;
-}
-
-.repoicon svg {
-  width: 14px;
-  height: 14px;
-  vertical-align: middle;
-}
-
-#icons {
-  display: none;
+  display: inline !important;
 }
 
 

diff --git a/templates/games.html b/templates/games.html
@@ -83,7 +83,7 @@
       {{ game['name'] }}
     {%- if 'url' in game %}</a>{% endif %}
 
-    {%- if 'repo' in game %} (<a href="{{ game['repo'] }}">repo</a> {%- if 'repoiconxlink' in game %}<div class="repoicon" title="{{ game['repotitle'] }}"><svg aria-hidden="true"><use xlink:href="#{{ game['repoiconxlink'] }}"></svg></div>{%- endif %}){%- endif %}
+    {%- if 'repo' in game %} (<a href="{{ game['repo'] }}">repo</a> {%- if 'repoiconname' in game %}<span class="repoicon {{ game['repoiconstyle'] }} fa-{{ game['repoiconname'] }}" title="{{ game['repotitle'] }}"></span>{%- endif %}){%- endif %}
 
     {%- if 'feed' in game %}
       <a href="{{ game['feed'] }}"><img src="static/feed-icon-14x14.png"/></a>