Merge pull request #593 from geneontology/issue-512-fontawesome-upgrade

Upgrade to Font Awesome v6
geneontology · Sep 5, 2024 · 3f00c1d · 3f00c1d
2 parents be26556 + f50d386
commit 3f00c1d
Show file tree

Hide file tree

Showing 25 changed files with 81 additions and 2,738 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -8,7 +8,12 @@
 
 
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-    <link rel="stylesheet" href="{{ "/css/font-awesome.min.css" | prepend: site.baseurl }}">
+
+    <!-- font awesome -->
+    <link rel="stylesheet" href="{{ "/css/fontawesome.min.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/css/brands.min.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/css/regular.min.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/css/solid.min.css" | prepend: site.baseurl }}">
 
     <link rel="shortcut icon" href="{{ "/favicon.ico?1" | prepend: site.baseurl }}">
     {% seo %}

diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -37,23 +37,23 @@
                     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="width: 280px; margin-bottom: 0px;">
 
                         <a href="/search.html" title="Search GO Documentation"   class="dropdown-menu__item__link">
-                            <i class="fa fa-search"></i>
+                            <i class="fa-solid fa-search"></i>
                             &nbsp; Search Documentation</a>
 
                         <a href="{{ " /docs/faq/ " | prepend: site.baseurl }}"  class="dropdown-menu__item__link">
-                            <i class="fa fa-question" style="margin-right: 4px; margin-left: 2px;"></i>
+                            <i class="fa-solid fa-question" style="margin-right: 4px; margin-left: 2px;"></i>
                             &nbsp; Frequently Asked Questions</a>
 
                         <a href="{{ " /docs/go-archives/ " | prepend: site.baseurl }}"  class="dropdown-menu__item__link">
-                            <i class="fa fa-archive" style="margin-right: 4px; margin-left: 2px;"></i>
+                            <i class="fa-solid fa-archive" style="margin-right: 4px; margin-left: 2px;"></i>
                             &nbsp; GO Archives & Deprecated Products/Formats</a>                        
 
                         <a href="{{ " /docs/go-citation-policy/ " | prepend: site.baseurl }}"  class="dropdown-menu__item__link">
-                            <i class="fa fa-pencil" style="margin-right: 4px; margin-left: 2px;"></i>
+                            <i class="fa-solid fa-pencil" style="margin-right: 4px; margin-left: 2px;"></i>
                             &nbsp; Citation Policy & Terms</a>
 
                         <a href="https://help.geneontology.org" target="blank" title="Contact the GO helpdesk"   class="dropdown-menu__item__link">
-                            <i class="fa fa-comments-o"></i>
+                            <i class="fa-regular fa-comments"></i>
                             &nbsp; Contact Us</a>
 
                     </div>
@@ -71,17 +71,17 @@
                     </li>
                     <li>
                         <a href="https://github.com/geneontology" target="blank" style="padding: 8px 3px; font-size: 15px;">
-                            <i class="fa fa-github" aria-hidden="true"></i>
+                            <i class="fa-brands fa-github" aria-hidden="true"></i>
                         </a>
                     </li>
                     <li>
                         <a href="https://twitter.com/news4go" target="blank" style="padding: 8px 3px; font-size: 15px;">
-                            <i class="fa fa-twitter" aria-hidden="true"></i>
+                            <i class="fa-brands fa-twitter" aria-hidden="true"></i>
                         </a>
                     </li>
                     <li style="margin-right: 5px">
                         <a href="https://www.facebook.com/pages/Gene-Ontology/305908656519" target="blank" style="padding: 8px 3px; font-size: 15px;">
-                            <i class="fa fa-facebook" aria-hidden="true"></i>
+                            <i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
                         </a>
                     </li>
                 </ul>

diff --git a/_layouts/goref.html b/_layouts/goref.html
@@ -5,7 +5,7 @@
 <div class="container">
     <div class="u-margin-bottom-medium">
         <a href="{{ '/gorefs' | relative_url }}">
-            <i class="fa fa-chevron-left" aria-hidden="true"></i>
+            <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
             All GO REFs
         </a>
     </div>

