Update sidebar CSS and make feather icons local

static/style.css

@@ -23,6 +23,8 @@
   height: 100vh;
   padding-top: 20px;
   border-right: 1px solid darkgray;
+  position: fixed;
+  width: 250px;
 }
 
 #sidebar ul > li {
@@ -191,6 +193,12 @@
     display: block !important;
   }
 
+  #content {
+    left: 250px;
+    width: calc(100% - 250px) !important;
+    position: relative;
+  }
+
   #sidebar.active {
     margin-left: -250px;
   }

templates/article.j2

@@ -8,16 +8,56 @@
 
 {% block navbar %}
 <nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <a href="/"><div class="navbar-brand"><i data-feather="arrow-left" style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;"></i></div></a>
+    <a href="/"><div class="navbar-brand"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#arrow-left"/>
+                </svg></div></a>
     <form class="form-inline ml-auto">
         {# <div class="custom-control custom-switch">
             <input type="checkbox" class="custom-control-input" id="darkSwitch" />
             <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
         </div>
         <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
-        <a class="toolbar-button" href="#"><i data-feather="type"></i></a>
-        <a class="toolbar-button" href="/archive/{{ article[0] }}"><i data-feather="archive"></i></a>
-        <a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;"><i data-feather="trash"></i></a>
+        <a class="toolbar-button" href="#"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#type"/>
+                </svg></a>
+        <a class="toolbar-button" href="/archive/{{ article[0] }}"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
+                </svg></a>
+        <a class="toolbar-button" href="/delete/{{ article[0] }}" style="padding-right: 1rem;"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#trash"/>
+                </svg></a>
     </form>
 </nav>
 {% endblock %}
@@ -51,10 +91,8 @@
 
 {% block scripts %}
 {{ super() }}
-<script src="https://unpkg.com/feather-icons"></script>
 <script>
 $('#article img').css('max-width', '100%');
 $('#article img').css('height', 'auto');
-feather.replace();
 </script>
 {% endblock %}

templates/list.j2

@@ -48,14 +48,36 @@
             {% else %}
                 <li class="nav-item">
             {% endif %}
-                <a href="{{ url_for('index') }}"><i data-feather="home" style="height: 1rem; vertical-align: middle; margin-bottom: 4px;"></i>My List</a>
+                <a href="{{ url_for('index') }}">
+                <svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
+                </svg>My List
+                </a>
             </li>
             {% if request.path == url_for('archived') %}
                 <li class="nav-item active">
             {% else %}
                 <li class="nav-item">
             {% endif %}
-                <a href="{{ url_for('archived') }}"><i data-feather="archive" style="height: 1rem; vertical-align: middle; margin-bottom: 4px;"></i>Archived</a>
+                <a href="{{ url_for('archived') }}"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
+                </svg>Archived</a>
             </li>
         </ul>
     </div>
@@ -86,8 +108,4 @@
 
 {% block scripts %}
 {{ super() }}
-<script src="https://unpkg.com/feather-icons"></script>
-<script>
-feather.replace();
-</script>
 {% endblock %}

templates/save.j2

@@ -34,11 +34,41 @@
     <!-- Sidebar -->
     <div id="sidebar">
         <ul class="list-unstyled components">
-            <li>
-                <a href="/">My List</a>
+            {% if request.path == url_for('index') %}
+                <li class="nav-item active">
+            {% else %}
+                <li class="nav-item">
+            {% endif %}
+                <a href="{{ url_for('index') }}">
+                <svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#home"/>
+                </svg>My List
+                </a>
             </li>
-            <li>
-                <a href="/archived">Archived</a>
+            {% if request.path == url_for('archived') %}
+                <li class="nav-item active">
+            {% else %}
+                <li class="nav-item">
+            {% endif %}
+                <a href="{{ url_for('archived') }}"><svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="height: 1rem; vertical-align: middle; margin-bottom: 4px;">
+                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#archive"/>
+                </svg>Archived</a>
             </li>
         </ul>
     </div>