rm: fontawesome support (#1266)

* rm: fontawesome support * rm: variable
scylladb · Oct 21, 2024 · 9a8ae54 · 9a8ae54
1 parent 0ca3088
commit 9a8ae54
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 19 deletions.
diff --git a/docs/source/examples/hero-box.rst b/docs/source/examples/hero-box.rst
@@ -47,7 +47,7 @@ The ``hero-box`` directive supports the following options:
   * - ``button_icon``
     - string
     -
-    - fa fa-home
+    - icon-home
     - A list of CSS classes to render an icon, separated by comma or space.
   * - ``button_icon_position``
     - string

diff --git a/docs/source/examples/topic-box.rst b/docs/source/examples/topic-box.rst
@@ -42,7 +42,7 @@ The ``topic-box`` directive supports the following options:
   * - ``icon``
     - string
     -
-    - fa fa-home
+    - icon-home
     - A list of CSS classes to render icons, separated by comma or space.
   * - ``image``
     - string
@@ -77,7 +77,7 @@ Using:
 
     .. topic-box::
         :title: Lorem Ipsum
-        :icon: fa fa-github
+        :icon: icon-github
         :link: #
         :anchor: Lorem ipsum
 
@@ -87,7 +87,7 @@ Results in:
 
 .. topic-box::
     :title: Lorem Ipsum
-    :icon: fa fa-github
+    :icon: icon-github
     :link: #
     :anchor: Lorem ipsum
 

diff --git a/sphinx_scylladb_theme/__init__.py b/sphinx_scylladb_theme/__init__.py
@@ -75,8 +75,8 @@ def override_rst_epilog(config):
 .. role:: raw-html(raw)
    :format: html
 
-.. |v| replace:: :raw-html:`<i class="inline-icon fa fa-check" aria-hidden="true"></i>`
-.. |x| replace:: :raw-html:`<i class="inline-icon fa fa-times" aria-hidden="true"></i>`
+.. |v| replace:: :raw-html:`<i class="inline-icon icon-check" aria-hidden="true"></i>`
+.. |x| replace:: :raw-html:`<i class="inline-icon icon-cancel" aria-hidden="true"></i>`
 """
 
     epilog = config.rst_epilog or ""

diff --git a/sphinx_scylladb_theme/extensions/topic_box.py b/sphinx_scylladb_theme/extensions/topic_box.py
@@ -84,7 +84,7 @@ def run(self):
             generate_template(
                 """
                 <div class="{class_name}__anchor">{anchor}
-                 <i class="fa fa-external-link" aria-hidden="true"></i>
+                 <i class="icon-newtab" aria-hidden="true"></i>
                 </div>
                 """
                 if target_attr == 'target="_blank"'

diff --git a/sphinx_scylladb_theme/layout.html b/sphinx_scylladb_theme/layout.html
@@ -82,9 +82,6 @@
                 {% include 'scylladb-scripts.html' %}
             {% endif %}
         {% endblock %}
-        <!-- Font Awesome -->
-        <script src="https://kit.fontawesome.com/b1870adf6a.js" crossorigin="anonymous"></script>
-        <!-- End Font Awesome -->
     </head>
 
     <body>

diff --git a/sphinx_scylladb_theme/static/css/main.css b/sphinx_scylladb_theme/static/css/main.css
diff --git a/src/css/base/_reset.scss b/src/css/base/_reset.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 html {
   box-sizing: border-box;
   scroll-padding-top: 100px;
@@ -23,16 +25,17 @@ a {
 
 a.reference:after {
   font-size: $font-xs;
-  font-family: $font-icons-family;
   padding: 0 4px;
 }
 
 a.reference.external:after {
-  content: "\f08e";
+  @extend .icon;
+  content: map.get($icons, "newtab");
 }
 
 a.reference.download:after {
-  content: "\f019";
+  @extend .icon;
+  content: map.get($icons, "download");
 }
 
 a:hover {

diff --git a/src/css/base/_variables.scss b/src/css/base/_variables.scss
@@ -74,7 +74,6 @@ $xxlarge: 1440px;
 
 // Font variables
 $font-base-family: "Roboto", sans-serif;
-$font-icons-family: "FontAwesome";
 
 $font-md: 16px;
 $font-sm: 14px;

diff --git a/src/css/components/_admonitions.scss b/src/css/components/_admonitions.scss
@@ -62,9 +62,6 @@
       border-left: 8px solid var(--info);
     }
 
-    .admonition-title:before {
-
-    }
     .admonition-title {
       color: var(--info) !important;
     }

diff --git a/src/css/components/_content.scss b/src/css/components/_content.scss
@@ -29,7 +29,6 @@
     li::before {
       content: "\2022";
       color: var(--text-muted);
-      font-family: $font-icons-family;
       float: left;
       font-size: 20px;
       font-weight: bold;