symbolically link bootstrap+icons folders, and <use> icons as svgs

IsharMud · Oct 27, 2024 · 340ad63 · 340ad63
1 parent 55001a7
commit 340ad63
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 34 deletions.
diff --git a/apps/accounts/templates/portal.html b/apps/accounts/templates/portal.html
@@ -1,5 +1,6 @@
 {% extends "layout.html" %}
 {% load humanize %}
+{% load static %}
 {% block meta_title %}Portal{% endblock meta_title %}
 {% block meta_description %}Portal for players to see information about their account and characters.{% endblock meta_description %}
 {% block meta_url %}{% url 'portal' %}#portal{% endblock meta_url %}
@@ -16,8 +17,11 @@
     {% if user.is_staff %}
             <li class="bg-black border border-secondary card-text list-group-item-dark list-group-item" title="Admin">
                 <i class="bi bi-gear text-ishar"></i>
-                <a class="list-group-item-text" href="{% url 'admin:index' %}" target="_blank">
+                <a class="list-group-item-text icon-link" href="{% url 'admin:index' %}" target="_blank">
                     Admin
+                    <svg class="bi text-secondary" aria-hidden="true">
+                        <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                    </svg>
                 </a>
             </li>
     {% endif %}

diff --git a/apps/challenges/templates/challenges.html b/apps/challenges/templates/challenges.html
@@ -27,9 +27,7 @@
     <table class="table table-hover table-dark table-flush table-sm table-responsive table-striped" id="challengesTable">
         {% if CURRENT_SEASON %}
         <caption class="caption-top" id="cycle">
-            <a class="anchor-link" href="#cycle" aria-label="Link to this section: Next Cycle: {{ CURRENT_SEASON.get_next_cycle | naturaltime }} ({{ CURRENT_SEASON.get_next_cycle }})">
-                &#x23;
-            </a>
+            <a class="bi bi-recycle anchor-link" href="#cycle" aria-label="Link to this section: Next Cycle: {{ CURRENT_SEASON.get_next_cycle | naturaltime }} ({{ CURRENT_SEASON.get_next_cycle }})"></a>
             Challenges will next cycle <strong>{{ CURRENT_SEASON.get_next_cycle | naturaltime }}</strong> at
             <time class="fst-italic" datetime="{{ CURRENT_SEASON.get_next_cycle|date:"c" }}">
                 {{ CURRENT_SEASON.get_next_cycle }}

diff --git a/apps/clients/templates/clients.html b/apps/clients/templates/clients.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% load static %}
 {% block meta_title %}MUD Clients{% endblock meta_title %}
 {% block meta_description %}A few MUD clients that we have heard good things about.{% endblock meta_description %}
 {% block meta_url %}{% url 'clients' %}#clients{% endblock meta_url %}
@@ -15,7 +16,12 @@
 <div class="alert alert-dark alert-dismissible fade show" role="alert" id="clients-alert">
     <p class="lead">
         While you can certainly enjoy the game via
-        <a href="{% url 'connect' %}" target="_blank" title="Mudslinger">the Mudslinger web client</a>,
+        <a class="icon-link" href="{% url 'connect' %}" target="_blank" title="Mudslinger">
+            the Mudslinger web client
+            <svg class="bi text-secondary" aria-hidden="true">
+                <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+            </svg>
+        </a>,
         you might prefer to connect to the game with software designed specifically to help you play a MUD.
     </p>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@@ -37,9 +43,12 @@
         <ul class="border-0 border-secondary bg-black list-group list-group-dark">
         {% for client in category.clients.all %}
             {% if client.is_visible %}
-            <li class="bi bi-dot border-0 bg-black list-group-item list-item-group-dark">
-                <a class="list-group-item-text" href="{{ client.url }}" id="client-{{ client.name | slugify }}" target="_blank" title="{{ client.name }}">
+            <li class="bi bi-dot border-0 bg-black list-group-item list-item-group-dark" title="{{ client.name }}">
+                <a class="list-group-item-text icon-link" href="{{ client.url }}" id="client-{{ client.name|slugify }}" target="_blank">
                     {{ client.name }}
+                    <svg class="bi text-secondary" aria-hidden="true">
+                        <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                    </svg>
                 </a>
             </li>
             {% endif %}