diff --git a/_sass/custom/_base.scss b/_sass/custom/_base.scss
@@ -3,8 +3,6 @@
 *::before {
     box-sizing: border-box;
 
-    font-family: "Lato", sans-serif;
-    font-weight: 400 !important;
     line-height: $default-line-height;
 
     outline: none;
@@ -21,10 +19,3 @@ body {
     padding-top: $navbar-height + $navbar-margin-bottom;
     margin-bottom: 46px;
 }
-
-// restoring font-family for FontAwesome icons
-.fa,
-.fa::after,
-.fa::before {
-    font-family: "FontAwesome";
-}
diff --git a/covid-19.html b/covid-19.html
@@ -4,13 +4,6 @@
 ---
 
 <style>
-    *, *::after, *::before {
-        box-sizing: border-box;
-        font-family: "Lato", sans-serif;
-        font-weight: 400;
-        outline: none;
-    }
-
     .banner {
         background-color: red;
         color: white;
@@ -161,7 +154,7 @@ <h2 id="ohp-pt-sars-cov-2">Other human proteins that are possible targets of SAR
 
                         <span class="input-group-btn">
                             <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#00158c,rgba(16,122,222,.5) 100%); padding: 5px 10px; border-radius: 15px" title="Find biological processes over/under represented for that gene set">
-                                GO Processes <i class="fa fa-chevron-right u-line-height-single"></i>
+                                GO Processes <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                             </button>
                         </span>
                     </div>
@@ -189,7 +182,7 @@ <h2 id="ohp-pt-sars-cov-2">Other human proteins that are possible targets of SAR
 
                         <span class="input-group-btn">
                             <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#ca113b,rgba(189,50,80,.5) 100%); padding: 5px 10px; border-radius: 15px" title="Find molecular functions over/under represented for that gene set">
-                                GO Functions <i class="fa fa-chevron-right u-line-height-single"></i>
+                                GO Functions <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                             </button>
                         </span>
                     </div>
@@ -217,7 +210,7 @@ <h2 id="ohp-pt-sars-cov-2">Other human proteins that are possible targets of SAR
 
                         <span class="input-group-btn">
                             <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#dab61a,rgba(253,253,131,.5) 100%);  padding: 5px 10px; border-radius: 15px; color: black" title="Find cellular components over/under represented for that gene set">
-                                GO Components <i class="fa fa-chevron-right u-line-height-single"></i>
+                                GO Components <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                             </button>
                         </span>
                     </div>
@@ -254,7 +247,7 @@ <h2>GO enrichment analysis of human proteins targeted by SARS-CoV-2</h2>
 
                     <span class="input-group-btn">
                         <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#00158c,rgba(16,122,222,.5) 100%); padding: 5px 10px; border-radius: 15px" title="Find biological processes over/under represented for that gene set">
-                            GO Processes <i class="fa fa-chevron-right u-line-height-single"></i>
+                            GO Processes <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                         </button>
                     </span>
                 </div>
@@ -282,7 +275,7 @@ <h2>GO enrichment analysis of human proteins targeted by SARS-CoV-2</h2>
 
                     <span class="input-group-btn">
                         <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#ca113b,rgba(189,50,80,.5) 100%); padding: 5px 10px; border-radius: 15px" title="Find molecular functions over/under represented for that gene set">
-                            GO Functions <i class="fa fa-chevron-right u-line-height-single"></i>
+                            GO Functions <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                         </button>
                     </span>
                 </div>
@@ -310,7 +303,7 @@ <h2>GO enrichment analysis of human proteins targeted by SARS-CoV-2</h2>
 
                     <span class="input-group-btn">
                         <button type="submit" class="btn btn-primary u-no-transform u-anim-move-right" style="border-color: #22612C; margin-left: 4px; background: linear-gradient(150deg,#dab61a,rgba(253,253,131,.5) 100%);  padding: 5px 10px; border-radius: 15px; color: black" title="Find cellular components over/under represented for that gene set">
-                            GO Components <i class="fa fa-chevron-right u-line-height-single"></i>
+                            GO Components <i class="fa-solid fa-chevron-right u-line-height-single"></i>
                         </button>
                     </span>
                 </div>

diff --git a/css/brands.min.css b/css/brands.min.css
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/fontawesome.min.css b/css/fontawesome.min.css
diff --git a/css/main.scss b/css/main.scss
@@ -3,6 +3,11 @@
 ---
 @charset "utf-8";
 
+$font-family-sans-serif: "Lato", sans-serif;
+$font-family-base: $font-family-sans-serif;
+$headings-font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headings-font-weight: 400;
+
 @import
   {% if site.bootwatch %}
     "bootswatch/{{site.bootwatch | downcase}}/variables",
@@ -18,6 +23,10 @@
   "typeahead"
 ;
 
+.navbar {
+  font-family: $font-family-base;
+}
 
-
-
+.jumbotron p {
+  font-weight: 400;
+}
diff --git a/css/regular.min.css b/css/regular.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
diff --git a/css/solid.min.css b/css/solid.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot