Makefile

@@ -1,5 +1,9 @@
 PYTHON=env/bin/python
+
+LIBRARY=polyphonic/interface/static
 DROPZONE=5.7.0
+BULMA=1.0.4
+ALPINE=3.15.12
 
 VERSION=0.8.4
 
@@ -39,7 +43,18 @@ upgrade:
 	poetry run manage collectstatic
 	${MAKE} libraries
 
-libraries: static/dropzone static/fonts/Quicksand_Book.otf
+#libraries: static/dropzone static/fonts/Quicksand_Book.otf
+libraries: ${LIBRARY}/css/bulma.min.css ${LIBRARY}/js/alpine.js ${LIBRARY}/css/material.css
+
+${LIBRARY}/css/bulma.min.css:
+	curl -o $@ "https://cdn.jsdelivr.net/npm/bulma@${BULMA}/css/bulma.min.css"
+
+${LIBRARY}/js/alpine.js:
+	curl -o $@ "https://cdn.jsdelivr.net/npm/alpinejs@${ALPINE}/dist/cdn.min.js"
+
+${LIBRARY}/css/material.css:
+	curl -o $@ "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+
 
 static/dropzone: 
 	wget -O dropzone-${DROPZONE}.zip https://github.com/enyo/dropzone/archive/v${DROPZONE}.zip

polyphonic/interface/templates/base.html

@@ -5,15 +5,11 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/png" href="{% static 'interface/icon.png' %}" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
-    <!--link rel="stylesheet" href="{% static 'interface/css/bulmaswatch.min.css' %}"></link-->
-    <link rel="stylesheet" href="{% static 'interface/css/polyphonic.css' %}"></link>
-    <script src="{% static 'interface/js/interface.js' %}"></script>
-    <script src="//unpkg.com/alpinejs" defer></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
-    <!-- script src="//kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous" defer></script -->
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <link rel="icon" type="image/png" href="{% static 'images/icon.png' %}" />
+    <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/polyphonic.css' %}" />
+    <link rel="stylesheet" href="{% static 'css/material.css' %}" />
+    <script src="{% static 'js/interface.js' %}"></script>
     <title>{% block title %}Polyphonic{% endblock %}</title>
     {% block media %}{% endblock %}
     <style>{% block style %}{% endblock %}</style>