diff --git a/apps/core/static/bootstrap b/apps/core/static/bootstrap
@@ -0,0 +1 @@
+bootstrap-5.3.3-dist
diff --git a/apps/core/static/bootstrap-icons b/apps/core/static/bootstrap-icons
@@ -0,0 +1 @@
+bootstrap-icons-1.11.3
diff --git a/apps/core/static/css/style.css b/apps/core/static/css/style.css
@@ -19,12 +19,6 @@ input { border: 0.1rem solid var(--ishar-color); background-color: #000; color:
 h1, h2, h3, h4, h5, strong, th, label, th { color: var(--ishar-color); }
 summary h3 { display: inline-block; }
 
-a[target="_blank"]::after {
-    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
-    margin-left: 0.25rem;
-    filter: invert(1);
-}
-
 a { color: #09f; text-decoration: none; }
 a:active, a:visited { color: #6082b6; }
 a:hover { color: #d6d6d7; }

diff --git a/apps/core/templates/layout.html b/apps/core/templates/layout.html
@@ -27,9 +27,9 @@
         <link rel="icon" type="image/png" sizes="32x32" href="{% static "images/favicon-32x32.png" %}">
         <link rel="icon" type="image/png" sizes="16x16" href="{% static "images/favicon-16x16.png" %}">
         <link rel="shortcut icon" href="{% static "images/favicon.ico" %}" type="image/x-icon">
-        <link href="{% static 'bootstrap-5.3.3-dist/css/bootstrap.min.css' %}" rel="stylesheet">
-        <script src="{% static 'bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js' %}"></script>
-        <link rel="stylesheet" href="{% static 'bootstrap-icons-1.11.3/font/bootstrap-icons.min.css' %}">
+        <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
+        <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+        <link rel="stylesheet" href="{% static 'bootstrap-icons/font/bootstrap-icons.min.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
 {% block includes %}
 {% endblock includes %}
@@ -63,8 +63,11 @@
                         </li>
 
                         <li class="nav-item" title="Connect to {{ WEBSITE_TITLE }}">
-                            <a class="bi bi-globe nav-link" href="{% url 'connect' %}" target="_blank">
+                            <a class="bi bi-globe icon-link nav-link" href="{% url 'connect' %}" target="_blank">
                                 Connect
+                                <svg class="bi text-secondary" aria-hidden="true">
+                                    <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                                </svg>
                             </a>
                         </li>
 
@@ -166,8 +169,11 @@
                             <ul class="dropdown-menu dropdown-menu-dark bg-black border border-secondary p-3">
     {% if user.is_staff %}
                                 <li class="nav-item" title="Admin">
-                                    <a class="bg-black bi bi-gear nav-link dropdown-item" href="{% url 'admin:index' %}" target="_blank">
+                                    <a class="bg-black bi bi-gear nav-link dropdown-item icon-link" href="{% url 'admin:index' %}" target="_blank">
                                         Admin
+                                        <svg class="bi text-secondary" aria-hidden="true">
+                                            <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                                        </svg>
                                     </a>
                                 </li>
                                 <li class="nav-item text-ishar">
@@ -319,8 +325,11 @@
             <div class="row border-ishar bg-black rounded align-items-center m-1 p-3">
 
                 <div class="col">
-                    <a class="bi bi-envelope-at" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" title="E-mail Us! ({{ ADMIN_EMAIL }})">
+                    <a class="bi bi-envelope-at icon-link" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" title="E-mail Us! ({{ ADMIN_EMAIL }})">
                         E-mail us!
+                        <svg class="bi text-secondary" aria-hidden="true">
+                            <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                        </svg>
                     </a>
                 </div>
 
@@ -331,8 +340,11 @@
                 </div>
 
                 <div class="col">
-                    <a class="bi bi-discord" href="{% url 'discord' %}" target="_blank" title="Join us on Discord!">
+                    <a class="bi bi-discord icon-link" href="{% url 'discord' %}" target="_blank" title="Join us on Discord!">
                         Join us on Discord!
+                        <svg class="bi text-secondary" aria-hidden="true">
+                            <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                        </svg>
                     </a>
                 </div>
 

diff --git a/apps/core/templates/start.html b/apps/core/templates/start.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% load static %}
 {% block meta_title %}Get Started{% endblock meta_title %}
 {% block meta_description %}A quick guide to start playing the game.{% endblock meta_description %}
 {% block meta_url %}{% url 'start' %}#start{% endblock meta_url %}
@@ -40,7 +41,13 @@
 <div class="card m-1">
     <div class="card-body">
         <p class="card-text lead">
-            Playing Ishar starts by <a href="{% url 'connect' %}" target="_blank">connecting to the game</a>
+            Playing Ishar starts by
+            <a class="icon-link" href="{% url 'connect' %}" target="_blank" title="Connect to {{ WEBSITE_TITLE }} via Mudslinger">
+                connecting to the game
+                <svg class="bi text-secondary" aria-hidden="true">
+                    <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                </svg>
+            </a>
             and typing "<code>new</code>" at the login prompt.  The game walks you through the few steps of
             creating a new character, then drops you into the virtual world with a few meager possessions and
             the lowest standing in the game, level 1:

diff --git a/apps/faqs/templates/faq.html b/apps/faqs/templates/faq.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% load static %}
 {% block meta_title %}Frequently Asked Questions{% endblock meta_title %}
 {% block meta_description %}A few common questions that are asked about {{ WEBSITE_TITLE }}.{% endblock meta_description %}
 {% block meta_url %}{% url 'faq' %}#faq{% endblock meta_url %}
@@ -21,7 +22,12 @@
         You may also want to visit the
         <a href="{% url 'help_page' help_topic='MUD Basics' %}#topic" title="Help: MUD Basics">MUD Basics help page</a>,
         our <a href="{% url 'start' %}#start" title="Get Started">getting started guide</a>, and
-        <a href="{% url 'discord' %}" target="_blank" title="{{ WEBSITE_TITLE }} Discord">join us on Discord</a>!
+        <a class="icon-link" href="{% url 'discord' %}" target="_blank" title="{{ WEBSITE_TITLE }} Discord">
+            join us on Discord
+            <svg class="bi text-secondary" aria-hidden="true">
+                <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#discord"></use>
+            </svg>
+        </a>
     </p>
     {% endif %}
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@@ -48,10 +54,12 @@
 <div class="alert alert-dark alert-dismissible fade show" role="alert" id="faq-footer-alert">
     <p class="lead">
         If there is anything that you think is missing, please feel free to reach out, by e-mailing
-        <a class="code font-monospace" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" style="" title="E-mail: {{ ADMIN_EMAIL }}">
+        <a class="code font-monospace icon-link" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" style="" title="E-mail: {{ ADMIN_EMAIL }}">
             {{ ADMIN_EMAIL }}
-            <i class="bi bi-envelope-at"></i>
-        </a>.
+            <svg class="bi" aria-hidden="true">
+                <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#envelope-at"></use>
+            </svg>
+        </a>
     </p>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>

diff --git a/apps/feedback/templates/feedback.html b/apps/feedback/templates/feedback.html
@@ -1,5 +1,6 @@
 {% extends "layout.html" %}
 {% load humanize %}
+{% load static %}
 {% block meta_title %}Feedback{% endblock meta_title %}
 {% block meta_description %}Feedback about {{ WEBSITE_TITLE }}.{% endblock meta_description %}
 {% block meta_url %}{% url 'feedback' %}#feedback{% endblock meta_url %}
@@ -69,9 +70,12 @@
 <div class="alert alert-dark alert-dismissible fade show m-3" role="alert" id="mail-alert">
     <p>
         Additionally, you are always more than welcome to reach out by e-mailing
-        <a class="code font-monospace" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" style="" title="E-mail: {{ ADMIN_EMAIL }}">
-            {{ ADMIN_EMAIL }} <i class="bi bi-envelope-at"></i>
-        </a>.
+        <a class="code font-monospace icon-link" href="mailto:{{ ADMIN_EMAIL }}" target="_blank" style="" title="E-mail: {{ ADMIN_EMAIL }}">
+            {{ ADMIN_EMAIL }}
+            <svg class="bi" aria-hidden="true">
+                <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#envelope-at"></use>
+            </svg>
+        </a>
     </p>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>

diff --git a/apps/help/templates/help_page.html b/apps/help/templates/help_page.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% load static %}
 {% block meta_title %}Help: {{ help_topic.name }}{% endblock meta_title %}
 {% block meta_description %}Help pages for {{ WEBSITE_TITLE }}{% endblock meta_description %}
 {% block meta_url %}{% if help_topic %}{{ help_topic.get_absolute_url }}{% else %}{% url 'help' %}#help{% endif %}{% endblock meta_url %}
@@ -104,8 +105,13 @@
         <p class="m-1 p-1 lead">
             <strong>If you are new here</strong>, you may want to download one of many
             <a href="{% url 'clients' %}#clients" title="MUD clients">MUD clients</a>,
-            see our <a href="{% url 'start' %}#start" title="getting started guide">getting started guide</a>,
-            and <a href="{% url 'discord' %}" target="_blank" title="{{ WEBSITE_TITLE }} Discord Invitation">join us on Discord!</a>
+            see our <a href="{% url 'start' %}#start" title="getting started guide">getting started guide</a>, and
+            <a class="icon-link" href="{% url 'discord' %}" target="_blank" title="{{ WEBSITE_TITLE }} Discord">
+                join us on Discord
+                <svg class="bi text-secondary" aria-hidden="true">
+                    <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#discord"></use>
+                </svg>
+            </a>
         </p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>

diff --git a/apps/history/templates/history.html b/apps/history/templates/history.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% load static %}
 {% block meta_title %}History{% endblock meta_title %}
 {% block meta_description %}A history of {{ WEBSITE_TITLE }}.{% endblock meta_description %}
 {% block meta_url %}{% url 'history' %}#history{% endblock meta_url %}
