better support for javascript disabled browsers

sass/_blog.scss

@@ -118,4 +118,12 @@ input#search::placeholder{
 .footer{
     margin-top: 4rem;
     padding: 2rem;
+}
+
+.pagination-previous, .pagination-next {
+    flex-grow: 0;
+}
+
+.theme-select-container{
+    margin-left:auto;
 }

static/js/switchcss.js

@@ -16,6 +16,7 @@ function changeTheme(themeName) {
     document.querySelectorAll('link.stylesheet').forEach(element => {
         if (element.id === themeName) {
             element.disabled = false;
+            element.media = '';
         }
         else {
             alternates.push(element);
@@ -24,6 +25,7 @@ function changeTheme(themeName) {
 
     alternates.forEach(element => {
         element.disabled = true;
+        element.media = 'none';
     });
 
     saveTheme(themeName);

templates/index_macros.html

@@ -99,8 +99,8 @@
 <footer class="footer js-only">
     <div class="columns">
         <div class="column">
-            <div class="content">
-                <div class="is-pulled-right">
+            <div class="content is-flex">
+                <div class="theme-select-container">
                     Theme:
                     <select id="theme-select">
                         {% for theme in config.extra.zulma_themes %}
@@ -136,7 +136,7 @@
 <link id="{{theme}}" class="stylesheet" rel="stylesheet"
     href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
 {% else %}
-<link id="{{theme}}" class="alternate stylesheet" disabled rel="stylesheet"
+<link id="{{theme}}" class="alternate stylesheet" media="none" rel="stylesheet"
     href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
 {% endif %}
 {% endfor %}