Merge pull request #124 from choldgraf/icon_fix

upgrade textbook
data-8 · Sep 30, 2019 · 6031b7c · 6031b7c
2 parents ffa5f95 + 1898ef0
commit 6031b7c
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 97 deletions.
diff --git a/_includes/buttons/download.html b/_includes/buttons/download.html
@@ -1,11 +1,11 @@
 <div class="download-buttons-dropdown">
-    <button id="dropdown-button-trigger" class="interact-button"><i class="fa fa-download"></i></button>
+    <button id="dropdown-button-trigger" class="interact-button"><img src="{{ site.images_url | relative_url }}/download-solid.svg" alt="Download" /></button>
     <div class="download-buttons">
         {% if site.use_download_button and page.interact_link -%}
         <a href="{{ page.interact_link | relative_url }}" download>
-        <button id="interact-button-download" class="interact-button">ORIG</button>
+        <button id="interact-button-download" class="interact-button">{{ page.suffix | capitalize }}</button>
         </a>
         {% endif %}
-        <a id="interact-button-print"><button id="interact-button-download" class="interact-button">PDF</button></a>
+        <a id="interact-button-print"><button id="interact-button-download" class="interact-button">.pdf</button></a>
     </div>
 </div>
diff --git a/_includes/head.html b/_includes/head.html
@@ -15,8 +15,6 @@
   {% include metadata.json %}
   </script>
   <link rel="stylesheet" href="{{ site.css_url | relative_url }}/styles.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/solid.css">
 
   <!-- <link rel="manifest" href="/manifest.json"> -->
   <!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#efae0a"> -->

diff --git a/_includes/js/thebelab-cell-button.html b/_includes/js/thebelab-cell-button.html
@@ -6,7 +6,7 @@
 
 const thebelabCellButton = id =>
   `<a id="thebelab-cell-button-${id}" class="btn thebebtn o-tooltip--left" data-tooltip="Interactive Mode">
-    <img src="{{ site.images_url | relative_url }}/edit-button.svg" alt="Start interactive mode">
+    <img src="{{ site.images_url | relative_url }}/edit-button.svg" alt="Start thebelab interactive mode">
   </a>`
 
 

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -16,7 +16,7 @@
 {% assign chapter_num = 1 %}
 
 <nav id="js-sidebar" class="c-textbook__sidebar">
-  {% if site.textbook_logo %}<a href="{{ site.textbook_logo_link }}"><img src="{{ site.textbook_logo | relative_url }}" class="textbook_logo" id="sidebar-logo" data-turbolinks-permanent/></a>{% endif %}
+  {% if site.textbook_logo %}<a href="{{ site.textbook_logo_link }}"><img src="{{ site.textbook_logo | relative_url }}" class="textbook_logo" id="sidebar-logo" alt="textbook logo" data-turbolinks-permanent/></a>{% endif %}
   <h2 class="c-sidebar__title">{{ site.title }}</h2>
   <ul class="c-sidebar__chapters">
     {% for chapter in site.data.toc %}

diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -13,9 +13,11 @@
   </div>
   <!-- Empty sidebar placeholder that we'll auto-fill with javascript -->
   <aside class="sidebar__right">
-    <header><h4 class="nav__title"><i class="fa fa-list"></i> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
+    <header><h4 class="nav__title"><img src="{{ site.images_url | relative_url }}/list-solid.svg" alt="Search" /> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
     <nav class="onthispage">
     </nav>
   </aside>
-  <a href="{{ '/search.html' | relative_url }}" class="topbar-right-button" id="search-button"><i class="fa fa-search"></i></a>
+  <a href="{{ '/search.html' | relative_url }}" class="topbar-right-button" id="search-button">
+    <img src="{{ site.images_url | relative_url }}/search-solid.svg" alt="Search" />
+  </a>
 </div>
diff --git a/_sass/components/_components.topbar.scss b/_sass/components/_components.topbar.scss
@@ -29,14 +29,13 @@
   }
 
   .topbar-right-button {
-    font-size: 1.4em;
     display: block;
     float: right;
-    color: #7a8288;
-    padding: 0 0.5rem;
+    padding: 0 1rem;
 
-    &:hover {
-      color: $color-links;
+    img {
+      width: 20px;
+      margin-top: 4px;
     }
   }
 }
@@ -61,4 +60,8 @@
   &:hover div.download-buttons {
     display: block;
   }
+
+  img {
+    height: 18px;
+  }
 }
diff --git a/_sass/objects/_objects.thebelab-in-cell-button.scss b/_sass/objects/_objects.thebelab-in-cell-button.scss
@@ -4,7 +4,7 @@
   top: 0;
   right: $spacing-unit;
 
-  margin: $spacing-unit-tiny;
+  margin: $spacing-unit-tiny/2 $spacing-unit-tiny;
   width: $spacing-unit;
   height: $spacing-unit;
   padding: 0 4px 2px;

diff --git a/_sass/page/components/_components.sidebar-right.scss b/_sass/page/components/_components.sidebar-right.scss
@@ -34,6 +34,12 @@ aside.sidebar__right {
     text-transform: uppercase;
     letter-spacing: 1px;
 
+    // Icon
+    img {
+        width: 15px;
+        padding-bottom: 2px;
+    }
+
     // Show/hide navbar underneath
     nav {
         transition: opacity .25s ease-in-out, height .25s ease-in-out;

diff --git a/assets/images/download-solid.svg b/assets/images/download-solid.svg
diff --git a/assets/images/edit-button.svg b/assets/images/edit-button.svg
diff --git a/assets/images/list-solid.svg b/assets/images/list-solid.svg
diff --git a/assets/images/search-solid.svg b/assets/images/search-solid.svg
diff --git a/assets/js/page/copy-button.js b/assets/js/page/copy-button.js
@@ -1,9 +1,14 @@
 /**
  * Set up copy/paste for code blocks
  */
+const copySVG = `<svg aria-labelledby="title" aria-hidden="true" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <title id="title" lang="en">Copy code</title>
+  <path fill="#777" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path>
+  </svg>`
+
 const clipboardButton = id =>
   `<a id="copy-button-${id}" class="btn copybtn o-tooltip--left" data-tooltip="Copy" data-clipboard-target="#${id}">
-    <i class="far fa-copy"></i>
+    ${copySVG}
   </a>`
 
 // Clears selected text since ClipboardJS will select the text when copying