@@ -64,7 +65,12 @@
         <div class="card-body">
             <p class="card-text lead">
                 The original
-                <a href="http://www.ishar.com/" target="_blank">Ishar.com</a>
+                <a class="icon-link" href="http://www.ishar.com/" target="_blank" title="Ishar.com">
+                    Ishar.com
+                    <svg class="bi" aria-hidden="true">
+                        <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                    </svg>
+                </a>
                 is currently still owned by Aaron Hopkins.
             </p>
             <p class="card-text lead">

diff --git a/apps/patches/templates/latest.html b/apps/patches/templates/latest.html
@@ -5,7 +5,7 @@
 {% block meta_url %}{% url 'latest_patch' %}#latest{% endblock meta_url %}
 {% block title %}Latest Patch{% endblock title %}
 {% block breadcrumbs %}
-    <li class="h2 bi bi-bandaid breadcrumb-item" title="Patches">
+    <li class="h2 bi bi-file-earmark-pdf breadcrumb-item" title="Patches">
         <a href="{% url 'patches' %}#patches" id="patches">Patches</a>
     </li>
     <li class="h2 breadcrumb-item active" aria-current="page" title="Latest Patch">
@@ -21,8 +21,11 @@
     </div>
     <div class="card-footer">
         <span class="blockquote-footer">
-            <a href="{{ patches.0.get_absolute_url }}" target="_blank" title="Open: {{ patches.0.patch_file.name }}">
+            <a class="icon-link" href="{{ patches.0.get_absolute_url }}" target="_blank" title="{{ patches.0.patch_file.name }} &lt;{{ request.scheme }}://{{ request.META.HTTP_HOST }}{{ patches.0.patch_file.url }}&gt;">
                 {{ patches.0.patch_file.name }}
+                <svg class="bi" aria-hidden="true">
+                    <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                </svg>
             </a>
         </span>
     </div>

diff --git a/apps/patches/templates/patches.html b/apps/patches/templates/patches.html
@@ -35,8 +35,11 @@
     </summary>
     <blockquote class="blockquote">
         <p>
-            <a href="{{ patch.patch_file.url }}" target="_blank" title="{{ patch.patch_file.name }} &lt;https://{{ request.META.HTTP_HOST }}{{ patch.patch_file.url }}&gt;">
+            <a class="icon-link" href="{{ patch.patch_file.url }}" target="_blank" title="{{ patch.patch_file.name }} &lt;{{ request.scheme }}://{{ request.META.HTTP_HOST }}{{ patch.patch_file.url }}&gt;">
                 {{ patch.patch_file.name }}
+                <svg class="bi text-secondary" aria-hidden="true">
+                    <use xlink:href="{% static 'bootstrap-icons/bootstrap-icons.svg' %}#box-arrow-up-right"></use>
+                </svg>
             </a>
             <small>
                 <code title="{{ patch.patch_file.size | filesizeformat }}">